검색엔진 최적화(SEO) 튜토리얼

웹사이트를 운영하는 사람이라면 SEO(Search Engine Optimization)에 대해서 한번쯤은 들어보았을 것이다. 하지만 말로만 들어보았지 어떻게 해야 SEO가 되는지 막연하게만 생각이 떠오르고 구체적으로 어떤 부분에 어떤 액션을 취해야하는지 감이 잘 잡히지 않는 경우가 많다. 필자의 경우도 그랬기 때문에 웹사이트 검색엔진 최적화를 실제로 진행하면서 맞닥뜨렸던 궁금증이나 팁을 위주로 Best Practices를 정리해보았다.

더 많은 공부를 원하시는 분들은 구글 웹마스터 센트럴 블로그에 있는 글을 모두 읽어보길 권하고, 구글의 검색 가이드라인 문서들도 꼭 읽어봐야 할것이며, 이 포스팅에 언급된 다양한 주제들에 대해 추가적으로 더 검색을 해서 공부하시면 큰 도움이 될 것이다.

본 포스팅의 대부분의 내용은 구글에 맞춰져있다보니 기본적인 내용은 공통적으로 사용가능할지도 모르지만, 좀더 구글에 특화된 최적화 기법들을 적용했을 경우(예: 구조화된 데이터 제공)에는 네이버나 다음과같은 다른 검색엔진에는 별다른 영향이 없을수도 있으니 주의해하자.

검색엔진 동작 방식 및 관리 툴 사용법 익히기

가장 기본적인 SEO의 첫 단계는 타켓팅 하고있는 검색엔진이 어떻게 동작하고있는지를 알고, 어떻게하면 타겟팅하고 있는 검색엔진의 검색봇이 나의 웹사이트의 컨텐츠를 잘 인식해서 수집해갈 수 있게 하는지를 공부하는 것이다. 네이버의 경우 거의 네이버 블로그/카페/지식인 위주로 컨텐츠가 노출되기때문에 독립적인 웹사이트에서 제공하는 컨텐츠로는 노출이 쉽지가 않다 (동일한 내용의 컨텐츠라면 네이버 밖의 웹사이트에 위치한 컨텐츠보다 네이버 서비스 안에 자리잡은 컨텐츠가 검색결과에 더 잘보이는 경향이 있기 때문). 따라서 본 글에서는 구글을 중심으로 최적화하는 방법을 설명한다.

구글의 경우 웹사이트 관리자를 위해 웹마스터 도구를 제공한다. 이 도구를 통해서 현재 구글 검색엔진이 자신의 사이트를 어떤식으로 크롤링해가고있는지, 각 페이지에 인덱싱이 잘되고있는지 등 다양한 정보들을 볼 수 있다.

다음은 사이트 검색이 잘되고있는지 모니터링하는 것에 대해 구글에서 제공하는 가이드라인이니 꼭 필독 하도록 하자.

SEO 기본 전략 수립

구글에서 제공하는 SEO 전략 수립 비디오를 통해서 대략 SEO가 어떤 프로세스로 이루어지는지 파악 한 후 구체적인 케이스별 접근을 하도록 하자.

 

[Best Practices]

구체적인 페이지 제목 만들기

HTML문서의 헤더에 들어가는 페이지 제목(title)은 구체적이고 간결하게 적어줘야 검색결과 화면에서 텍스트가 잘리지 않고 유저에게 잘 보일 수 있다.

  • 제목내 유사 키워드 반복을 과하게 사용하면 구글 및 사용자가 스팸으로 오해할 가능성이 있음
  • 사이트이름 또는 회사명이 제목 시작 또는 끝 에 반복될경우 해당 반복되는 부분을 |, -, : 등으로 구분할것

    ex) 회사 소개 | Example, Inc
    https://support.google.com/webmasters/answer/35624?rd=1

meta 태그 description, keyword

keyword

 <meta name="keywords" itemprop="keywords" content=“키워드1, 키워드2, 키워드3" />

구글에서는 키워드 메타태그에 들어있는 값들을 전혀 검색결과에 반영하지 않는다고 못박았다. 1 키워드 메타태그의 경우 무분별하게 키워드를 집어넣는 spamming이 너무 많기 때문에 이를 반영하지 않는다는것이 구글측의 설명이다.

