HTML a要素のhreflang属性｜言語コードと多言語SEOでの使い方

▶

この記事の要点

hreflang は <a> 要素の属性で、リンク先のページがどの言語で書かれているかを示す
値は ISO 639-1 の言語コード（ja / en など）または 言語-地域 形式（en-US / zh-TW）
<link rel="alternate" hreflang=...> と組み合わせると多言語 SEO で言語別ページを Google に伝えられる
a 要素の hreflang は支援技術向けのヒントで、ブラウザの動作には直接影響しない
地域指定が必要な場合（米英・繁簡）は必ず lang-region 形式で書く

hreflang 属性とは

hreflang は <a> 要素（および <link> / <area>）に付与できる属性で、リンク先のページがどの言語で書かれているかを示します。スクリーンリーダーや検索エンジンが言語切り替えの判断に使うため、多言語サイトでは重要なアクセシビリティ / SEO 属性です。

基本構文

<a href="URL" hreflang="言語コード">テキスト</a>

<!-- 実例 -->
<a href="/en/" hreflang="en">English</a>
<a href="/zh/" hreflang="zh-TW">繁體中文</a>

主な言語コード（ISO 639-1）

コード	言語	コード	言語
`ja`	日本語	`en`	英語
`zh`	中国語	`ko`	韓国語
`fr`	フランス語	`de`	ドイツ語
`es`	スペイン語	`it`	イタリア語
`ru`	ロシア語	`ar`	アラビア語
`pt`	ポルトガル語	`nl`	オランダ語
`el`	ギリシャ語	`la`	ラテン語
`ms`	マレー語	`eo`	エスペラント語

言語-地域コード（BCP 47）

同じ言語でも地域によって表記や語彙が異なる場合は 言語-地域 形式で表現します。地域コードは ISO 3166-1 alpha-2 です。

コード	意味
`en-US`	アメリカ英語
`en-GB`	イギリス英語
`en-AU`	オーストラリア英語
`zh-CN`	簡体字中国語（中国本土）
`zh-TW`	繁体字中国語（台湾）
`zh-HK`	繁体字中国語（香港）
`pt-BR`	ブラジルポルトガル語
`pt-PT`	ヨーロッパポルトガル語

多言語ナビゲーションでの使用例

言語切り替えメニューで hreflang を付けると、ユーザの利用環境（スクリーンリーダーや翻訳ツール）が「これは別言語へのリンク」と認識できます。

<nav aria-label="言語選択">
  <ul>
    <li><a href="/ja/" hreflang="ja" lang="ja">日本語</a></li>
    <li><a href="/en/" hreflang="en" lang="en">English</a></li>
    <li><a href="/zh-tw/" hreflang="zh-TW" lang="zh-TW">繁體中文</a></li>
    <li><a href="/ko/" hreflang="ko" lang="ko">한국어</a></li>
  </ul>
</nav>

リンクテキスト自体をその言語で書くのがアクセシビリティの定石です。リンクテキストの言語を lang 属性で明示しておくと、読み上げ時に正しい音声エンジンが選ばれます。

SEO 用途の hreflang（link 要素）

多言語サイトの SEO では <head> に <link rel="alternate" hreflang=...> を並べる方が重要です。Google はこれを基に言語別ページを判定します。

<head>
  <link rel="alternate" hreflang="ja"    href="https://example.com/ja/page" />
  <link rel="alternate" hreflang="en"    href="https://example.com/en/page" />
  <link rel="alternate" hreflang="zh-TW" href="https://example.com/zh-tw/page" />
  <link rel="alternate" hreflang="x-default" href="https://example.com/page" />
</head>

x-default は「どの言語にも該当しないユーザ向けのデフォルトページ」を示し、言語切り替えのフォールバック先として使います。

注意点

ポイント	説明
大文字小文字	言語は小文字、地域は大文字慣習（`en-US`）。実際は大文字小文字を区別しない
地域指定	必要なときだけ。`en` だけで十分なケースで `en-US` と書くと逆効果
相互リンク	SEO 用の hreflang は双方向に記載しないと無視される
a 要素の hreflang	ブラウザ動作には影響しないが、スクリーンリーダーが拾う

ページ一覧

その他