多言語サイトを作ったのに、狙った国の検索結果に出てこない。日本語で検索したのに英語版が表示される。こうした問題の多くは hreflang の設定が原因です。
この記事では hreflang の役割とSEO上の重要性、3つの実装方法、そして実際に自社サイトで見つかった誤実装とその修正内容までを解説します。
hreflangタグとは何か
hreflangタグとは、HTMLの link 要素で使用される属性で、あるページの対象言語や地域を検索エンジンに伝えるためのものです。同一または類似の内容を異なる言語や地域向けに用意している場合、それぞれのページにこのタグを指定することで、検索エンジンがユーザーの言語や地域に適したページを検索結果に表示できるようになります。
Appleの公式サイトで、米国のユーザーには米国版が、スペインのユーザーにはスペイン語版が表示されるのは、hreflangの設定によるものです。
検索エンジンはhreflangを手がかりに、あるページの他言語版・他地域版を理解します。GoogleとYandexはこのタグを重視して配信に活用しており、Bingも重要度はやや低いものの公式に実装を推奨しています。
設定しない場合、検索エンジンは各言語版の関連性を正しく把握できず、ユーザーの地域にそぐわない言語のページが検索結果に出る恐れがあります。望まない言語のページを開いた訪問者はすぐ離脱するため、直帰率が上がり体験を損ないます。さらに、同じ内容のページが複数あると重複コンテンツと見なされるリスクもあります。
SEOにおける重要性
重複コンテンツの回避
言語違いとはいえ内容がほぼ同一のページが複数ある場合、hreflangがないとGoogleはそれらを重複コンテンツとみなし、どれか一つのURLだけをインデックスして他を除外してしまう可能性があります。
正しい言語・地域ターゲティング
日本語の検索クエリに対して英語ページが表示されたり、イギリスのユーザーに米国向けページが表示されたりすると不便です。hreflangを実装しておけば、Googleは各言語版の対応関係を理解し、ユーザーの地域と言語に合致したページを表示しようとします。
検索結果への影響
ユーザーが自分の言語で書かれたページに誘導されれば、内容を理解しやすく満足度が上がるため、離脱せずサイトに留まる傾向が高まります。直帰率の低下や閲覧時間の伸びといったエンゲージメントの改善は、検索順位にも良い影響を及ぼすと考えられています。
3つの実装方法
hreflangの指定方法は主に3つあり、サイトの構成や扱うコンテンツに応じて使い分けます。
HTMLのhead内に記述する
もっとも基本的な方法です。多言語版のそれぞれのページに、他の言語版へのリンクを追加します。
<link rel="alternate" hreflang="en-us" href="https://website.com/en" />
<link rel="alternate" hreflang="es-es" href="https://website.com/es" />rel="alternate" は指定したURLが代替ページであることを示し、hreflang には言語（と地域）をISOコードで指定します。各ページには自分自身と他の言語版すべてを網羅するリンクを入れる必要があります。
いずれの言語にも当てはまらないユーザー向けに、hreflang="x-default" を指定したリンクを含めることも推奨されます。
実装が直感的でCMSプラグインも対応しやすい一方、言語数が増えるほどHTMLの記述量が増え、DOMが肥大化します。
HTTPヘッダーを使う
PDFや画像などHTML内にタグを埋め込めないコンテンツには、HTTPレスポンスヘッダーのLinkヘッダーで指定します。
Link: <https://example.com/report-en.pdf>; rel="alternate"; hreflang="en",
<https://example.com/report-ja.pdf>; rel="alternate"; hreflang="ja"カンマ区切りで複数指定でき、非HTMLコンテンツでも対応関係を伝えられます。ただし言語バリエーションが多いとヘッダーが長くなりすぎるため、大規模サイトでは次のサイトマップ方式も検討してください。
XMLサイトマップで指定する
多数のページを一括管理したい場合や、HTML内にコードを増やしたくない場合の方法です。
<url>
<loc>https://example.com/en/</loc>
<xhtml:link rel="alternate" hreflang="en" href="https://example.com/en/" />
<xhtml:link rel="alternate" hreflang="es" href="https://example.com/es/" />
</url>各ページ自身も含めて記載する点に注意してください。言語バージョンが非常に多いサイトでも効率的に実装できますが、記述量自体は増えるため自動生成ツールの活用が現実的です。
よくある実装ミス
- 自己参照を忘れている：各ページには自身を指すhreflangリンクも必ず含める必要があります
- 相互参照（リターンタグ）の不足：ページAからBへ設定したら、B側からもAへ設定しなければなりません
- 言語コード・地域コードの誤り：言語はISO 639-1の2文字、地域はISO 3166-1の2文字で正確に記述します
- URLの指定ミス：相対パスではなく絶対パス（フルURL）を使う必要があります
- canonicalとの不整合：すべての言語ページが単一ページをcanonical先にしていると、検索エンジンはそのページだけをインデックスし、他言語版を表示しなくなります
自社サイトで実際に起きていた誤実装
ここまでは一般論ですが、こうしたミスは実際に起こります。当社の ai-translate.com 自身が、つい先日まで誤った実装をしていました。
問題は3つありました。
第一に、すべてのページが英語版・フランス語版の「ルートURL」を指していました。記事ページからも料金ページからも、alternate の href が一律で
https://en.ai-translate.com になっていたのです。ページ単位の対応が取れていないため、検索エンジンから見れば意味をなさない指定でした。第二に、日本語版の自己参照がありませんでした。上に挙げた「自己参照を忘れている」を、解説している当人がやっていたわけです。
第三に、x-default も指定していませんでした。
さらに悪いことに、この時点でサイトには canonical タグ自体が1つも出力されていませんでした。hreflang と canonical は組み合わせて機能するため、片方が欠けている状態では効果が期待できません。
どう直したか
修正は、メタ情報の生成を1か所の関数に集約するところから始めました。それまでは共通コンポーネントの中に直接書かれていて、テストもできない状態でした。
現在は、各ページのパスを受け取って以下を返す純粋関数になっています。
- 日本語版の自己参照（そのページ自身の絶対URL）
- 英語版・フランス語版の同一パス（ルートではなくページ単位）
- x-default（日本語版と同じURL）
あわせて自己参照canonicalも全ページに出力するようにしました。動的ルートでパスが未解決の場合は canonical も alternate も出力しない、という分岐も入れています。誤ったcanonicalを出すくらいなら出さないほうが安全だからです。
教訓
この一件から得た教訓は2つあります。
ひとつは、hreflangは「設定してあるか」ではなく「ページ単位で正しいか」を見なければ意味がないことです。当社のサイトにはalternateタグが確かに出力されていました。ソースを見れば「hreflang対応済み」に見えます。しかし中身はルートURL固定で、対応関係を一切表していませんでした。
もうひとつは、メタ情報の生成をテストできる形にしておくことです。共通コンポーネントに直接書かれていると、誰も検証しないまま何年も間違ったまま動き続けます。純粋関数に切り出しておけば、「x-defaultが出ているか」「自己参照が入っているか」を自動テストで固定できます。
多言語サイトを運用しているなら、一度ご自身のサイトのソースを開いて、記事ページの alternate が本当にその記事の他言語版を指しているか確認してみてください。ルートURLになっていないでしょうか。
