많은 사이트에서 사용자의 언어나 지역에 따라 다른 버전의 페이지를 제공합니다. hreflang 링크는 각 언어나 지역에 맞는 올바른 버전을 표시할 수 있도록 검색엔진에 페이지의 모든 버전의 URL을 알려줍니다.
Lighthouse hreflang 감사 실패 방법
Lighthouse는 잘못된 hreflang 링크를 신고합니다.
Lighthouse는 페이지의 head 및 응답 헤더에서 hreflang 링크를 확인합니다.
그러면 Lighthouse가 hreflang 링크 내에서 유효한 언어 코드를 확인합니다.
Lighthouse는 잘못된 언어 코드가 포함된 모든 hreflang 링크를 보고합니다.
Lighthouse는 지역 코드나 사이트맵을 확인하지 않습니다.
페이지의 각 버전에 hreflang 링크를 정의하는 방법
페이지의 세 가지 버전이 있다고 가정해 보겠습니다.
https://example.com의 영어 버전https://es.example.com의 스페인어 버전- 독일어 버전(
https://de.example.com)
검색엔진에 이러한 페이지가 동일함을 알리는 방법에는 세 가지가 있습니다. 현재 상황에 가장 쉬운 방법을 선택하세요.
옵션 1: 각 페이지의 <head>에 hreflang 링크를 추가합니다.
<link rel="alternate" hreflang="en" href="https://example.com" />
<link rel="alternate" hreflang="es" href="https://es.example.com" />
<link rel="alternate" hreflang="de" href="https://de.example.com" />
페이지의 각 버전은 자체 버전을 포함하여 다른 모든 버전으로 연결되어야 합니다. 그러지 않으면 검색엔진이 hreflang 링크를 무시하거나 잘못 해석할 수 있습니다.
사용자가 언어를 선택할 수 있는 페이지에는 x-default 키워드를 사용하세요.
<link rel="alternate" href="https://example.com" hreflang="x-default" />
옵션 2: HTTP 응답에 Link 헤더를 추가합니다.
Link: <https://example.com>; rel="alternate"; hreflang="en", <https://es.example.com>;
rel="alternate"; hreflang="es", <https://de.example.com>; rel="alternate"; hreflang="de"
옵션 3: 사이트맵에 언어 버전 정보를 추가합니다.
<url>
<loc>https://example.com</loc>
<xhtml:link rel="alternate" hreflang="es"
href="https://es.example.com"/>
<xhtml:link rel="alternate" hreflang="de"
href="https://es.example.com"/>
</url>
hreflang 값 가이드라인
hreflang값은 항상 언어 코드를 지정해야 합니다.- 언어 코드는 ISO 639-1 형식을 따라야 합니다.
hreflang값에는 선택사항인 지역 코드도 포함될 수 있습니다. 예를 들어es-mx는 멕시코에 있는 스페인어 사용자를 위한 것이고es-cl는 칠레에 있는 스페인어 사용자를 위한 것입니다.- 지역 코드는 ISO 3166-1 alpha-2 형식을 따라야 합니다.