description

 <meta name="description" itemprop="description" content=“이 내용이 검색결과 프리뷰 부분에 사용될  수 있다" />

구글의 경우 키워드 메타는 완전히 무시하지만, 디스크립션 메타 태그의 경우 해당 디스크립션의 내용이 괜찮다고 판단되면 해당 부분을 구글 검색 결과 페이지에서 해당 결과의 프리뷰를 보여줄때 사용한다. 따라서 이 부분을 잘 작성하면 고객이 검색한 키워드에 대해 좋은 프리뷰 텍스트를 보여줄 수 있고, 클릭 확률을 높일 수 있을것이다.

다음은 구글에서 추천하는 디스크립션 작성법을 요약한 내용이다. 2, 3

  • 웹사이트내 모든 페이지에 동일한 디스크립션(description)을 적용할경우 별로 효과적이지 않음.
  • 각 페이지의 내용을 정확히 서술하거나 요약하는 내용의 텍스트를 디스크립션에 넣는것이 좋다.
  • 모든 페이지에 대해 각각 작성할 시간이 없다면 웹사이트내 페이지들을 우선순위를 둬서 주요 페이지들만 작성하는것을 추천.
  • 해당 페이지의 타이틀과 중복되는 정보는 디스크립션에 넣지 않는 것이 좋다. (중복인경우 검색결과 페이지에서 동일 텍스트가 반복되게되어 전달가능한 정보의 양이 줄어들게 되어 비효율적이다.)
  • 페이지가 많은 웹사이트의 경우 프로그램으로 디스크립션을 자동 생성(programmatic generation)하게해야 할 수도 있으나 최대한 human readable, not spammy한 형태로 만들어야 가치있는 디스크립션으로 평가받을 수 있다.
  • 메타 디스크립션의 경우 꼭 줄글 형태일 필요는 없다. 다음과 같이 구조화된 데이터를 넣어두어도 검색에 큰도움이 된다.

hgroup 태그

Html5의 표준에 포함되지 못한 태그로 쓰지 않는것을 추천. SEO에도 도움이 되지 않는다. 4

img 태그의 alt, title 속성

img태그를 사용할때 SEO측면에서 뭔가 도움이 될 수 있을만하게 보이는 속성이 바로 alt, title 이다. 해당 속성에는 검색엔진이 인덱싱 가능한 텍스트 값을 입력할 수 있기 때문인데, 해당 값이 SEO에 어떤 영향을 미치는지 알아보자.

alt 속성: SEO 효과 있음

alt속성의 경우 alternative의 의미로 이미지가 로딩되지 못했을때 대신 표시되는 텍스트이다. 혹은 시각장애인용 스크린리더가 사용될때는 이미지 대신 이 alt속성값을 읽어서 대략 어떤 이미지인지 파악 할 수 있도록 도움을 준다. 검색엔진 또한 이미지를 발견하면 alt 속성 안의 텍스트를 통해 인덱싱작업을 한다. 5

하지만 alt 값에 키워드들을 잔뜩 채워넣는 키워드 스터핑(keyword stuffing)을 할 경우 오히려 검색엔진에 의해 페널티를 받을 수 있으니 실제 이미지의 내용을 기술하되, 해당 내용에 주요 키워드가 적절히 들어가도록 서술하는것이 가장 좋다. 6

title 속성: SEO 효과 없음

title 속성값이 있을경우 대부분의 웹브라우져에서 마우스를 이미지 위에 올렸을때 툴팁 형태로 title의 내용을 보여주게 되므로 alt에서 약간 빠진 내용이있다면 title에 더 상세히 적어주는것도 UX측면에서 나쁘지 않다. 하지만 SEO에는 도움이 되지 않는다.

anchor 태그의 title 속성

다른 페이지로 연결되는 링크에 title 속성을 명시하게되면, title 속성값이 현재페이지에 대한 데이터가 아니고, 해당 링크가 가리키는 페이지의 데이터가 된다. 즉 검색엔진이 특정 URL을 인덱싱할때 해당 URL을 가리키고 있는 링크들의 정보들을 수집하게되는데 해당 링크에 적혀있는 title 속성값은 해당 URL의 정보가 된다는 말이다.
결국 다른 웹사이트에서 자신의 웹사이트로 연결된 링크가 많을수록 좋고(페이지 랭크 기본 알고리즘), 링크들에 걸려있는 title 속성값들에 유효한 키워드들이 많을수록 좋다는 이야기이다.

