What is hreflang meta in i18n Website?

多語系網站當中的 hreflang 是什麼？

@ SEO

前言

在打造多語系網站時，許多人會關注翻譯的準確度或切換體驗，但往往忽略了一個對 SEO 非常關鍵的設定：hreflang。正好最近把部落格🔗和個人網站模板🔗的多語系都調整完成，它們都是需要重視 SEO 的靜態內容網站類型，其中的經驗我紀錄於這篇文章當中。

hreflang 是什麼？

hreflang 是一個 HTML <link> 標籤中的屬性，用來 告訴搜尋引擎該頁面是針對哪個語言和地區所設計，當面對多個相似內容時，能正確地將使用者導向適合他們語言與地區的版本。根據這個部落格為案例，直接將語系資料生成於 HTML 文件中：

<head>
  <!-- 「預設」語言版本，當搜尋引擎無法判斷使用者適合哪個語言版本時，會顯示這個連結的內容。 -->
  <link rel="alternate" hreflang="x-default" href="https://www.webdong.dev/zh-tw/">


  <!-- 當使用者的語言偏好是 zh（沒有細分地區或書寫系統時），搜尋引擎會顯示這個版本。 -->
  <link rel="alternate" hreflang="zh" href="https://www.webdong.dev/zh-tw/">


  <!-- 英文使用者 -->
  <link rel="alternate" hreflang="en" href="https://www.webdong.dev/en/">


  <!-- 簡體中文使用者 -->
  <link rel="alternate" hreflang="zh-cn" href="https://www.webdong.dev/zh-cn/">


  <!-- 繁體中文使用者（特別是台灣） -->
  <link rel="alternate" hreflang="zh-tw" href="https://www.webdong.dev/zh-tw/">
</head>
  • rel="alternate"：該頁面的一個替代版本
  • hreflang="language-country"：使用語言代碼（ISO 639-1🔗）與地區代碼（ISO 3166-1 alpha-2🔗）組合而成。
  • href：對應語言版本的網址。

為什麼 hreflang 很重要？

  1. 避免重複內容的 SEO 懲罰 ：多語系頁面在內容上常會有高度相似性，搜尋引擎可能將其視為重複內容而降低排名。hreflang 告訴搜尋引擎這些是為不同語言或地區設計的內容，不該彼此競爭。
  2. 提升使用者體驗：比方說 en-US 與 en-GB 則分別代表美式與英式英文。設置正確的 hreflang 可以幫助搜尋引擎根據使用者所在地提供最合適的版本。

常見錯誤與疑問

  1. 沒有雙向標注：如果 A 頁面標註了 B 頁面的 hreflang，那麼 B 頁面也應該回標 A 頁面，證明你對於兩個頁面都有控制。
  2. 標示語系備用方案🔗 ：使用 x-default，標示沒有找到合適語系的頁面之替代頁面。
  3. 網頁上的 hreflang 設定與 Sitemap 中的不一致。

結語

hreflang 雖然只是幾行 HTML 標籤，但對於多語系網站的 SEO 成效與使用者體驗有著關鍵影響。若你正在經營國際網站，花時間設計正確的 hreflang 策略絕對值得。

延伸閱讀