다국어 SEO (7) hreflang 태그 설치 방법

지금까지 hreflang 태그와 4가지 필수 링크, 표준링크(canonical link) , 자기링크(self link), 반환링크(return link), X-디폴트 링크(x-default link)를 알아보았다. 이제 실제로 사이트에 설치하는 방법에 대해 다뤄보겠다.

■ HTML <head>

가장 기본적인 설치 방법은 각 페이지의 메타태그 정보에 추가하는 법이다. HTML <head> 사이에 hreflang 태그를 심는 것인데, 사이트가 워드프레스라면 글로벌 사이트 운영에 도움을 주는 polylang이나 WPML 같은 플러그인을 사용하면, 번역과 hreflang 태그 설치 모두 간편하게 진행할 수 있다. 위 플러그인이 좀 무겁다고 생각되면, hreflang tags lite라는 플러그인을 설치해서 진행해도 좋다.

독립적인 사이트라면 개별 페이지 메타 정보에 적절하게 hreflang 태그를 삽입하면 된다. 개발자에게 요청할수도 있고, 구글 태그 매니저(Google Tag Manager, GTM)를 사용한다면 마케터도 충분히 혼자서 삽입할 수 있다. 관련하여 상세 포스트는 다른 글에서 다뤄보도록 하겠다.

한국어, 영어 페이지만을 운영할 때, 한국어 페이지에 심을 예시 태그의 모습은 다음과 같다. (x-디폴트 사이트는 영어로 한다.) <– 이 용어가 낯설다면, 지난 글을 다시 숙지하고 오세요!

메타 정보에 다국어 관련 정보를 삽입하는 방법의 장점은 쉽게 구현이 가능하다는 점이다. 또한, 유지보수가 간편하다. 확인하고자 하는 페이지에서 F12를 눌러 개발자 모드의 창에서 <head>와 </head> 사이에 태그가 잘 삽입되었는지, 빠진 링크는 없는지 확인하기 간편하다.

단점은 한 페이지 한 페이지가 무거워질 수 있다는 점이 있다. 예를 들어 운영하는 언어가 30개 이상으로 많다면, 한 페이지에 그만큼 많은 링크의 로딩이 필요해지고, 속도에 영향을 줄 수 있다.

■ XML 사이트맵(sitemap)

두 번째 방법은 XML 사이트맵을 사용한 설치방법이다. XML 사이트맵은 쉽게 말하면, 한 사이트에 연결된 모든 URL들은 표시한 목록이라고 보면 된다. 링크가 많지 않은 작은 사이트라면, XML 사이트맵을 자동으로 생성해주는 사이트가 많으니 참고하면 되겠다(그것도 무료로!) . 워드프레스 사용자라면 ALL in One SEO나 YOAST SEO와 같은 플러그인을 사용하면 된다.

이렇게 만들어진 XML 사이트맵 파일을 열어 다국어 정보를 추가하고 싶은 URL 밑에 hreflang 태그를 심으면 된다.

메타 정보에 넣을 때와 다른 점은, 표준링크(canonical link)가 없고, hreflang과 href 순서가 뒤바뀌어 있는 등 모양이 조금 다르다. 아래 XML 사이트맵의 예시를 참고하면, 그리 어렵지 않게 구조 파악이 가능할 것이다.

한국어, 영어 페이지만을 운영할 때, 영어 페이지에 심을 예시 태그의 모습은 다음과 같다. (x-디폴트 사이트는 영어로 한다.)

<url>
<loc>https://example.com/en/pants</loc>
<xhtml:link rel=”alternate” hreflang=”en” href=”example.com/en/pants” />
<xhtml:link rel=”alternate” hreflang=”ko” href=”example.com/ko/pants” />
<xhtml:link rel=”alternate” hreflang=”x-default” href=”example.com/en/pants” />
</url>

위 방법을 사용할 경우, 매 페이지마다 메타 정보를 사용하는 대신에 XML 사이트맵에 hreflang을 1번만 만들면 되기 때문에 링크가 많은, 대규모 사이트를 관리할 때 이용하면 좋다. 또한 페이지 용량에도 부담이 없다.

다만 한 번 만들 때 시간이 소요되고, XML 사이트맵이 페이지 외부에 존재하기 때문에 디버깅을 하려면 XML 사이트맵에 따로 접근해야한다는 단점이 있다.

■ HTTP 헤더(Header)

HTTP 헤더를 통해 설치하는 방법도 있다. HTTP 헤더는 HTTP가 요청(request)하고 응답(response)하는 메커니즘을 말한다. 즉, 구글이 사이트를 요청하면, 사이트에서 HTTP 헤더에 담긴 링크를 보내주면서 hreflang 정보도 함께 전송하는 방식이다.

HTTP 헤더의 예시는 다음과 같다. 각 문장은 세미콜론(;)으로 구분되며, 각 hreflang 속성은 콤마(,)로 구분된다. 첫 번째 방법과 hreflang 태그의 순서가 다르고, 표준링크(canonical link)가 없으니 주의하자.

Link: <https://example.com/en/pants/size-info.pdf>; rel=”alternate”; hreflang=”en”,
<https://example.com/ko/pants/size-info.pdf>; rel=”alternate”; hreflang=”ko”

HTTP 헤더는 PDF나 DOC 문서 등 HTML이 아닌 링크에만 한정적으로만 사용한다. SEO 측면에서는 위와 같은 링크를 따로 인덱싱할 이유가 전혀 없기때문에- 기본적으로 위 방법은 사용하지 않도록 하자.

■ 정리

HTML	XML	HTTP
쉬운 설치/관리	페이지 외부에 존재 (페이지 용량에 부담 X)	HTML이 아닌 요소(PDF 등)일 경우 사용 가능
대다수의 경우, HTML 메타 정보로 사용할 것!	대규모 사이트일 경우 사용	웬만하면 사용하지 않는다.

정리하자면, 글로벌 사이트는 HTML 메타 정보에 다국어 정보를 삽입하여 운영하자. 만약 운영하고 있는 언어가 10개 이상 넘어간다면 XML 사이트맵을 사용하는 것을 추천한다.