許多網站會根據使用者的語言或地區,提供不同版本的網頁。hreflang
連結會告訴搜尋引擎所有網頁版本的網址,讓搜尋引擎能夠針對各個語言或地區顯示正確的版本。
Lighthouse hreflang
稽核失敗
Lighthouse 標記不正確的 hreflang
連結:
Lighthouse 會在網頁的 head
及其回應標頭中檢查 hreflang
連結。
接著 Lighthouse 會檢查 hreflang
連結中是否包含有效的語言代碼。Lighthouse 會回報所有包含無效語言代碼的 hreflang
連結。
Lighthouse 不會檢查區碼或 Sitemap。
如何為每個版本的網頁定義 hreflang
連結
假設您的網頁有三個版本:
https://example.com
的英文版https://es.example.com
的西班牙文版本- 德文版 (
https://de.example.com
)
有三種方式可以告訴搜尋引擎這些網頁就是相同的網頁。 請選擇最適合您情況的方法。
方法 1:將 hreflang
連結新增至每個網頁的 <head>
:
<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:在 Sitemap 中新增語言版本資訊。
<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 格式。