hreflangの相互参照とx-defaultを図で理解する

「英語ページを作ったのに、海外の知人がGoogleで検索すると日本語のトップページが出てくる」——外国語ページを用意した会社からよく聞く相談です。原因の多くは、検索エンジンに「英語版はこちらです」と伝える目印（hreflang）が無いか、片側にしか書かれていないことです。hreflangは、日本語版と英語版がお互いを指し合って初めて効きます。

hreflangがしていること

検索エンジンは、日本語版と英語版を「別々のページ」として見つけます。中身が同じ会社案内でも、何も伝えなければ、どちらが誰向けなのかは分かりません。hreflangは、各ページの <head> などに次のような一覧を書き、「この内容には言語別の版がこれだけあります」と伝える仕組みです。

<link rel="alternate" hreflang="ja" href="https://example.jp/" />
<link rel="alternate" hreflang="en" href="https://example.jp/en/" />
<link rel="alternate" hreflang="x-default" href="https://example.jp/en/" />

この3行を、日本語版にも英語版にも同じように書きます。自分自身の行も含めます。

相互参照とx-defaultを図で見る

          ┌──────────── 日本語版 https://example.jp/ ────────────┐
          │ hreflang="ja"        → https://example.jp/           │ ← 自分自身
          │ hreflang="en"        → https://example.jp/en/        │ ─┐
          │ hreflang="x-default" → https://example.jp/en/        │  │ お互いを
          └──────────────────────────────────────────────────────┘  │ 指している
          ┌──────────── 英語版 https://example.jp/en/ ───────────┐  │（相互参照）
          │ hreflang="ja"        → https://example.jp/           │ ←┘
          │ hreflang="en"        → https://example.jp/en/        │ ← 自分自身
          │ hreflang="x-default" → https://example.jp/en/        │
          └──────────────────────────────────────────────────────┘

  検索した人の言語        表示されやすい版
  日本語                  → 日本語版
  英語                    → 英語版
  フランス語・タイ語など  → x-default の行き先（この例では英語版）

x-defaultは「どれにも当てはまらない人」の行き先

x-defaultは言語ではなく、「用意したどの言語にも当てはまらない人に見せるページ」の指定です。英語版を1つだけ用意した会社なら、英語版をx-defaultにするのが一般的です。言語を選ぶ入口ページ（「日本語／English」を選ばせるページ）がある場合は、そのページをx-defaultにする方法もあります。

よく見かける書き間違い

• 相互参照になっていない：制作時に英語版テンプレートにだけ追加し、日本語版の共通部分を触っていない
• 言語コードの誤り：イギリス英語を en-UK と書く（国・地域コードは GB なので en-GB）。地域を分けないなら en だけで十分です
• リンク先がトップページだけ：英語の会社案内ページから日本語の会社案内ではなく日本語トップを指している。hreflangは「同じ内容のページ同士」を結びます
• canonicalが日本語版を指している：英語版の rel="canonical" が日本語版になっていると、「英語版は日本語版の重複」と伝えることになり、hreflangと矛盾します。各言語版のcanonicalは自分自身にします
• リダイレクトやエラーになるURLを書いている：hreflangに書くURLは、そのまま表示できる（200で返る）正式なURLにします

自分で確認する方法

1. 英語版のページを開き、ページのソースを表示する（Windowsは Ctrl+U、Macは Command+Option+U）
2. hreflang で検索し、日本語版・英語版・x-defaultの3行（言語が増えればその分）があるか見る
3. 日本語版の同じ内容のページでも同じことをする。片方にしかなければ相互参照になっていません
4. 書かれているURLを1つずつ開き、エラーやリダイレクトにならないか確かめる
5. ターミナルが使える方は、次のコマンドでも確認できます

curl -s https://example.jp/en/ | grep -i hreflang
curl -s https://example.jp/ | grep -i hreflang

hreflangは <head> 以外に、HTTPヘッダーやXMLサイトマップで指定する方法もあります。ソースに見当たらない場合は、制作会社にどの方法で設定しているかを確認してください。

当サービスの診断ではこう判定します

Webサイト診断の多言語・インバウンド対応診断では、選択した言語（未選択なら英語）について、次の基準で採点します。採点基準はすべて公開しています。

選択した言語のページが見つからない場合は、点数の上限を20点とし、結果は「未対応（これからの伸びしろ）」として表示します。hreflangは外国語ページがある場合だけ評価します。

<html lang="ja"> のまま英語ページを作っているサイトも見かけます。hreflangとは別の設定ですが、読み上げソフトやブラウザの自動翻訳が言語を取り違える原因になるため、あわせて直しておくと安心です。

制作会社への依頼文の例

英語ページ（/en/ 以下）について、次の設定をお願いします。
1. 日本語版と英語版の対応するページ同士に、hreflang（ja・en・x-default）を相互に設定する
   - 自分自身の行も含める／x-default は英語版
   - 対応する英語版がないページには hreflang を付けない
2. 英語版の各ページの canonical を、そのページ自身にする
3. 英語版の <html lang> を "en" にする
設定後、日本語版・英語版それぞれ数ページのソースで確認できるよう、対象URLの一覧をいただけますか。

WordPressの多言語プラグインを使っている場合は、hreflangを自動で出力する機能があることが多いので、まず設定画面で有効になっているかを確認してもらうと早く済みます。

次に読む

hreflangは「見つけてもらう」ための設定です。見つけてもらった後に予約や来店につながるかは、ページの中身で決まります。英語ページがあっても予約されないサイトの共通点もあわせてご覧ください。ネットショップの場合は多言語ECで通貨・配送・返品をどう伝えるかが参考になります。

自社サイトの設定が正しいか分からない場合は、無料のご相談で確認します。主要ページの外国語化やhreflangの設定を任せたい場合は、多言語化・インバウンド対応をご覧ください。