[사용자 친화 웹] SEO

SEO(Search Engine Optimization, 검색 엔진 최적화)

검색 엔진의 작동 방식에 맞게 웹 페이지를 최적화해주는 작업으로, 크게 On-Page SEO와 Off-Page SEO 두 가지로 나뉘어진다.

• On-Page SEO : 말 그대로 페이지 내부에서 진행할 수 있는 SEO로, 제목과 콘텐츠, 핵심 키워드의 배치, 효율적인 HTML 요소 사용법 등을 이용하는 방법이다.
• Off-Page SEO : 웹 사이트 외부에서 이루어지는 SEO로, 소셜 미디어 홍보, 백링크(타 사이트에서 연결되는 링크) 등을 이용하는 방법으로, 웹 페이지 내용이나 구조와는 관계가 없다.

SEO에 영향을 미치는 요소

1. <title> 요소

• <title> 요소에 어떤 내용을 작성하는가에 따라서 검색 후 유입까지 유도할 수 있다.
  • 제목이 너무 길거나 짧아서 사용자가 제목으로 사이트를 파악하기 어려워지면 유입률이 떨어진다.
• <title> 요소에 핵심 키워드가 포함되면 상위에 노출될 확률이 높아진다.
  • 그렇다고 같은 키워드를 반복하면 검색시 불이익을 받을 수 있다. 제목에 핵심 키워드는 한 번만 포함시켜야 한다.

2. <meta> 요소

<meta> 요소: 메타 데이터를 담는 요소
메타 데이터: 해당 웹 사이트에서 다루고 있는 데이터가 무엇인지에 대한 데이터

(1)검색 결과창에서 제목 밑에 따라오는 설명글이나, (2)소셜 미디어나 채팅 애플리케이션에서 링크를 공유했을 때 뜨는 링크 미리보기와 관련 정보도 <meta> 요소에 들어가 있는 내용이다.

이 두 가지의 경우 모두 <meta> 요소를 사용하지만 각각의 목적은 엄연히 다름

• 첫 번째 경우는 name 속성을 사용하며, SEO를 위해서 사용하는 것이 목적
  
  

  name 속성값	설명
  description	콘텐츠에 대한 간략한 설명입니다. 검색 결과에서 제목 밑에 뜨는 내용을 생각하시면 됩니다.
  keywords	웹 페이지의 관련 키워드들을 나열할 때 사용합니다.
  author	콘텐츠의 제작자를 표시합니다.

  
  

• 두 번째 경우는 property 속성을 사용하며, 다른 사람에게 공유하기 위한 것이 목적 → 오픈 그래프 (open graph) 라고 함
  
  

  property 속성값	설명
  og:url	페이지의 표준 URL입니다.
  og:site_name	사이트의 이름입니다.
  og:title	콘텐츠의 제목입니다.
  og:description	콘텐츠에 대한 간략할 설명입니다. 검색 결과에서 제목 밑에 뜨는 내용을 생각하시면 됩니다.
  og:image	미리보기로 표시될 이미지입니다.
  og:type	콘텐츠 미디어의 유형입니다. 기본 값은 website로, video, music 등의 유형을 표시할 수 있습니다.
  og:locale	리소스의 언어로, 기본값은 en_US입니다. 한국은 ko_KR입니다.

  오픈 그래프가 SEO와 전혀 연관이 없는 것은 아니다. 해당 페이지에 방문자 수가 많다면 검색시 상위에 노출될 확률이 높아지기 때문에 간접적으로 연관이 있다고 볼 수 있다.

3. <hgroup> 요소

콘텐츠의 제목을 표시하는 용도인만큼 핵심 키워드를 포함하고 있을 가능성이 높음 → 검색 엔진도 <hgroup> 요소의 내용을 중요하게 취급함

4. 콘텐츠

• 개성있는 브랜딩: 아이디어나 이름이 겹치지 않는다며느 관련 키워드를 검색했을 때 해당 웹 사이트가 상위권에 뜰 가능성이 높다.
• 복사 + 붙여넣기 금지: 타 사이트의 글을 그대로 복사해서 사용하면 검색 엔진은 중복 문서로 판정하여 아예 검색 결과에서 생략해버리기도 한다.
• 간결한 제목과 설명글: 단순히 검색 엔진 노출 횟수를 늘리기 위해서 전혀 관련 없는 키워드를 넣어봤자 사이트를 방문한 사용자가 전혀 관련이 없는 콘텐츠를 보고서 해당 사이트에 안좋은 이미지를 갖게될 수 있으며, 동일한 키워드를 너무 많이 반복해서 작성하면 최악의 경우 스팸 사이트로 분류될 가능성이 있다.
• 최대한 글자로 작성하기: 검색 엔진은 이미지를 읽을 수 없기 때문에 이미지 사용은 SEO에 도움이 되지 않는다. 꼭 이미지를 넣어야 한다면 alt 속성을 사용해 이미지에 대한 설명을 텍스트로 작성하는게 좋다. (간결하게)