Hreflang 적용 방법: HTML vs. XML Sitemap

글로벌 시장을 대상으로 한 웹사이트의 경우, 각 국가별 웹사이트가 존재합니다. 애플, 나이키와 같이 여러분이 좋아하시는 글로벌 브랜드 웹사이트가 미국, 영국, 한국, 일본 등 여러 국가 사이트로 존재하는 상황을 떠올리시면 될 것 같네요.

영국에서 브랜드 명을 검색하면 영국 사이트가 구글 검색결과에 떠야 하고, 한국에서 브랜드명을 검색하면 한국 사이트가 구글 검색 결과에 뜨길 기대하게 됩니다.

이렇게 각 국가에서 해당 국가의 웹페이지가 정확하게 노출될 수 있도록 구글에 알려주는 방식으로서 사용하는 것이 Hreflang 태그입니다.

해당 포스트에서는 hreflang 태그를 사이트에 적용하는 방식과 예시에 대해 간략히 알아보도록 하겠습니다.

hreflang의 역할

hreflang을 사용함으로서 구글에게 하나의 컨텐츠(페이지)의 또다른 버전의 페이지들을 알려줄 수 있고, 그 페이지들이 동일한 컨텐츠에 대해 현지화된 버전의 페이지임을 이해시킬 수 있습니다.

헷갈리지 말아야 할 것은 구글은 페이지의 언어를 감지하기 위해 hreflang이나 HTML lang 속성을 사용하지 않는 다는 점입니다. 구글은 페이지 언어를 감지하기 위해 알고리즘을 사용합니다.

hreflang 태그 구성 이해

hreflang은 다음과 같은 구조로 구성됩니다.

<link rel=”alternate” href=”url_of_page” hreflang=”lang_code” />
  • link rel=”alternate”: 이 페이지는 대체 버전이라는 의미를 나타냅니다.
  • href=”url_of_page”: 대체 페이지의 위치(링크) 입니다.
  • hreflang=”lang_code”: 어떤 언어로 대체하고 있는지를 의미합니다.

Hreflang이 지원하는 언어 코드는 ISO 639-1, 국가와 지역 코드로는 ISO 3166-1 alpha-2입니다. 언어코드를 하나만 사용할 수도 있고, 언어-지역코드를 함께 사용할 수도 있습니다.

Hreflang 적용 방법

Hreflang으로 구글에 여러 언어/지역 버전을 명시하는 방법은 3가지 입니다.

  • HTML
  • HTTP 헤더
  • XML 사이트맵

이 중에서도 해당 글에서는 HTML 코드와 사이트맵으로 Hreflang을 명시하는 방법에 대해 안내하도록 하겠습니다.

HTML

페이지의 <head> 부분에 hreflang 속성을 추가하는 방법 입니다.

모든 버전의 페이지의 <head> 안에 <link>를 포함시키는 방식인데요, 자기자신을 포함한 다른 모든 버전의 페이지 링크를 이 <link> 요소로 포함시켜야 합니다. 이 링크 세트는 모든 버전의 페이지들에서도 동일하게 작성되어져야 합니다.

hreflang 속성을 HTML 코드에 명시한 사례 중 하나는 애플입니다.

hreflang을 HTML에 적용시킨 사례
hreflang을 HTML에 적용시킨 사례

XML Sitemap

XML sitemap은 검색엔진에게 사이트의 페이지들에 대한 정보를 제공하는 파일로서 구글에 모든 언어와 지역 페이지들을 알려주기에 가장 좋은 방법이 될 수 있습니다.

XML 사이트맵을 사용하여 hreflang을 사용하는 방법은 다음과 같습니다.

  • 각 URL에 별도의 <url> 요소를 만듭니다.
  • 각 <url>요소는 페이지 URL을 나타내는 <loc> 하위 요소를 포함해야 합니다.
  • 자기자신의 페이지를 포함해 모든 대체 버전을 나열하는 하위 요소 <xhtml:link rel=”alternate” hreflang=”supported_language-code”>를 나열합니다.
  • 3가지 버전의 웹사이트가 있을 때, 각 버전에 대한 3가지 sitemap이 있게되고, 이 3가지 sitemap은 동일한 hreflang 리스트를 가지고 있어야 합니다.

