hreflang
hreflang
概要（サマリー）
hreflang（エイチレフ・ラング）とは、Webページの中に記述するHTMLの属性の1つで、検索エンジン（Googleなど）に対して「このページはどの言語や地域向けに書かれているか」を伝えるための目印である。
たとえば、あなたが日本語版と英語版の2つの同じ製品紹介ページを運営しているとする。このとき、検索エンジンに対して「日本語で検索した人には日本語版を、英語で検索した人には英語版を表示してね」と教えるのが hreflang の役割である。
これを利用することで、検索結果にターゲットと異なる言語のページが誤って表示されるのを防ぎ、ユーザー体験とSEOの向上につながる。
詳細解説
hreflangの記述例と役割
hreflang属性は、主にHTMLの <head> セクション内の <link> タグと一緒に記述される。
以下は、日本語版のページと英語版のページがそれぞれ存在することを検索エンジンに伝える場合のHTML記述例である。
<link rel="alternate" hreflang="ja" href="https://example.com/jp/">
<link rel="alternate" hreflang="en" href="https://example.com/en/">
このタグの役割は以下の通りである。
* rel="alternate": 「このURLの代替版（言語違いのページ）が他にあります」と示す。
* hreflang="言語コード(-地域コード)": 対象の言語（例: ja = 日本語、en = 英語）を指定する。地域を指定することも可能（例: en-US = アメリカ向けの英語、en-GB = イギリス向けの英語）。
* href="...": その言語版の具体的なWebページのURLを指定する。
なぜhreflangが必要なのか？（SEO上のメリット）
多言語サイトを運営している場合、同じ内容を異なる言語に翻訳しただけの複数のページが存在することになる。
このとき、hreflangを設定していないと、検索エンジンがどの言語版をどのユーザーに表示すべきか判断しにくくなることがある。
hreflangを正しく記述しておくことで、検索エンジンは「これらはコピーではなく、多言語向けの正規のバリエーションである」と理解しやすくなり、検索者の所在地や言語設定に合わせて適切なURLを検索結果に表示しやすくなる。
hreflangは検索順位を直接上げるものではない
hreflangは、検索順位を直接上げるためのタグではない。
主な役割は、検索エンジンに「このページには別言語・別地域向けの対応ページがある」と伝え、検索ユーザーに合ったURLを表示しやすくすることである。
そのため、hreflangを設定しただけで順位が上がるわけではないが、多言語サイトで意図しない言語版が検索結果に出る問題を減らし、ユーザー体験を改善しやすくなる。
ターゲットに該当しないユーザー向けの「x-default」
多言語サイトにおいて、どの指定言語（日本語や英語など）にも該当しないグローバルなユーザー（たとえばフランス語でアクセスしたユーザーなど）に対して、デフォルトで表示させたいページを「hreflang="x-default"」として指定できる。
<link rel="alternate" hreflang="x-default" href="https://example.com/">
一般的には、言語選択画面や、最も多くのユーザーが閲覧する英語版のトップページなどが x-default として設定される。
AIコーディングとの関係
AIによるhreflangタグの自動生成
多言語展開するサイト（WordPressやNext.jsなどのフレームワーク）を構築する際、AIに多言語対応の仕組み（i18nなど）を依頼すると、メタタグにhreflangを含めるコードを自動生成してくれる。
ただし、言語コードや地域コードの形式（ISO 639-1の言語コードとISO 3166-1の地域コード）が正しくない場合があるため、AIが出力したコードの言語指定部分が正しい国際規格に沿っているか（例：イギリス英語は en-gb であり、en-uk は誤り）を確認することが大切である。
指示を出す際のポイント
多言語サイトのSEO設定をAIに任せる際は、以下のように指示すると間違いのないタグが生成される。
* 「日本語、英語、およびそれ以外のデフォルトページがあるウェブサイトについて、HTMLのhead内に記述するhreflangタグのリストを作成して」
* 「Next.jsのMetadata APIを使って、多言語対応のhreflangタグを出力するための設定コードを教えて」
よくある勘違い
hreflangはWebページの「翻訳」を自動でしてくれる機能？
hreflangはページを翻訳する機能ではない。
あくまで検索エンジンに対して「すでに用意されている翻訳済みページのURL」を教えるための案内板である。実際のページの翻訳は、事前にあなた自身が手動で翻訳するか、AIや自動翻訳ツールを使ってコンテンツを作成しておく必要がある。
英語ページにだけhreflangを設定すれば十分？
すべての関連する言語ページの間で「双方向」にhreflangタグを記述しなければならない。
日本語ページには「日本語版はこれ、英語版はこれ」と書き、同時に英語ページにも「日本語版はこれ、英語版はこれ」と全く同じ情報を書く必要がある。片方のページだけにしか書かれていない場合、検索エンジンはこれを無効な設定として無視してしまうため注意が必要である。
htmlタグのlang属性（）を設定していればhreflangは不要？
用途が異なるため、多言語・多地域向けの代替ページがある場合は、両方を使い分けるのが基本である。
* <html lang="ja">: ブラウザ、音声読み上げソフト、翻訳ツールなどに対し、「このページに今書かれているテキストが何語か」を伝えるもの。
* hreflang: 検索エンジンに対し、「他のURLに別言語・別地域向けのバージョンがあること」を伝えるSEO用の情報。
まとめ
- hreflangは、多言語展開するサイトで、各ページの対象言語や地域を検索エンジンに通知するHTML属性である。
- 検索者の使用言語や地域に合わせて、検索結果に正しい言語版のページを自動表示する効果がある。
- タグは「双方向」で記述する必要があり、全ての該当ページ間で互いのURLをリンクし合うように記述する。
- どの指定言語にも当てはまらないグローバルなユーザー向けには
x-defaultを設定する。 - AIに多言語サイトを作らせる際は、出力された言語コード・地域コードが正しいか確認する。
情報ソース
より詳しくAIに聞いてみよう
- ISO 639-1と言語/地域指定の正しいルールについて、よく使う言語ペア（日本、アメリカ、イギリス、オーストラリア）のhreflang指定例を教えてください。
- WordPressの多言語化プラグイン（BogoやPolylangなど）を導入した際、hreflangタグは自動で挿入されるのか、それとも手動設定が必要なのか教えてください。
- Google検索セントラルに基づき、hreflangの設定ミスとして「特によくあるバグ」の事例をいくつか教えてください。
- Next.js（App Router）を使って多言語化する場合に、各言語のルートディレクトリ構造とhreflangタグをヘッド部分に挿入するベストプラクティスを教えてください。
- 自分の多言語サイトのURLリストを渡すので、正しく機能するhreflangタグのセットを出力してください。