この内容は古いバージョンです。最新バージョンを表示するには、戻るボタンを押してください。
バージョン:3
ページ更新者:guest
更新日時:2026-06-11 13:11:56

タイトル: hreflang属性
SEOタイトル: HTML a 要素の hreflang 属性完全ガイド(言語コード ISO 639-1 / 国コード ISO 3166-1 / 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ブラウザ動作には影響しないが、スクリーンリーダーが拾う

関連

  • a要素 — 親カテゴリ(リンク)
  • HTML — HTML トップ
  • href属性 — リンク先 URL
  • target属性 — リンクを開く先のフレーム
  • lang 属性 — 要素内のテキストの言語を示す