다국어(multilingual) 웹사이트

다국어를 지원하는 사이트의 경우 어떤 페이지가 어떤 언어를 지원하는지 검색봇이 더 잘 알기쉽게하기 위해서 여러 방법을 사용할 수 있다. 다국어 사이트를 만들때 한 도메인에서 할지, 서브도메인을 이용할지, URL 파라메터를 이용해서 할지에 대해서는 다음 표를 참고하자. 7

ccTLDs

eg: example.de, example.fr
Subdomains with gTLDs

eg: de.site.com, fr.site.com, etc.
Subdirectories with gTLDs

eg: site.com/de/, site.com/fr/, etc.
URL parameters

eg: site.com?loc=de, ?country=france, etc.
장점 (+)

– geotargeting 이 명확함

– 서버 위치 무관

– 사이트간 완전한 분리가 쉬움

장점 (+)

– 설정 쉬움

– Webmaster Tools에서 geotargeting 설정 가능

– 언어별로 다른 웹서버 사용가능

– 사이트를 언어별로 분리해서 관리하기 쉬움
장점 (+)

– 설정 쉬움

– Webmaster Tools에서 geotargeting 설정 가능

– 하나의 서버에서 다국어 사이트 모두 운영(비용저렴)
장점 (+)

추천하지 않음
단점 (-)

– 운영, 유지비가 많이든다

– ccTLD 등록에 있어 법적인 제약이있는 나라도 존재
단점 (-)

– 사용자가 url만으로는 정확한 geotargeting 파악이 힘들다. (“de” 가 국가인지 언어인지 헷갈림)
단점 (-)

– 사용자가 url만으로는 정확한 geotargeting 파악이 힘들다

– 하나의 서버에서 모든 다국어 사이트를 운영해야함

– 사이트의 언어별 분리가 힘듬
단점 (-)

– 사용자가 url만으로는 정확한 geotargeting 파악이 힘들다

– Webmaster Tools을 이용해서 geotargeting 하는것이 불가능
  1. 구글은 한페이지 내에서 하나 이상의 언어로 섞여서 구성된 웹페이지를 인식하고 인덱싱할 수는 있지만, 해당 페이지내의 주된 언어가 무엇인지 봇에게 인식시키려면 두개의 언어를 동일페이지에 번역해서 나란히 배치하는것을 피하고, header, sidebar, menu 등에는 같은 언어로 통일을 해놓는것이 좋다. 8

  2. 구글봇이 여러가지 캐릭터 인코딩을 지원하긴하지만, 되도록이면 UTF-8로 하는것을 추천한다.

  3. link 태그를 이용하여 다음과 같이 추가 정보를 정의할 수 있다. 9

  • 동일한 내용의 다국어 내용을 다이나믹하게 동일 url에서 보여주는 경우 (페이지 내에 언어 선택 기능이 들어있을경우 등)

     <link rel="alternate" hreflang="x-default" href="http://example.com">

    • 위 태그를 통해서 검색봇에게 이 사이트는 특정언어에 타겟팅 된 페이지가 아니다 라고 알려줄 수 있다.
  • 동일한 내용의 다국어 내용을 다른 url에서 보여주는 경우, 다음과같이 언어별 주소를 명시해준다

     <link rel="alternate" hreflang=“es" href="http://es.example.com">
     <link rel="alternate" hreflang=“ja" href="http://ja.example.com">

    • html 컨텐트일 경우 위와같이 마크업을 넣어서 검색엔진에게 잘 인덱싱되게 도울 수 있지만, 이미지나, pdf등 파일을 가리키는 url일 경우에는 태그를 사용하는것이 불가능하기 때문에 HTTP 헤더의 Link 필드에 hreflang 정보를 넣어서 같은 효과를 낼 수 있다.
  • https://support.google.com/webmasters/answer/189077

  1. 동일한 컨텐트인데 여러 url에서 액세스 가능한 경우

    • https://example.com/krhttps://kr.example.com/이 동일한 컨텐트일경우 한쪽에서 검색엔진에 인덱싱되기를 원하는 주소로 301 리디렉션을 걸어주거나, 다음과같이 canonical 속성을 이용해서 선호하는 주소를 명시 한다.

      <link rel="canonical" href="https://example.com/kr" />

      • canonical 설정을 위한 주소는 되도록 절대경로를 넣어야한다.(상대경로를 넣을경우 제대로 인식되지 않을 수 있다.) 10
  2. 그 외에도 구글에서 FAQ 페이지 를 만들어놓았으니 여기를 참고하도록 하자