구글을 hreflang 속성을 XML 사이트맵에 명시한 대표적인 사례로 볼 수 있습니다.

hreflang을 XML Sitemap에 적용시킨 사례
hreflang을 XML Sitemap에 적용시킨 사례

HTML vs. XML Sitemap 비교

구글이 안내하는 3가지 방식(HTML, HTTP 헤더, 사이트맵) 중 어떤 방식이 서로 다른 지역에서 현지화된 버전의 페이지가 정확하게 노출 될 수 있는 방식인지는 사실 알 수 없습니다. 즉, 캐나다에서 검색하면 캐나다사이트가 노출되어야 하는데, 주변국가인 미국사이트가 뜨는 경우를 방지하기 위해 HTML 방식이 좋은가, XML Sitemap 방식이 좋은가에 대한 정답은 알 수 없습니다.

다만 Page Load 속드(Page Experience)는 구글의 주요한 랭킹 시그널 중 하나인 상황에서 페이지 코드 내 hreflang 태그는 HTML의 사이즈와 페이지 로드 속도를 느리게 할 수 있기에 hreflang을 XML Sitemap에 적용하는 것이 더 나을 수 있다는 의견이 존재한다는 점 정도를 공유드릴 수 있을 것 같습니다.

참고 (1): https://support.google.com/webmasters/thread/117866290/hreflang-sitemap-vs-hreflang-tag-which-one-is-better?hl=en

참고 (2): https://developers.google.com/search/docs/advanced/crawling/localized-versions

참고 (3): https://www.semrush.com/blog/hreflang-attribute-101/

스키마 작성을 도와주는 사이트

스키마 작성을 도와주는 사이트

스키마 마크업은 웹사이트 콘텐츠를 검색엔진에 더 명확하게 전달하여 사용자 참여를 유도하는 데 중요한 역할을 합니다. 하지만, 다양한 스키마 유형과 복잡한 코드 때문에 작성이 쉽지 않습니다. 스키마 작성부터 테스트까지 활용하기 좋은 사이트를 소개합니다.

Merkle Schema Generator

Merkle SEO tools

Merkle Schema Markup Generator는 다양한 기능과 장점을 제공하는 무료 스키마 생성 도구입니다. 스키마 생성 외에도 웹사이트 최적화를 위한 다양한 기능과 장점을 제공합니다. 초보자라도 쉽게 사용할 수 있도록 설계되어 있어 SEO에 처음 접하는 사용자에게 적합합니다.

Merkle Schema Generator 특징

Merkle Schema Generator
  • robots.txt 테스트, sitemap 생성, Hreflang 테스트 등 다양한 기능을 이용할 수 있습니다.
  • JSON-LD 형식의 코드만 생성합니다.
  • 스키마 유형별로 필요한 정보를 명확하게 제시합니다.
  • 용어 설명과 예시 코드를 제공하여 이해를 돕습니다.
  • 코드 복사 및 다운로드 기능을 제공합니다. 여러 스키마를 한 번에 생성할 수 있는 기능을 제공합니다.

WebCode Schema Generator

WebCode tools

WebCode Schema Generator는 다양한 스키마 유형을 지원하는 무료 온라인 스키마 생성 도구입니다. 초보자라도 쉽게 사용할 수 있도록 직관적인 인터페이스와 단계별 안내를 제공하며, 다음과 같은 특징을 가지고 있습니다.

WebCode Schema Generator 특징

WebCode Schema Generator
  • 직관적인 인터페이스와 단계별 안내를 통해 초보자도 쉽게 스키마를 생성할 수 있습니다.
  • 각 스키마 유형별로 필요한 정보를 명확하게 제시하여 입력 과정을 간편하게 합니다.
  • 용어 설명과 예시 코드를 제공하여 이해를 돕습니다.

JSON-LD Schema Generator

JSON-LD Schema Generator

