hreflangとは何か調べてみました

hreflangとは何か

hreflangについて、Googleのドキュメントには以下のような記載があります。

ページに言語や地域ごとの複数のバージョンがある場合、こうした別バージョンについて Google にお知らせください。それにより、Google 検索はユーザーの言語や地域に応じた最適なページのバージョンを表示できるようになります。

ページのローカライズ版 | Google 検索セントラル | ドキュメント | Google Developers

つまり、hreflangは、多言語サイトを運用している場合に、Googleで検索したユーザーに対して適切な言語のバージョンを表示するために必要となる要素です。

hreflangアノテーションの記述方法

Google検索セントラルに記載されているように、言語ごとに異なるURLを使用する場合は、hreflangアノテーションを使用します。

hreflangアノテーションの構文は以下の通りです。

<link rel="alternate" hreflang="lang_code" href="url_of_page">
lang_code ページのこのバージョンが対象とするサポートされている言語または地域のコード、またはページのhreflangタグで明示されていない任意の言語と一致するx-default
url_of_page 指定された言語 / 地域に対応するこのページのバージョンの完全修飾 URL。

言語または地域のコード

ここでは例として、日本語・英語・韓国語・簡体字中国語・繁体字中国語の5つの言語でコンテンツを提供する多言語サイトを想定します。各言語のlang_codeは下記の通りです。

日本語 ja
英語 en
韓国語 ko
簡体字中国語 zh-Hans
繁体字中国語 zh-Hant

トップページのhreflangアノテーション

各サイトのトップページの<head>要素内に下記のコードを記述します。

<link rel="alternate" hreflang="ja" href="https://example.com/ja/">
<link rel="alternate" hreflang="en" href="https://example.com/en/">
<link rel="alternate" hreflang="ko" href="https://example.com/ko/">
<link rel="alternate" hreflang="zh-Hans" href="https://example.com/sc/">
<link rel="alternate" hreflang="zh-Hant" href="https://example.com/tc/">

多言語サイトのURL構造については、Google検索セントラルに詳細が記載されています。

下層ページのhreflangアノテーション

下層ページでは、ページごとの対応関係に従って記述する必要があります。

<link rel="alternate" hreflang="ja" href="https://example.com/ja/sample/">
<link rel="alternate" hreflang="en" href="https://example.com/en/sample/">
<link rel="alternate" hreflang="ko" href="https://example.com/ko/sample/">
<link rel="alternate" hreflang="zh-Hans" href="https://example.com/cs/sample/">
<link rel="alternate" hreflang="zh-Hant" href="https://example.com/ct/sample/">