hreflang 태그의 구성 요소를 단순히 <head></head> 사이에 추가한다고 hreflang 태그가 동작하는 것이 아니다. hreflang 태그가 잘 동작하기 위해서 필요한 (1) 표준링크(canonical link) (2) 자기링크(self link) (3) 반환링크(return link) (4) X-디폴트 링크(x-default link)를 살펴보자.
■ 표준 링크(canonical link, 캐노니컬 링크)란?
표준 링크란, 현재 페이지의 대표 페이지를 지정해서 구글에게 알려주는 역할을 한다. 한 페이지라도 여러 주소를 가질 수 있는데, 검색 엔진 입장에서는 이를 구분 못하고 수집해서 “엥? 동일한 콘텐츠인데 여러 개 있네? 난 중복 콘텐츠는 싫어!” 하고 순위에 악영향을 줄 수 있다.
URL이 중복되는 예시는 다음과 같다. index.php / main.html / www가 있고 없고의 차이 / https, http의 차이 / 검색 결과가 url 파라미터에 나타날 경우 등등…. 이 때 표준 링크를 사용해서 구글에게 “아냐, 진정해. 얘네는 사실 다 같은 페이지고, 내가 원하는 대표 url은 이거니까 검색 결과에는 이것만 포함시켜줘”라고 해주는 것이다.
표준 링크 관련 구글의 상세 가이드는 다음 링크에서 찾을 수 있다: https://support.google.com/webmasters/answer/139066?hl=ko
■ hreflang와 표준 링크
그렇다면 다국어 페이지의 표준 링크는 어떻게 지정해야할까?
다국어 페이지의 경우, 우리는 모든 페이지의 인덱싱이 필요하다. 영어를 사용하는 유저에게 영어 페이지가, 한국어를 사용하는 유저에겐 한국어 페이지가 보여져야 하기 때문이다.
즉, hreflang 태그를 심을 모든 페이지의 표준 링크는 그 페이지 자체가 되어야한다!
표준링크:
<link rel=”canonical” href=”https://example.com/ko/pants” />
자기링크:
<link rel=”alternate” href=”https://example.com/ko/pants” hreflang=”ko” />
■ 자기링크(self link)
자기 링크는 말그대로 A라는 페이지가 A로 포인트하는 링크를 말한다. 모든 페이지는 자기 스스로를 가리킬 수 있어야 한다.
위의 자기링크 예시를 보면, link rel 속성은 alternate을 쓰고, href와 hreflang 속성을 쓰는, 첫 번째 글에서 본 hreflang 태그와 동일함을 알 수 있다.
■ 반환링크(return link)
반환 링크는 다른 언어로 구성된 페이지를 가리키는 링크다. 영어 페이지는 한국어 페이지를 가리키고, 한국어 페이지는 영어 페이지를, 즉 서로의 페이지를 가리키고 있어야 한다. 이 구조에서 하나의 링크만 빠져도 hreflang 태그는 제대로 동작하지 않는다.
한국어와 영어 페이지만을 운영한다고 가정했을 때, 한국어 페이지의 태그 예시는 다음과 같다.
<link rel=”canonical” href=”https://example.com/ko/pants” />
<link rel=”alternate” href=”https://example.com/ko/pants” hreflang=”ko” />
<link rel=”alternate” href=”https://example.com/en/pants” hreflang=”en” />
표준링크(첫 번째 링크)와 자기링크(두 번째 링크), 그리고 영어 페이지에 대한 반환링크(세 번째 링크)가 구성되게 된다.
영어 페이지도 마찬가지로 구성되는데, 예시는 다음과 같다.
<link rel=”canonical” href=”https://example.com/en/pants” />
<link rel=”alternate” href=”https://example.com/en/pants” hreflang=”en” />
<link rel=”alternate” href=”https://example.com/ko/pants” hreflang=”ko” />
만약 독일어 페이지를 추가로 운영한다면? 한국어와 영어 페이지에 독일어 페이지로 반환 링크인 <link rel=”alternate” href=”https://example.com/de/pants” hreflang=”de” /> 를 추가하면 된다. 당연히 독일어 페이지에는 표준링크와 자기링크, 한국어/영어 페이지로의 반환링크가 있어야한다.
■ X-디폴트 링크(x-default link)
X-디폴트는 옵션 격인데, 만약 내가 영어, 한국어, 독일어 페이지만 운영하는데 일본어 유저가 검색을 했다고 치자. 구글은 무슨 페이지를 보여줘야할지 도통 모를 것이다. 이 때, “이 사이트가 운영하지 않는 언어의 유저가 접속하려고 할 땐, 이 언어 페이지로 우선 보여줘”라고 지정해주는 것이 X-디폴트 링크이다.
영어 페이지를 X-디폴트 링크로 삼는 링크는 이렇게 생겼다.
<link rel=”alternate” href=”https://example.com/en/pants” hreflang=”x-default” />
다음 글에서는 hreflang 태그를 심는 방법에 대해 알아보겠다.