多くのサイトでは、ユーザーの言語や地域に応じてさまざまなバージョンのページが提供されます。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 形式に従う必要があります。