웹사이트를 만들 때 반드시 고려할 항목 중 하나가 검색엔진최적화(Search Engine Optimization, 이하 ‘SEO’)라는 건 누구나 아는 사실입니다. 굳이 철학의 인식론 문제를 들먹이지 않더라도, 아무리 멋지고 유익한 콘텐츠가 가득 담긴 사이트가 있다한들 세상에 알려지지 않으면 없는 거나 뭐가 다를까요?
그렇지만 막상 어디서부터 어떻게 적용할까 하는 문제는 생각만큼 그렇게 간단하고 쉬운 문제는 아닌 듯 합니다. 이 글에서는 국내외 주요 검색엔진인 구글(Google)과 네이버(Naver)가 각각 공개하는 검색엔진 최적화 가이드를 중심으로 간단한 적용법을 정리해 보려 합니다.
물론 검색엔진 최적화를 위해서는 검색엔진(Search Engine)이 어떻게 작동하는지 그 원리를 아는 게 중요합니다. ‘지피지기면 백승백승’은 병법의 기본. 하지만 검색엔진의 작동 원리는 대개 ‘영업비밀’인 관계로 공개되지 않습니다. 공개된다 한들 그 복잡한 원리를 제대로 이해하기도 쉽지는 않겠지만요. 해서 우리는 흔히 검색엔진에서 보여주는 검색결과를 ‘역추적’하여 특정 검색엔진의 작동원리에 대한 ‘감’을 잡곤 합니다. 장님 코끼리 만지기와 비슷하다고 할까요?
(Photo — Credits to “marfis75 on flickr”)
결국 검색엔진 최적화는 검색엔진에서 제공하는 공식 가이드로부터 출발하는 게 최선의 방법입니다. 이 글에서 사용한 검색엔진 최적화 가이드는 다음과 같습니다:
HTML 페이지 구성
검색엔진 최적화는 개별 페이지 단위로 이루어집니다. 웹사이트에 100개의 페이지가 있다면 그 각각의 페이지가 검색 최적화의 대상이 됩니다. 웹페이지의 HTML을 구성할 때 다음과 같은 사항을 고려하면 됩니다.
<title> 태그와 description 메타(meta) 태그
<title> 태그와 설명(description) 메타태그는 검색엔진이 페이지의 내용을 파악할 때 기본으로 사용하는 데이터들이며, <title> 태그는 해당 페이지의 제목을, 그리고 descripiton 메타 태그에서는 그 페이지에 대한 설명을 포함시키면 됩니다. 제목과 설명은 페이지를 잘 표현할 수 있도록 페이지마다 고유하게 작성합니다. 길이에 특별한 제한은 없지만, 네이버의 경우 제목은 15자 이내, 설명은 45자 이내를 권장하고 있습니다.
오픈그래프(Open Graph) 태그
오픈그래프 태그는 원래 페이스북(Facebook)에 공유될 때 사용되는 정보이지만, 최근에는 페이스북 뿐 아니라 여러 곳에서 활용되는 메타 데이터입니다. 검색엔진에서 이 값을 얼마나 어떻게 활용하는지는 분명하지 않지만, 콘텐츠의 공유를 위해서라도 포함시켜야 하는 정보입니다. 오픈 그래프에 대한 자세한 내용은 http://ogp.me/를 참고하면 됩니다.
제목 태그의 적절한 사용
제목 태그, 즉 <h1>부터 <h6>까지의 태그들은 페이지에서 내용의 개요를 표현하는 태그이기 때문에 용도에 맞춰 적절하게 사용하는 것이 좋습니다. 한 페이지 내에 너무 많은 제목 태그들이 사용되는 것은 좋지 못합니다.
페이지 구조
알기 쉬운 URL 사용
페이지 URL에는 가급적 페이지와 연관되는 단어가 들어있는 것이 ID나 또는 이상한 이름의 매개변수가 들어 있는 경우보다 좋습니다. 이는 검색엔진 뿐 아니라 사용자들에게도 이 페이지가 어떤 페이지인지를 좀 더 쉽게 파악하는데 도움을 줍니다.
사이트맵(Sitemap)의 작성
사이트맵은 웹사이트의 구조를 알려주는 페이지입니다. 통상적으로 ‘사이트맵’이라고 하면 웹사이트의 메뉴 항목에 포함된 사이트맵 페이지를 떠올리는 경우가 많지만(물론 사용자에게 웹사이트의 구조를 알려준다는 측면에서 이 페이지는 중요합니다), 검색엔진 입장에서 특히 중요한 것은 흔히 ‘Sitemap XML’이라 부르는 XML 형식의 파일입니다.
이 파일을 작성하여 (웹마스터 도구를 이용해) 검색엔진에 등록하면 검색엔진이 사이트의 전체 구조를 파악하고 색인을 생성하는데 도움이 됩니다. 통상적으로 이 파일은 CMS에 의해 자동으로 작성됩니다.
Sitemap XML에 대한 더 자세한 내용은 https://www.sitemaps.org/를 참고하면 됩니다.
대표 URL
하나의 페이지에 대해 여러 URL이 존재할 경우 대표 URL(Canonical URL)을 사용하는 것이 좋습니다. 이 때 나머지 URL에 대해서는 대표 URL로 301 리다이렉션 시키거나 또는 페이지 내에 rel=“canonical” 표시를 추가해 주는 것이 좋습니다. 특히 메인 페이지인 경우 하나의 대표 URL만 갖도록 나머지 URL에 대해서는 301 리다이렌션 처리를 해 줄 것을 권장합니다.
유용한 오류 페이지 반환
웹사이트에서 없는 URL을 호출하거나 기타 여러 이유로 존재하지 않는 페이지를 호출할 경우 흔히 ‘404 페이지’를 반환합니다. 이 때 404 페이지는 “페이지가 없습니다”라는 내용만 덜렁 출력하는 페이지보다는 사이트에 맞는 맞춤형 오류 페이지를 보여주는 것이 좋습니다. 이 때 HTTP 상태 코드 역시 HTTP 규약에 따라 오류 내용에 맞는 상태 코드를 반환해야 합니다. 즉 404 페이지인 경우 HTTP 200 OK가 아닌 HTTP 404 Not Found를 반환하도록 구성합니다. 구글 검색엔진의 경우 404 코드가 반환되어야 할 페이지가 200 OK로 표시될 경우, ‘Soft 404 Error’라고 하는 오류로 처리하기도 하니 주의를 요합니다.
앵커 태그와 텍스트
앵커 태그(<a> 태그)는 페이지 간 이동을 위한 태그입니다. 앵커 태그를 작성할 때는 이동할 페이지의 내용을 함축하는 간결한 텍스트를 사용해야 하며, 글자로 쓸 내용을 이미지(image)로 만드는 것은 좋지 못합니다.
콘텐츠 최적화
무엇보다 좋은 콘텐츠가 우선입니다. 흥미로운 페이지는 자연스럽게 사용자의 관심을 끕니다. 그러니 경쟁력 있는 좋은 콘텐츠를 만드는 것은 여기 소개한 어떤 다른 장치들보다 검색 결과에 있어 높은 순위를 차지할 확률을 높입니다.
국내에선 다른 사이트의 콘텐츠를 무단으로 가져다 사용하는 경우가 종종 있는데, 이는 검색엔진 입장에서도 바람직하지 않은 행위입니다. 그래서인지 네이버 검색엔진 최적화 가이드에는 다음과 같은 재밌는 내용도 담겨 있네요.
복사하지 말고 자신의 이야기를 해 주세요.
검색 결과 상위 노출 또는 많은 노출을 위해, 타 사이트의 좋은 글을 그대로 복사해 오는 경우가 있습니다. 이럴 경우 검색로봇은 해당 문서를 중복문서로 판정할 뿐 아니라, 해당 사이트가 새로운 좋은 정보를 생산하지 않기 때문에 가치가 낮은 사이트라고 판단할 수 있습니다.
검색로봇에 대한 대응
robots.txt 파일의 활용
robots.txt는 검색엔진이 사이트에서 액세스할 수 있는 부분과 하지 말아야할 부분을 정해 놓은 검색엔진과의 규약입니다. 기본적으로는 검색로봇이 방문하면 안되는 페이지를 이 파일 속에 양식에 맞춰 기록하면 됩니다.
다음은 네이버 검색엔진 최적화 가이드에서 가져온 robots.txt 파일의 샘플입니다.
robots.txt 파일은 반드시 root에 위치해야 합니다. 또한 과도한 robots.txt 설정은 사이트에 더 많은 방문자를 유도할 수 있는 정상적인 검색 엔진만을 차단할 뿐, 해킹이나 악성코드를 유발하는 수많은 악의적인 로봇들은 이러한 로봇 배제 표준을 따르지 않는다는 점도 유의해야 합니다.
내 사이트의 robots.txt 설정이 궁금하다면 지금 바로 URL 창에서 /robots.txt 로 확인해 보는 것도 좋습니다. robots.txt에 대한 좀 더 상세한 내용은 http://www.robotstxt.org/를 참고하면 됩니다.
rel=“nofollow”와 robots 메타 태그
앵커 태그에서 검색엔진이 따라가기를 원치 않는 경우에는 다음과 같이 rel=“nofollow” 속성을 추가할 수 있습니다.
<a href="https://blog.example.com/spam-page" rel="nofollow">스팸 페이지</a>
또한 페이지 단위로 검색엔진의 접근을 막기 위해 HTML <head> 영역 내에 다음과 같이 robots 메타 태그를 추가할 수도 있습니다.
<meta name="robots" content="noindex">
이 때 content 값에 noindex를 사용하면 해당 페이지는 검색 결과에서 제외되며, nofollow를 사용하면 검색로봇이 해당 페이지 내의 링크를 따라가지 않도록 설정할 수 있습니다. 기본 설정은 index, follow 입니다.
모바일(Mobile) 대응
이미 모바일 세상이 되어버린 지금, 모바일 대응이라고 하는 별도 주제를 다루는 것 자체가 조금 시대에 뒤진 감은 있지만, 세상에는 데스크톱 웹사이트와는 다른 모바일 웹사이트가 별개로 존재하는 경우가 많이 있습니다. 마찬가지로 검색엔진도 웹(PC) 환경이냐 모바일 환경이냐에 따라 검색과 결과 처리를 달리 하기도 합니다. 예를 들어, 구글은 웹 검색을 위한 User Agent 값으로는 “Googlebot”을, 그리고 모바일 버전을 위해서는 “Googlebot-Mobile”을 사용하며, 웹과 모바일 검색에 있어 다른 색인(index)을 관리합니다.
참고로, 구글은 사이트가 모바일에 친화적인지 검사할 수 있는 모바일 친화성 테스트 도구를 제공합니다. 이 도구를 통해 내 사이트가 모바일 환경에 최적화되어 있는지 확인할 수 있습니다.
통상적으로 웹(PC) 버전과 모바일 버전의 웹사이트를 함께 구현하는데는 크게 다음과 같이 3가지 방법이 있습니다(출처: 구글 모바일 검색엔진 최적화).
반응형 웹 디자인
웹 브라우저가 웹문서의 가로폭을 기기의 스크린 크기에 맞게 자동적으로 조절하는 기법으로, 사용자 기기 (데스크톱, 태블릿, 모바일, 비시각적 브라우저)와 상관없이 동일한 URL에 동일한 HTML 코드를 게재하지만 화면 크기에 따라 다르게 렌더링(응답)할 수 있습니다. 반응형 디자인은 Google에서 권장하는 디자인 패턴입니다.
동적 게재
기기와 관계없이 동일한 URL을 사용하지만 서버가 사용자의 브라우저에 대해 알고 있는 정보를 기준으로 기기 유형에 따라 서로 다른 버전의 HTML을 생성하는 방식입니다. 이러한 경우 동일한 URL이 모바일 검색과 데스크톱 검색에 보여 질 것이며, 결과물에 대하여 사용자는 각각 다른 버전에 맞는 콘텐츠를 보게 됩니다.
이 때 한가지 주의해야 할 사항은, 이러한 설정을 잘못하게 되면 사이트는 “클로킹(cloaking)”이라는 Google의 가이드라인에 위배되는 행위를 한 것으로 취급되어 불이익을 받을 수도 있다는 점입니다. 일반적으로 클로킹(cloaking)이란 SF 분야에서 자주 등장하는 기술로, 특정한 물체의 존재가 전자기파를 탐지하는 모든 종류의 감지기에 보이지 않도록 하는, 한마디로 물체를 ‘투명하게’ 만드는 기술을 총칭합니다만, 구글에서 말하는 클로킹은 사용자와 검색엔진에 각각 다른 콘텐츠를 제공하는 방식으로 검색 품질을 저해하는 행위를 의미합니다.
별도 URL
각 기기별로 URL을 구성하는 방식입니다. 이 설정은 사용자의 기기를 감지한 다음 Vary HTTP 헤더와 함께 HTTP 리디렉션을 사용하여 적절한 페이지로 리디렉션합니다.
이 때 두 버전을 운영하는데 있어서, 사용자를 위해 내용이 최대한 일치하도록 콘텐츠를 작성하여야 합니다. (구글 가이드 상에는) 예를 들어 쇼핑 사이트의 경우, 사용자가 모바일을 통해 데스크톱용 상품관련 URL을 접근하려고 할 때, 리디렉션되는 모바일용 페이지가 모바일용 홈페이지가 아닌, 해당 상품의 모바일용 페이지가 되어야 합니다.
또한 별도 모바일 페이지를 제공하는 경우에는 <link> 태그를 활용하여 데스크톱 사이트의 URL을 명시적으로 지정하는 것이 좋습니다. 특히 이 작업은 네이버의 검색로봇이 데스크톱 및 모바일 사이트에 방문할 때 콘텐츠가 중복으로 처리되지 않도록 알려주는 역할을 합니다. 네이버 검색엔진 최적화 가이드에는 예를 들어 여러분이 데스크톱 사이트로 http://www.mysite.com이 있고 그와 대응하는 모바일 사이트인 http://m.mysite.com이 있다고 가정한다면 http://m.mysite.com 내의 페이지에 아래와 같이 데스크톱의 URL을 명시하는 것이 좋다고 나와 있습니다.
지금까지 설명한 내용을 정리하면,
다음과 같이 간단한 표로 만들 수 있습니다.
결국 사용자들이 사이트를 검색하고 이동하기 편리하도록 만드는 것이 곧 검색엔진에게도 좋고 최적화에도 도움이 된다는 것을 알 수 있습니다.
검색 결과의 확인과 웹마스터 도구의 활용
마지막으로, 이미 다 아는 내용이겠지만, 자신의 사이트의 페이지가 검색엔진에서 색인에 등록되었는지 여부는 검색창에 ‘site:’를 붙이고 사이트 도메인을 추가해 검색해 보면 확인할 수 있습니다(구글과 네이버 모두 해당됩니다). 예를 들어, 이 사이트(디지털 마케팅의 기술)를 확인하려면 검색창에 ‘site:blog.usefulparadigm.com’와 같이 넣어보면 됩니다.
또 검색엔진과 함께 제공되는 웹마스터 도구(구글, 네이버)는 검색엔진을 제어하고 검색과 색인 상태를 확인하는데 있어 없어서는 안될 중요한 도구이니 늘 곁에 두고 활용하는 것이 좋습니다. 🙂
