hreflang 태그의 올바른 구현 글로벌 가시성을 높이는 방법

hreflang 태그의 올바른 구현: 글로벌 가시성을 높이는 방법

Overview

웹사이트가 다양한 언어와 지역에 맞춰 콘텐츠를 제공할 때, 검색 엔진이 올바른 버전을 사용자에게 제공할 수 있도록 도와주는 것이 매우 중요합니다. 이때 hreflang 태그가 중요한 역할을 합니다. hreflang 태그는 특정 페이지의 언어와 지역 정보를 검색 엔진에 알려주어, 사용자가 검색할 때 가장 적합한 버전을 보여줄 수 있게 해줍니다. 이 글에서는 hreflang 태그의 기본 개념부터 설정 방법, 오류 가능성, 그리고 이를 해결하는 방법까지 자세히 설명하겠습니다.

1. hreflang 태그의 기본 개념

hreflang 태그는 HTML 헤더 또는 페이지의 <link> 태그를 통해 구현됩니다. 이 태그는 웹 페이지의 특정 언어와 지역에 대한 정보를 제공하여, 검색 엔진이 그 페이지의 적절한 버전을 식별하도록 돕습니다.

예시

예를 들어, 영어(미국)와 영어(영국)의 두 버전이 있는 웹 페이지가 있다고 가정해봅시다. 이 경우, 다음과 같은 hreflang 태그를 사용할 수 있습니다:

<link rel="alternate" href="https://example.com/en-us/" hreflang="en-US" />
<link rel="alternate" href="https://example.com/en-gb/" hreflang="en-GB" />

여기서 href 속성은 각 버전의 URL을, hreflang 속성은 해당 페이지의 언어 및 지역 코드를 나타냅니다.

2. hreflang 태그의 구조

hreflang 태그의 구조는 간단하지만 주의해야 할 점이 많습니다. 기본적으로 각 버전의 페이지에 대해 모든 언어 및 지역 버전의 태그를 포함해야 합니다. 이는 서로를 참조하는 형태로 구현됩니다.

올바른 예시

<!-- 영어(미국) 버전 -->
<link rel="alternate" href="https://example.com/en-us/" hreflang="en-US" />
<link rel="alternate" href="https://example.com/en-gb/" hreflang="en-GB" />
<link rel="alternate" href="https://example.com/fr-ca/" hreflang="fr-CA" />

<!-- 영어(영국) 버전 -->
<link rel="alternate" href="https://example.com/en-gb/" hreflang="en-GB" />
<link rel="alternate" href="https://example.com/en-us/" hreflang="en-US" />
<link rel="alternate" href="https://example.com/fr-ca/" hreflang="fr-CA" />

<!-- 프랑스어(캐나다) 버전 -->
<link rel="alternate" href="https://example.com/fr-ca/" hreflang="fr-CA" />
<link rel="alternate" href="https://example.com/en-us/" hreflang="en-US" />
<link rel="alternate" href="https://example.com/en-gb/" hreflang="en-GB" />

이와 같이 서로의 URL을 참조하는 hreflang 태그를 설정해야만 검색 엔진이 올바르게 페이지를 인식할 수 있습니다.

3. hreflang 설정 시 유의사항

1. URL의 일관성: 각 지역 및 언어 버전의 URL이 일관되게 관리되어야 합니다. 예를 들어, https://example.com/en-us/와 https://example.com/en-gb/처럼 각 페이지가 정확한 URL로 설정되어야 합니다.

2. 자체 페이지: 각 페이지는 hreflang 태그가 포함되어 있어야 하며, 다른 언어 및 지역의 페이지에 대한 태그도 반드시 포함해야 합니다.

3. XML 사이트맵: hreflang 태그를 XML 사이트맵에 추가하는 것도 좋은 방법입니다. 이를 통해 검색 엔진이 페이지를 더 쉽게 발견할 수 있습니다.

XML 사이트맵 예시

<urlset xmlns="http://www.sitemaps.org/schemas/sitemap-image/1.1">
  <url>
    <loc>https://example.com/en-us/</loc>
    <xhtml:link rel="alternate" hreflang="en-US" href="https://example.com/en-us/" />
    <xhtml:link rel="alternate" hreflang="en-GB" href="https://example.com/en-gb/" />
    <xhtml:link rel="alternate" hreflang="fr-CA" href="https://example.com/fr-ca/" />
  </url>
  <!-- 추가 URL -->
</urlset>

4. 에러 발생 가능성

설정을 잘못하면 검색 엔진이 올바른 페이지를 제공하지 못하게 됩니다. 다음과 같은 에러가 발생할 수 있습니다:

• 'Invalid hreflang value': hreflang 값이 잘못되었을 때 발생합니다. 언어 및 지역 코드는 ISO 639-1 및 ISO 3166-1 Alpha 2 코드를 따라야 합니다.

• 'Missing alternate page': 페이지에 대해 모든 hreflang 태그가 제대로 설정되어 있지 않으면 이 에러가 발생할 수 있습니다.

해결책

• Invalid hreflang value 에러는 언어 및 지역 코드를 다시 확인하여 수정해야 합니다.
• Missing alternate page 에러는 모든 언어 및 지역 버전에 대해 상호 참조가 되어 있는지 점검해야 합니다.

5. 검증 도구

hreflang 태그를 올바르게 설정했는지 확인하려면 Google Search Console의 URL 검사 도구를 사용할 수 있습니다. 이 도구를 통해 특정 페이지에 대한 인덱스 상태와 오류를 확인할 수 있습니다.

6. 결론

hreflang 태그는 글로벌 SEO에서 매우 중요한 요소입니다. 이를 통해 검색 엔진이 사용자의 위치와 언어에 맞는 콘텐츠를 제공할 수 있도록 돕는 것이죠. 올바르게 설정하면 사용자 경험을 향상시킬 뿐만 아니라, 웹사이트의 가시성을 높여 더 많은 트래픽을 유도할 수 있습니다.

참고문서

• Google Search Central - hreflang tags
• Google Search Console - URL Inspection Tool
• W3C Internationalization - Using the hreflang attribute