多言語サイトを作ったのに「英語で検索しても日本語ページしかヒットしない」という経験はありませんか？その原因の多くは hreflangタグの未設定・誤設定 にあります。
この記事では、hreflangタグの仕組みから正しい設定方法、よくあるミスまでを体系的に解説します。
hreflangタグとは
hreflangタグは、Googleなどの検索エンジンに対して「このページには別の言語バージョンがある」ことを伝えるHTMLタグです。
<link rel="alternate" hreflang="en" href="https://example.com/en/about" />
<link rel="alternate" hreflang="ja" href="https://example.com/about" />
このタグがあることで、検索エンジンは：
- 英語で検索したユーザーには英語ページを表示
- 日本語で検索したユーザーには日本語ページを表示
という適切な出し分けができるようになります。
hreflangタグが必要な理由
1. 正しい言語のページが検索結果に表示される
hreflangタグがないと、Googleは言語の異なるページを「重複コンテンツ」と判断し、一方のページしかインデックスしない可能性があります。
2. ユーザー体験の向上
フランス語話者がフランス語ページに、韓国語話者が韓国語ページに直接たどり着けるため、離脱率が下がりコンバージョン率が上がります。
3. 各言語ページのSEO効果が最大化
各言語のページが独立した検索結果として表示されるため、対象国・言語ごとの検索トラフィックを獲得できます。
hreflangタグの正しい書き方
基本構文
<link rel="alternate" hreflang="言語コード" href="ページのURL" />
言語コードの形式
ISO 639-1の2文字コードを使用します。地域を指定する場合はISO 3166-1のアルファ2コードを追加します。
| 言語 | コード | 地域指定の例 |
|---|---|---|
| 日本語 | ja | - |
| 英語 | en | en-US, en-GB |
| 韓国語 | ko | - |
| 中国語（簡体） | zh-Hans | zh-CN |
| 中国語（繁体） | zh-Hant | zh-TW |
| フランス語 | fr | fr-FR, fr-CA |
| スペイン語 | es | es-ES, es-MX |
完全な実装例
日本語・英語・韓国語の3言語サイトの場合、各言語のページすべてに 以下のタグセットを記載します。
<!-- 日本語ページ (https://example.com/about) -->
<link rel="alternate" hreflang="ja" href="https://example.com/about" />
<link rel="alternate" hreflang="en" href="https://example.com/en/about" />
<link rel="alternate" hreflang="ko" href="https://example.com/ko/about" />
<link rel="alternate" hreflang="x-default" href="https://example.com/about" />
x-defaultの役割
x-default
は「どの言語にもマッチしなかった場合のデフォルトページ」を指定します。通常は日本語ページまたは英語ページを指定します。
なお、hreflangタグの効果を最大化するには、URL構造の設計も重要です。詳しくは多言語サイトのURL設計ガイドを参照してください。
hreflangタグの3つの実装方法
方法1: HTMLの<head>内に記述
最も一般的な方法です。各ページの<head>セクションに<link>タグを追加します。
メリット: 実装がシンプル デメリット: 言語×ページ数が多いとHTMLが肥大化
方法2: HTTPヘッダーで指定
PDFなどHTML以外のファイルに対して有効な方法です。
Link: <https://example.com/en/doc.pdf>; rel="alternate"; hreflang="en",
<https://example.com/ja/doc.pdf>; rel="alternate"; hreflang="ja"
方法3: XMLサイトマップで指定
大規模サイトに適した方法です。サイトマップにxhtml:link要素を追加します。
<url>
<loc>https://example.com/about</loc>
<xhtml:link rel="alternate" hreflang="ja" href="https://example.com/about" />
<xhtml:link rel="alternate" hreflang="en" href="https://example.com/en/about" />
</url>
よくある間違い5つ
間違い1: 双方向のリンクがない
hreflangタグは 双方向 でなければ無効です。日本語ページが英語ページを指すなら、英語ページも日本語ページを指す必要があります。
間違い2: 自己参照がない
各ページは 自分自身への hreflang も含める必要があります。日本語ページには
hreflang="ja" で自分自身のURLを含めてください。
間違い3: canonicalタグとの矛盾
canonicalタグが全言語で同じURLを指していると、hreflangが無視されます。各言語ページのcanonicalは自分自身のURLを指す必要があります。
間違い4: 言語コードの誤り
jpは間違い → 正しくはja-
zhだけでは簡体・繁体の区別がつかない →zh-Hansまたはzh-Hantを使う
間違い5: URLの不一致
hreflangタグのURLとcanonicalタグのURL、実際のページURLが一致していないケースです。プロトコル（http/https）やwwwの有無も含めて完全一致が必要です。
hreflangタグの設定を自動化する
手動でhreflangタグを管理するのは、ページ数が増えるにつれて非現実的になります。
CMSプラグインで自動化
WPMLやPolylangなどのWordPressプラグインは、hreflangタグを自動生成します。ただし、正しく設定されているかの確認は必要です。
翻訳サービスのSEOエクスポート機能
blaidのStarter以上のプランでは、hreflangタグの自動生成とSEOエクスポート機能を提供しています。翻訳と同時にSEO対応が完了するため、設定ミスのリスクを大幅に減らせます。
hreflangタグの確認方法
設定後は以下の方法で正しく動作しているか確認しましょう。
- Google Search Console — 「インターナショナルターゲティング」レポートでhreflangエラーを確認
- ページのソースを確認 — 各言語ページに双方向のhreflangタグがあるか目視確認
- 検索結果を確認 — 実際に英語で検索して英語ページが表示されるかテスト
まとめ
hreflangタグは多言語SEOの基盤です。正しく設定すれば、各言語の検索結果に適切なページが表示され、海外からの検索流入を最大化できます。
手動設定は間違いが起きやすいため、CMSプラグインや翻訳サービスの自動生成機能を活用するのがおすすめです。blaidではSEOエクスポート機能でhreflangタグを自動生成できるので、設定ミスを防ぎながら多言語SEOに対応できます。