HTTPS가 랭킹에 영향을 주는가?

답은 영향을 준다 이다. 동일사이트라면 http로 서비스하는것에 비해 https로 서비스 할경우 구글 검색엔진에서 전체 점수의 약 1%정도에 해당하는 랭킹 가산점이 부여된다. 11

여러개의 페이지로 나누어진(시리즈) 컨텐츠 검색 최적화

뉴스, 튜토리얼, 연재, 등 긴 글의 경우 동일제목을 가진 컨텐츠를 여러 페이지로 나누어서 퍼블리싱하게되는 경우가 있다. 이때 해당 페이지를 검색엔진에게 잘 알리기 위해 다음과 같은 방법을 사용한다.12

  • 전체 보기 페이지를 만들어서 제공
    • 각각의 나누어진 페이지에 rel=”canonical” 링크를 이용하여 전체 보기 페이지를 가리키게 만들어둘것. 이렇게하면 전체 보기 버전을 표시할 것을 구글에 알릴 수 있음.
  • rel=”next” 및 rel=”prev” 링크를 시리즈 글 사이의 관계를 나타낸다.
    • Google에서는 해당 페이지를 논리적 순서로 처리하여 페이지의 링크 속성을 통합하고 검색자에게 주로 첫 번째 페이지를 표시해줌

Rich snippet 을 이용하여 더 자세한 검색 결과 보여주기

리치 스니펫(Rich snippet)이란 구글 검색엔진에서 기존 보여주던 단순한 타이틀 + 텍스트 요약 내용 외에 더 풍부한 정보를 검색결과로 제공하는 것을 말한다. 영화라면 해당 영화의 리뷰 별점, 예약사이트라면 티켓 예매정보, 밴드사이트라면 해당 밴드의 앨범리스트 등 다양한 구조화된 정보(structured data)들을 좀더 보여주는것이 가능하다.

이러한 구조화된 정보들은 schema.org에 다양한 타입들이 정의되어있고 각 타입들은 여러 필드들로 구성되어 자세한 데이터들을 나타낼 수 있다. 구글, 빙, 야후 등의 검색엔진 봇들은 여기에 정의된 데이터들을 해석할수 있도록 만들어져있기때문에 해당 정보들을 읽어들여서 검색결과들을 좀 더 풍부하게 보여줄 수 있는것이다. 이러한 작은 차이가 검색결과 페이지에서 사용자에게 눈에 띌 수 있기때문에 리치 스니펫이 사용될 만한 페이지에는 최대한 적용을 해놓는것이 좋다.

구글에서 명시적으로 리치 스니펫을 지원하는 구조화된 정보로는 Product, Recipes, Reviews, Events, Apps, Videos, Articles 이 있으며 자세한 적용 방법은 스트럭쳐드 데이터 가이드 페이지를 참고하자.

이러한 구조화된 정보들은 해당 페이지의 html 코드 안에 삽입되어야하는데 html코드 내에서 이러한 구조화된 데이터를 표현하는 방법으로 microdata, RDFa, JSON-LD 등이 있으니 사용하면 된다.
구조화된 데이터가 잘 출력되고있는지는 구글에서 제공하는 다음 툴을 사용하면 된다. https://developers.google.com/structured-data/testing-tool/

만약 html 코드를 직접 수정하는것이 힘들다면 이런 작업을 데이터 하일라이터(Data Highlighter)로 대체하는것이 가능하다. Data Highlighter 란 구글 웹마스터툴에있는 기능의 일부로 웹마스터 툴에서 관리중인 웹사이트의 각 페이지들을 읽어들인 후, 해당 페이지를 보면서 어떤 내용이 구조화된 데이터인지 하나씩 수동으로 태깅을 할 수 있게 해준다. 이를 통해 웹페이지 특정 영역의 특정 값을 구조화된 데이터로 사용할 수 있게 해준다. 하지만 손이 많이가고 태깅해놓은 페이지의 구성이나 내용이 변경될 경우 정확한 값을 읽어오지 못하게될 수 있으니 되도록이면 직접 html코드에 구조화된 데이터를 임베드 시키는 것이 좋다.

