서로 다른 언어 또는 지역별로 여러 버전의 페이지가 있는 경우 Google에 여러 페이지 버전을 알려주세요.
그렇게 하면 Google 검색에서 언어나 지역별로 가장 적절한 버전의 페이지로 사용자를 연결하는 데 도움이 됩니다.
별도의 조치를 취하지 않아도 Google에서 페이지의 다른 언어 버전을 찾을 수 있지만, 일반적으로는 언어별 또는 지역별 페이지를 명시적으로 지정하는 것이 좋습니다.
다음은 대체 페이지 지정이 권장되는 몇 가지 예입니다.
페이지의 현지화된 버전은 페이지의 주요 콘텐츠가 번역되지 않은 상태인 경우에만 중복으로 간주됩니다.
//example.com/foo 또는 /foo가 아닌 https://example.com/fooen-ie), 캐나다(en-ca), 오스트레일리아(en-au)에 거주하는 영어 사용자를 위한 특정 URL이 있더라도 미국, 영국 및 기타 모든 영어권의 검색 사용자를 위한 일반 영어(en) 페이지를 제공해야 합니다. 이러한 페이지를 특정 페이지 중 하나로 선택할 수도 있습니다..fr로 된 URL의 프랑스어 사이트인 경우 새로운 멕시코(.mx) 및 스페인(.es) 페이지를 인지도가 높은 .fr과 양방향으로 연결하는 것이 새 스페인어 버전 페이지( .mx와 .es)끼리 양방향으로 연결하는 것보다 좋습니다.특히 언어/국가 선택기 또는 자동으로 리디렉션되는 홈페이지의 경우 다른 페이지와 연결되지 않은 언어를 위한 대체 페이지를 추가하는 것이 좋습니다. x-default 값을 사용합니다.<link rel="alternate" href="https://example.com/" hreflang="x-default" />
HTML 태그
페이지 헤더에 <link rel="alternate" hreflang="lang_code"... > 요소를 추가하여 페이지의 언어 및 지역 버전을 Google에 모두 알립니다. 이 방법은 사이트맵이 없거나 사이트에 HTTP 응답 헤더를 지정할 수 없는 경우 유용합니다.
각 페이지 버전의 경우 <head> 요소에 일련의 <link> 요소를 포함합니다. 기본 페이지를 포함하여 페이지 버전별로 링크를 하나씩 넣습니다. 링크 집합은 페이지의 모든 버전에서 동일합니다.
다음은 각 link 요소의 구문입니다.
<link rel="alternate" hreflang="lang_code" href="url_of_page" />
| 구문 | |
|---|---|
lang_code | 페이지의 이 버전에서 타겟팅하는 지원되는 언어/지역 코드 또는 페이지의 hreflang 태그에 의해 명시적으로 나열되지 않은 모든 언어에 해당하는 x-default |
url_of_page | 이 페이지의 지정된 언어/지역별 버전의 정규화된 URL |
<link> 태그는 HTML의 제대로 형식이 지정된 <head> 섹션 안에 있어야 합니다. 확실하지 않다면 렌더링된 페이지의 코드를 HTML 검사기에 붙여넣어 링크가 <head> 요소 내에 있는지 확인하세요. 또한 문서 대체 표현을 위해 link 태그를 결합하지 마세요. 예를 들어 hreflang 주석과 코드를 단일 <link> 태그의 media와 같은 다른 속성과 결합하지 마세요.
Example Widgets, Inc는 미국, 영국, 독일의 사용자에게 웹사이트를 제공합니다. 다음 URL에서는 지역적인 변형이 있을 뿐 실제로 동일한 콘텐츠를 제공합니다.
| 지역적인 변형이 있는 URL | |
|---|---|
https://en.example.com/page.html | 일반 영어로 된 홈페이지이며 미국에서 발송되는 해외 배송 요금의 정보가 포함되어 있습니다. |
https://en-gb.example.com/page.html | 영국 파운드로 가격을 표시하는 영국 홈페이지입니다. |
https://en-us.example.com/page.html | 미국 달러로 가격을 표시하는 미국 홈페이지입니다. |
https://de.example.com/page.html | 독일어 홈페이지입니다. |
https://www.example.com/ | 특정 언어/지역을 타겟팅하지 않는 기본 페이지로서 선택기를 통해 사용자가 언어/지역을 선택할 수 있습니다. |
Google에서는 페이지의 타겟층을 결정하는 데 이러한 URL의 언어별 하위 도메인(en, en-gb, en-us, de)을 사용하지 않으므로, 타겟 대상을 명시적으로 매핑해야 합니다.
다음은 지역적인 변형이 있는 URL 테이블에 나열된 모든 페이지의 <head> 섹션에 있을 수 있는 HTML입니다. 이렇게 하면 미국, 영국, 일반 영어 사용자 및 독일어 사용자는 현지화된 페이지로 연결되며 기타 모든 사용자는 일반 홈페이지로 연결됩니다. Google 검색에서는 사용자의 브라우저 설정에 따라 사용자에게 적절한 결과를 표시합니다.
HTTP redirect
해결법으로 가장 먼저 떠오른 방법은 접속한 사용자의 user-agent 값을 기반으로 모바일/데스크탑 사용자를 구분해 모바일 사용자는 모바일 사이트로, 데스크탑 사용자는 데스크탑 사이트로 HTTP redirect 시키는 것이었다.
하지만, 이 방법은 도메인이 다른 두 사이트 간 쿠키 공유는 불가능하다는 문제가 있었다. 가령 데스크탑 사이트에 로그인 된 상태로 모바일 기기에서 데스크탑 사이트에 접근하면 모바일 사이트에서는 쿠키로 저장된 토큰이 존재하지 않아 로그인이 풀리고, 이로 인해 접근 불가능한 경우가 생길 수 있다.
그런 사유로 다른 방법을 찾아보기로 했다.
rel="canonical"과 rel="alternate"
그 다음 찾은 방법이 바로 rel="canonical"과 rel="alternate"를 이용하는 것이었다.
rel="canonical"
rel="canonical"은 표준 페이지를 설정하는 역할을 한다. 표준 페이지란 같은 내용을 표기하는 다수의 URL이 존재할 때 대표되는 URL을 뜻한다. 다음과 같은 블로그 URL이 있다고 가정해보자.
https://blog.com/articles/title-of-article
https://blog.com/articles/title-of-article?page=1
https://blog.com/aritlces?id=1
https://blog.com?type=article&id=1
위 4개의 URL은 모두 같은 내용을 의미하지만 서로 다른 URL을 가지고 있다. 이 때, 해당 페이지에 다음 태그를 추가해 표준 페이지를 설정할 수 있다.
<!-- https://blog.com/articles/title-of-article을 표준 페이지로 지정 -->
<link rel="canonical" href="https://blog.com/articles/title-of-article" />
표준 페이지를 설정했을 때 얻는 장점은 검색엔진이 중복되는 URL에 접근했을 때, 표준 페이지를 선택해서 크롤링 한다. 때문에 표준 페이지로 지정된 URL이 검색 결과에 노출될 확률이 높아진다.
rel="alternate"rel="canonical"가 표준 페이지를 정의한다면, rel="alternate"는 다국어로 정의된 페이지/보조 페이지를 정의한다. 다국어 처리가 된 웹사이트가 존재한다고 가정해보자.
각각의 언어는 대략 다음과 같은 형태의 URL을 가질 것이다.
https://blog.com/ <-- 한국어(기본)
https://blog.com/en
https://blog.com/de
이 때 각 페이지의 header 태그에 다음과 같이 rel="alternate" 태그를 추가할 수 있다. 이렇게 하면 각 언어 별 페이지를 설정해 두면 검색엔진은 사용자의 언어와 일치하는 페이지를 검색 결과에 노출시켜준다.
<link rel="alternate" hreflang="ko" href="https://blog.com/" />
<link rel="alternate" hreflang="en" href="https://blog.com/en" />
<link rel="alternate" hreflang="de" href="https://blog.com/de" />
위에서 설명한 rel="canonical"과 rel="alternate"를 이용하면 데스크톱과 모바일 사이트를 분리해낼 수 있다. 사실 rel="alternate"에는 추가로 설정할 수 있는 값이 있는데, 바로 media 속성이다. media 속성은 CSS의 media query와 동일한 값을 입력할 수 있다.
<link rel="alternate" href="https://blog.com/" media="only screen and (max-width: 640px" />
검색엔진은 media 속성의 조건을 만족할 경우 보조 페이지를 결과에 노출시킨다. 때문에 데스크톱 페이지에는 rel="alternate"와 media 속성을 이용해 모바일 페이지의 URL을 기록하고, 모바일 페이지에서는 rel="canonical"을 이용해 데스크탑 페이지의 URL과 연결시켜주면 된다.
<!-- 데스크탑 페이지 -->
<link rel="alternate" href="https://m.blog.com/" media="only screen and (max-width: 640px" />
<!-- 모바일 페이지 -->
<link rel="canonical" href="https://blog.com" />