多くのサイトでは、ユーザーの言語や地域に応じてさまざまなバージョンのページが提供されます。hreflang リンクは、ページのすべてのバージョンの URL を検索エンジンに伝えることで、言語や地域ごとに適切なバージョンを表示できるようにします。
Lighthouse hreflang の監査が失敗する仕組み
Lighthouse では、次のような hreflang リンクに誤りを報告します。
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 形式に従う必要があります。