knowledge graph에 노출되는 데이터 입력

특정 키워드에 대한 검색결과에 대해 일반적인 검색결과 오른쪽에 크게 먼저 컨텐츠를 보여주는 기능을 knowledge graph라고 한다. 어떤조건을 만족시켜야 knowledge graph에 노출되는지는 정확하게 알려진 바가 없으나, 최대한 구조화된 데이터들을 미리 잘 입력시켜 놓는다면, 노출될 확률도 올라갈것이고 올라갔을때 더 정확한 정보를 표기 할 가능성이 있으니 미리미리 준비하도록 하자.

  1. 사이트 로고 검색봇에 인식시키기
    http://googlewebmastercentral.blogspot.kr/2013/05/using-schemaorg-markup-for-organization.html

  2. 연락처
    https://developers.google.com/structured-data/customize/contact-points

  3. 사람, 단체, 기업 정보
    구글은 freebase, 위키피디아, 구글플러스 등 여러 소스에서 knowledge 그래프에 해당하는 데이터를 가져오는것으로 알려져 있다13. 어떤식으로 Knowldge Graph에 표시되는 데이터를 수집하여 보여주는지는 정확히 알려지지 않았기 때문에 일단은 추측일 뿐이지만, 어느정도 신빙성이 있어 보인다.

    • 직접 해보기: 구글에서 KT를 검색할경우 검색 결과 오른편에 KT에관한 기업 정보 등이 서술된 knowledge graph가 보여진다. 유심히 살펴보면 해당 설명은 한국어 위키피디아의 KT에관한 정보와 완전히 일치하는것을 알 수 있다.

로그인 후에만 컨텐츠가 보이는 회원제 웹사이트를 구글에 노출하려면

이경우 구글에서 추천하는 여러가지 모델들이 있으니 사이트 형태에 적합하게 적용하여 사용하면 된다.

  • First click free 모델을 사용: *.google.com 을 통해서 접근한 유저의 경우 첫번째 컨텐츠는 무료로 보여주고, 페이지 내에서 추가 이동시 로그인을 하도록 제한을 둔다.
  • 구글 검색에 노출될 수있도록 해당 컨텐츠의 요약본만을 제공하여 snippet형태로만 인덱싱되게 한다.
  • Robot.txt나 사이트맵에 인덱싱이 허용된 컨텐트들을 명시해서 액세스가 쉽도록 해놓는다.

더 자세한 설명은 구글 도움말을 참조하도록 하자. 14

기타: 이메일 마크업

검색엔진 결과에 구조화된 데이터를 이용하여 리치 스니펫을 보여주듯이, 비슷하게 Gmail에서도 이메일 내용에 구조화된 정보를 넣어서 사용자에게 추가적인 기능을 보여 줄 수 있으니 참고하도록 하자.
https://developers.google.com/gmail/markup/getting-started


  1. http://googlewebmastercentral.blogspot.kr/2009/09/google-does-not-use-keywords-meta-tag.html 
  2. http://googlewebmastercentral.blogspot.kr/2007/09/improve-snippets-with-meta-description.html 
  3. https://support.google.com/webmasters/answer/35624?rd=1 
  4. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/hgroup 
  5. http://googlewebmastercentral.blogspot.kr/2007/12/using-alt-attributes-smartly.html 
  6. http://webmasters.stackexchange.com/questions/1005/is-the-title-attribute-not-tag-important-to-seo 
  7. http://googlewebmastercentral.blogspot.kr/2010/03/working-with-multi-regional-websites.html 
  8. http://googlewebmastercentral.blogspot.kr/2010/03/working-with-multilingual-websites.html 
  9. http://googlewebmastercentral.blogspot.kr/2013/09/video-expanding-your-site-to-more.html 
  10. https://support.google.com/webmasters/answer/139066?rd=1 
  11. Google I/O 2014 – HTTPS Everywhere 
  12. https://support.google.com/webmasters/answer/1663744 
  13. https://moz.com/ugc/i-became-an-entity-how-im-on-the-knowledge-graph 
  14. https://support.google.com/news/publisher/answer/40543?hl=en&rd=1