多くのサイトでは、ユーザーの言語や地域に応じてさまざまなバージョンのページが提供されます。hreflang
リンクは、ページのすべてのバージョンの URL を検索エンジンに伝えることで、言語や地域ごとに適切なバージョンを表示できるようにします。
Lighthouse hreflang
の監査が失敗する仕組み
Lighthouse では、次のような hreflang
リンクに誤りを報告します。
![Lighthouse の監査で正しくない hreflang リンクが表示される](https://cdn.statically.io/img/developer.chrome.com/static/docs/lighthouse/seo/hreflang/image/lighthouse-audit-showing-c1b52e7e2527d.png?hl=ja)
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 形式に従う必要があります。