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

この記事は2015年10月1日に公開されましたが、2019年8月10日に内容をメンテナンスしています。

hreflangタグとは何か

hreflangについては、「ページのローカライズ版についてGoogleに知らせる – Search Console ヘルプ」で以下のように記載されています。

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

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

多言語サイトの機会損失を防ぐ

例えば、東アジアをターゲットとして日本語・中国語・韓国語でコンテンツを提供している多言語サイトを運営しているとします。

韓国語を母国語とするユーザーがGoogleの検索結果から運営している多言語サイトを開いたときに、もし日本語や中国語のページが表示されてしまったら、そこで離脱してしまうかもしれません。多言語サイトであれば言語を切り替える機能が付いていると思いますが、その機能を知らなかったり見つけられなかったりして離脱する可能性も考えられます。

hreflangタグを使って適切な言語のページを表示することは、上記のような機会損失を防ぐことになります。

Googleはlang属性を無視する

言語についてはlang属性で既に定義しているのに、なぜhreflangタグが必要になるのでしょうか。この件については「Google ウェブマスター向け公式ブログ: 多言語ウェブサイトの作成について」に次のような記述があります。

Google では「lang」属性から文書型定義(DTD)まで、コードレベルの言語情報はすべて無視します。一部のサイト制作ソフトでは、これらの属性が自動的に作成されるため、ウェブページの言語を判断する際にこうした情報はあまり信頼できないためです。

だからといって、lang属性をいい加減に設定してもいいということにはなりません。WebアクセシビリティのJIS規格『JIS X 8341-3:2016』や国際基準『WCAG 2.0』には、「達成基準3.1.1:ページの言語」として下記の内容が掲載されています。

それぞれのウェブページのデフォルトの自然言語がどの言語であるか、プログラムによる解釈が可能である。

この達成基準を満たすには、html要素のlang属性に言語コードを明記する必要があります。また、『デザイニングWebアクセシビリティ – アクセシブルな設計やコンテンツ制作のアプローチ』では、lang属性で誤って言語を指定してしまった場合に、次のような事象が起きることを指摘しています。

スクリーンリーダーの中には、言語によって音声合成エンジンを切り替えるものがありますが、言語の指定が誤っていると、日本語の文書なのに流暢な外国語の発音で読み上げてしまう、といったことが起きる可能性があります。

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

多地域、多言語のサイトの管理 – Search Console ヘルプ』に記載されているように、言語ごとに異なるURLを使用する場合は、hreflangアノテーションを使用します。hreflangアノテーションの構文は次の通りです。

  • lang_code
    • ページが対象とする⾔語や地域のコード、またはx-default
  • url_of_page
    • 指定した⾔語や地域向けのページのURL。代替URLは転送プロトコル(httpまたはhttps)も含めて完全修飾形式で指定する必要がある。

インバウンドビジネス入門講座 第3版 訪日外国人観光攻略ガイド』によると、外国人観光客向けのWebサイトでは「英語、韓国語、中国語(簡体字・繁体字)の対応が一般的」なようです。これらの言語コード(lang_codeに該当する部分)は以下の通りです。

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

トップページの場合

⽇本語のサイトに加えて、英語・韓国語・中国語(簡体字)・中国語(繁体字)のサイトが存在する場合、各サイトのトップページの<head>要素に下記のコードを記述します。


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

ここで大切なのは、どの言語のページにおいても同じコードを記述することです。日本語のページだからといって、上記コードの1行目の記述を省略するのは間違いです。

下層ページの場合

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


<link rel="alternate" hreflang="ja" href="https://example.com/sample/">
<link rel="alternate" hreflang="en" href="https://example.com/en/sample/">
<link rel="alternate" hreflang="ko" href="https://example.com/kr/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/">

hreflangアノテーションのチェック方法

手順1:チェックツールを開く

hreflang Tags Testing Tool | TechnicalSEO.comを開きます。

手順2:URLを入力してテストする

[URL]に、チェックするURLを入力します。また、[User Agent]では「Googlebot Smartphone」を選択します。最後に、[TEST URL]をクリックします。

手順3:テスト結果を見る

hreflangで指定した言語ごとにテスト結果が表示されます。左側に黄緑色のチェックアイコンが表示されていれば大丈夫です。

参考

参考URL

参考文献

インバウンドビジネス入門講座 第3版 訪日外国人観光攻略ガイド村山 慶輔, やまとごころ編集部

デザイニングWebアクセシビリティ – アクセシブルな設計やコンテンツ制作のアプローチ太田 良典, 伊原 力也

この記事が役に立ったらシェアしてください

  • Facebookでシェアする
  • Twitterでシェアする
  • はてなブックマークに保存する
  • LINEで送信する

Profile

庄司 諭史
1982年生まれ、三重県出身。マークアップエンジニア。
30歳でWeb業界に転身。Web制作会社に勤務し、組織全体の生産性を上げるための環境づくり、海外のコーダーの育成に携わっている。
  • Facebook
  • Twitter