JSON-LD Schema Generator는 다양한 기능과 장점을 제공하는 무료 스키마 생성 도구입니다. 특히, 초보자라도 쉽게 사용할 수 있도록 설계되어 있어 스키마 마크업에 처음 접하는 사용자에게 적합합니다.

JSON-LD Schema Generator 특징

  • 스키마 유형별로 필요한 정보를 명확하게 제시합니다.
  • 용어 설명과 예시 코드를 제공하여 이해를 돕습니다.
  • 코드 복사 및 다운로드 기능을 제공합니다.
  • 여러 스키마를 한 번에 생성할 수 있는 기능을 제공합니다.

스키마 테스트 사이트

Schema.org

schema.org 스키마 테스트

Schema.org는 은 웹사이트에 적용된 스키마 마크업의 유효성을 검증하는 무료 온라인 도구입니다. 웹사이트 소유자가 스키마 마크업 오류를 식별하고 수정하여 검색엔진에서 웹사이트가 더 잘 이해되도록 돕는 데 중점을 둡니다.

Schema.org 테스트 주요 기능

  • 스키마 마크업 유효성 검증: 웹사이트 URL을 입력하거나 코드를 직접 붙여넣어 스키마 마크업의 유효성을 검증합니다.
  • 오류 및 경고 표시: 검증 과정에서 발견된 오류 및 경고를 자세하게 표시합니다.
  • 오류 수정 가이드 제공: 각 오류 및 경고에 대한 수정 방법을 안내하는 가이드를 제공합니다.
  • JSON-LD, RDFa, Microdata 지원: 다양한 스키마 마크업 형식을 지원합니다.

구글 리치 검색결과 테스트

구글 리치 검색결과 테스트

구글 리치 검색결과 테스트는 웹사이트가 Google 검색결과에서 어떻게 표시될지 미리 확인할 수 있도록 도와주는 무료 도구입니다. 웹페이지의 URL을 입력하거나 코드를 직접 붙여넣어 구조화된 데이터가 올바르게 구현되었는지, 검색엔진에서 어떤 리치 결과로 표시될지 확인할 수 있습니다.

구글 리치 검색결과 테스트 주요 기능

  • 구조화된 데이터 유효성 검증: 웹페이지의 구조화된 데이터가 Google의 가이드라인을 준수하는지 검증합니다.
  • 리치 결과 미리보기: 웹페이지가 검색 결과에서 어떤 리치 결과로 표시될지 미리 확인할 수 있습니다.
  • 오류 및 경고 표시: 구조화된 데이터 코드에서 발견된 오류 및 경고를 표시합니다.
  • 다양한 형식 지원: JSON-LD, RDFa, Microdata 등 다양한 구조화된 데이터 형식을 지원합니다.

스키마 작성 시 주의 사항

스키마 작성 시 다음 사항을 주의하며 작성하고 관리해야 합니다.

1. 정확성:

  • 오류 없는 코드 작성 & 테스트 (구글 도구 활용)
  • 신뢰성 있는 도구 사용 & 직접 작성 시 주의

2. 적절성:

  • 콘텐츠와 맞는 스키마 유형 선택
  • 정확하고 최신 정보 입력
  • 디자인 영향 최소화

3. 지침 준수:

  • 구글 가이드라인 준수(구글 정책 위반 방지)
  • 각 유형별 지침 확인 & 코드 작성

4. 테스트 및 모니터링:

  • 검색엔진 인식 확인 (테스트 도구 활용)
  • 콘솔 활용: 오류 & 경고 확인 및 조치
  • 분석 도구 활용: 영향 분석

5. 업데이트:

  • 콘텐츠 변경 시 코드 업데이트
  • 최신 지침 & 정책 반영
  • 정기적 테스트 & 오류 확인

스키마 마크업은 웹사이트 콘텐츠를 검색엔진에 더 명확하게 전달하는 데 도움이 됩니다. 스키마 마크업 작성에는 다양한 도구와 리소스를 활용할 수 있습니다. 구글의 가이드를 기반으로 다양한 사이트를 활용하여 스키마 작성에 도움이 되길 바랍니다.