ドキュメントに有効な hreflang がありません

多くのサイトでは、ユーザーの言語や地域に基づいてページの異なるバージョンを提供しています。hreflang リンクは、検索エンジンにページのすべてのバージョンの URL を伝え、言語や地域ごとに正しいバージョンを表示できるようにします。

Lighthouse hreflang 監査が失敗する仕組み

Lighthouse は、正しくない hreflang リンクを報告します。

正しくない hreflang リンクが表示されている Lighthouse 監査

Lighthouse は、ページの head とレスポンス ヘッダーで hreflang リンクをチェックします。

Lighthouse は、hreflang リンク内に有効な言語コードが含まれているかどうかを確認します。Lighthouse は、無効な言語コードを含む hreflang リンクを報告します。

Lighthouse は、地域コードやサイトマップをチェックしません。

ページのバージョンごとに hreflang リンクを定義する方法

ページに 3 つのバージョンがあるとします。

  • 英語版: https://example.com
  • スペイン語版（https://es.example.com）
  • ドイツ語版（https://de.example.com）

これらのページが同等であることを検索エンジンに伝える方法は 3 つあります。ご自身の状況に応じて、最も簡単な方法を選択してください。

オプション 1: 各ページの <head> に hreflang リンクを追加します。

<link rel="alternate" hreflang="en" href="https://example.com" />
<link rel="alternate" hreflang="es" href="https://es.example.com" />
<link rel="alternate" hreflang="de" href="https://de.example.com" />

ページの各バージョンは、自身を含む他のすべてのバージョンにリンクする必要があります。そうでない場合、検索エンジンは hreflang リンクを無視するか、誤って解釈する可能性があります。

ユーザーが言語を選択できるページの場合は、x-default キーワードを使用します。

<link rel="alternate" href="https://example.com" hreflang="x-default" />

オプション 2: HTTP レスポンスに Link ヘッダーを追加します。

Link: <https://example.com>; rel="alternate"; hreflang="en", <https://es.example.com>;
rel="alternate"; hreflang="es", <https://de.example.com>; rel="alternate"; hreflang="de"

オプション 3: サイトマップに言語バージョン情報を追加します。

<url>
<loc>https://example.com</loc>

<xhtml:link rel="alternate" hreflang="es"
href="https://es.example.com"/>

<xhtml:link rel="alternate" hreflang="de"
href="https://es.example.com"/>

</url>

hreflang 値のガイドライン

  • hreflang 値には常に言語コードを指定する必要があります。
  • 言語コードは ISO 639-1 形式に従っている必要があります。
  • hreflang 値には、オプションの地域コードを含めることもできます。たとえば、es-mx はメキシコのスペイン語話者向けで、es-cl はチリのスペイン語話者向けです。
  • リージョン コードは ISO 3166-1 alpha-2 形式に従っている必要があります。

リソース