Hreflang 是什麼？Hreflang Tag 是你操作多語網站SEO的好幫手！

Hreflang｜幫助多語系網站找到對應的使用者

Hreflang 是一種 HTML Meta Tag，可以在 HTML 架構中使用 Hreflang Tag 標記不同地區、不同語言的網頁版本彼此之間的關係，幫助演算法理解這個網頁適合哪種語言或地區的使用者，避免使用者在搜尋的時候出現語言不通的狀況，優化使用體驗。

（一）Hreflang 是什麼？和 HTML Lang 的差異為何？

在 HTML 中設置 Hreflang，可以告訴搜尋引擎「這個頁面使用何種語言？」，讓搜尋引擎把網頁提供給對應語言的使用者，避免使用者看不懂而縮短停留時間或跳離率過高，可以提升使用者的搜尋體驗。

Hreflang 的另一個特點則是可以同時進行多國、多語系的宣告，讓不同語系但內容相同的網頁產生關聯，避免搜尋引擎認為它是重複的垃圾內容。

不過，Hreflang 並不是強制分類，而是幫 Google 演算法畫重點，方便辨識網站內容，但採不採用的決定權在搜尋引擎上，即使在 HTML 中不指明網頁的語言或地區，Google 也會自行從網站架構中索引語言種類，而若是網站有提供 Hreflang 可以輔助 Google 辨認，提升 Google 判讀語言的正確率。

一般來說，宣告網頁內容語言的方法有很多種，除了 Meta Tag Hreflang 之外，HTML Lang 也是很常見的一種方式。

HTML Lang 的功能是宣告某單一網頁內容使用的語言。

HTML Lang 沒辦法讓不同語言但內容相同的網站產生關聯，舉例來說：

一個企業網站擁有「中文版本的 A 網頁」和「英文版本的 B 網頁」，AB 兩個網頁只有語言差異，網頁內容是相同的。

HTML Lang 在 A 網頁中告訴演算法 A 網頁是中文內容；在 B 網頁中告訴演算法 B 網頁是英文內容。

但是 HTML Lang 沒辦法在 A 網頁中告訴演算法「 B 網頁是 A 網頁的英文替代網頁」，所以這時候就需要 Hreflang 的幫忙，才能將不同語言但相同內容的網頁互相關聯。

看到這邊你可能會好奇能不能同時設置 HTML Lang 和 Hreflang 嗎？答案是可以！不過要記得兩者宣告的語言必須相同，否則會造成演算法判讀錯亂，無法將網站導向正確的使用者。

（二）如何正確使用 Hreflang 標籤？3 項重要的 Hreflang 原則

1. Hreflang 必須在不同的語言網站架構中雙向引導

Hreflang 雙向設定才會讓演算法認為不同語言網站之間的關聯是成立的，如果只設置單向關聯會被演算法認為是無效的，舉例來說：

一個企業網站擁有「中文版本的 A 網頁」和「英文版本的 B 網頁」，A、B 兩個網頁只有語言差異，網頁內容是相同的。

在 A 網站使用 Hreflang 宣告「 B 網站是 A 網站的英文替代網頁」；同時也必須在 B 網站用 Hreflang 宣告「 A 網站是 B 網站的中文替代網頁」。

不管有幾種語言的網頁都須要兩兩雙向設置關聯，否則會被演算法忽視，甚至出現判讀錯誤的狀況。

2. 使用 Hreflang 標籤的自引用（Self-referencing）可以提升準確度

在使用 Hreflang 時，每個頁面都應該有一個引導到自己的標籤，可以更有效的提升 Google 演算法的識別，實際範例如下：

一個企業網站擁有「中文版本的 A 網頁」和「英文版本的 B 網頁」，A、B 兩個網頁只有語言差異，網頁內容是相同的。

必須在 A 網站中使用 Hreflang 宣告「 A 網站是中文內容」，同時，也要在 B 網站中使用 Hreflang 宣告「 B 網站是英文內容」。

如此設定可以輔助 Google 判讀頁面語言與內容，提升正確率，避免認為網頁內容過度重複，使得網站被判定為垃圾網站。

3. X-Default 可以用來指定備用網站，引導無法確定地區或語言的使用者

幫網站架設所有語言的版本是很困難的一件事，可能會有部分地區使用者的語言類型比較複雜，很難直接將使用者引導到對應語言頁面的時候，就可以使用 X-Default Hreflang 屬性，將無法定義地區或語言的使用者引導到備用網站，語法撰寫方式如下：

hreflang=”x-default”

「備用網站」是一個可以讓使用者自行挑選語言的頁面，使用者可以選擇自己所在的地區及語言，並進入相對應版本的網站。

（三）Hreflang 怎麼用？Hreflang 的使用範例！

在了解了 Hreflang 的基本定義和使用原則以後，接著帶大家來認識 Hreflang Tag 如何設置，基礎的 Hreflang 標籤寫法如下：

hreflang=”lang_code”

舉例而言，網站今天有中文和英文 2 種版本，希望對所有使用英文用戶顯示英文網頁時，就可以使用下列寫法：

hreflang="en"

有些地區的使用者可能會使用多種語言，所以 Lang Code 可以將地區和語言分開設置，分為「語言（Language）」和「地區（Region）」例如，對新加坡地區的使用者，可以顯示中文、英文、馬來文 3 種語言，這些地區和語言設定在 Hreflang 中都可以單獨設置，可以參考下面的範例：

hreflang="zh-HK"  ＃對香港用戶顯示中文網頁
hreflang="en-HK"  ＃對香港用戶顯示英文網頁

在語言和地區的基礎上，可以增加「Script」的屬性，也就是說同種語言但具有不同文字版本的時候可以使用，例如簡體中文和繁體中文。

hreflang="zh-hant-HK"  ＃對香港用戶顯示繁體中文網頁
hreflang="zh-hans-HK"  ＃對香港用戶顯示簡體中文網頁

（四）Hreflang 該放網頁的哪個位置？埋入 Hreflang 的 3 個地方！

確認好語言之後，在 HTML 架構中，有 3 個位置可以埋入 Hreflang 標籤，向演算法說明網頁有哪些語言或地區版本。

3 個位置分別是在「HTML 的 Meta Tag」、「HTTP 標頭欄位」、「埋在 Sitemap 中」，以下將針對 3 種方式進行說明：

1. HTML Hreflang

位在 HTML 中的 Meta Hreflang 標籤，會放在 之間，舉例來說，如果想要設定網站「https://example.com/en/」是面對香港用戶的英文內容，可以這樣寫：

<link rel=”alternate” hreflang=”en-HK” href=”https://example.com/en/”>

接著帶大家詳細拆解語法，了解每個部分的意思：

1. 使用 link 開頭代表目前網站和另一個網站產生關聯。
2. rel 的意思是 relationship，用來定義兩個網站的關係是 alternate（替代網頁）。
3. hreflang=”en-HK” 代表對香港用戶顯示英文。
4. href 全名為 Hypertext Reference，意思就是超連結，後面就填入另一個關聯網站的網址即可。

2. HTTP

如果網站中有非 HTML 的連結，例如有可供下載的多語言 PDF 文檔，就可以在請求下載 HTTP 標頭中設定多語言的 Link Hreflang，讓演算法可以識別檔案的語言種類，舉例來說，假設網站中提供簡體中文、繁體中文、英文三種語言的 PDF 產品說明書供使用者下載，那就可以照著下面的語法設定 HTTP標頭中的 Hreflang：

Link:
<https://example.com/en/manual.pdf>; rel=”alternate”; hreflang=”en”, 
<https://example.com/zh-hant/manual.pdf>; rel=”alternate”; hreflang=”zh-hant”, 
<https://example.com/zh-hans/manual.pdf>; rel=”alternate”; hreflang=”zh-hans”

這串語法看起來很複雜嗎？不用擔心，接下來就為大家講解每個部分所代表的意義：

1. 開頭使用 Link: 代表接下來的內容互相具有關聯性。
2. ＜url＞ 將具有關聯的 PDF 檔案條列出來，每個檔案間使用「逗號＋半形空格」分隔。
3. 在檔案網址後方加上「分號＋半形空格」，接著就可以宣告檔案的屬性，每個屬性都要使用「分號＋半形空格」分開。
4. rel=”alternate” 代表這些檔案之間的關係互為替代版本。
5. hreflang=”en” 則代表該檔案的語言是英文，zh-hant 代表繁體中文、zh-hans 代表簡體中文。

3. Sitemap Hreflang

第三種方法則是將 Hreflang 寫在 Sitemap 中。

Sitemap 的概念類似網站地圖，是在網站架構外的一個單獨檔案，會將網站架構中各頁的關聯狀況完整收錄在裡面，有架設 Sitemap 的網站可以提升網站被演算法所索引時的正確率，方便 Google 爬蟲檢索網站內容。

Sitemap 有許多不同的格式，其中最常見的一種是 XML Sitemap，我們可以在 Sitemap 中加入 Hreflang 屬性，去關連所有語言和地區的網站版本，舉例來說，以「https://example.com/en/」為例，這個網站除了英文以外，還有繁體中文及法文 2 種版本，那 Sitemap XML Hreflang 我們可以這樣寫：

<url>
<loc>https://example.com/en/</loc>
 <xhtml:link
  rel="alternate"
  hreflang="en"
  href="https://example.com/en/"/>
 <xhtml:link
  rel="alternate"
  hreflang="zh-hant"
  href="https://example.com/zh-hant/"/>
 <xhtml:link
  rel="alternate"
  hreflang="fr"
  href="https://example.com/fr/"/>
</url>

在 XML Sitemap 中標記 Hreflang 須要特別注意的地方有：

1. 每個網址需單獨使用 ＜url＞＜/url＞ 標記。
2. ＜locl＞＜/loc＞ 指出現在的網址。
3. 用 ＜xhtml:link＞ 列出每個與現在網址關聯的網址。
4. 每個網址都需要加上屬性 rel=”alternate” 定義他們之間的關係是替代網頁。
5. 使用 Hreflang 替每個網址定義他的內容語系。

學會了上面 2 種方法，看到第三種 Sitemap 應該會發現語法差異不大，其實這 3 種方式沒有優劣之分，在語法撰寫上也只有些微不同，基礎概念都是一樣的，所以選擇自己擅長的方式設定就可以了！

如何製作多語系網站？實用 Hreflang 設置工具推薦！

學會了 Hreflang 標籤的設置方法以後，在使用前還必須擁有一個多語系的網站才行！

究竟要如何架設一個多國語言網站呢？架設好網站以後，有什麼實用工具可以快速設定多語系網站的 Hreflang 呢？又該如何測試多語系網站設定的 Hreflang 是正確的呢？

接下來就一一為大家解答，並且分享各種實用的工具，即使是完全不懂程式語言也可以輕鬆上手！除此之外，也會和大家分享其他企業是如何架設多語系網站，透過解析國際知名品牌的案例，讓大家更容易理解！

（一）多語系網站設定網址的方式有哪些？

多語系網站設定網址的方式非常多，比較常見的有下列 3 種方法：

1. 子目錄

使用共同網域，在網域下以資料夾（子目錄）的方式區分不同語言的網站，只需要一部伺服器就可以設置與維護，成本較低，也是目前較多企業採取的方式，範例如下：

https://example.com/zh-HK/
https://example.com/en/

2. 子網域

透過新增子網域的方式，可以清楚區分品牌識別和地區及語言，網站也可以架設在不同伺服器上，網址的範例如下：

https://zh-hk.example.com
https://en.example.com

3. 國家及地區頂級域名（ccTLD）

國家網域地區性較強，但也較難申請或購買，部分國家網域申請有限制條件，甚至有的國家會設立專門管理國家網域的政府單位，負責審核網域申請事宜：

https://example.hk
https://example.cn

Google 演算法沒有特別偏好哪種設定方式，可以依照下面整理的比較表以及對 SEO 的影響來選擇適合自己的架設方式：

說到這裡，可能有些人會將 Hreflang、Canonical 2 種屬性放在一起比較，其實這兩者是完全不一樣的概念。

Hreflang 屬性可以告訴演算法不同網頁間是相等的，且這個相等是具有語言和地區上的差異，因此不會被 Google 判定為重複的垃圾網站。

但 Canonical 屬性的定義是告訴演算法所有內容相同的網站中，只有其中某一個網站才是原創內容，這會讓其他不同語言的網頁被 Google 認定為重複內容，導致檢索頻率下降，使得網站排名受到影響。

所以在設置跨國 SEO 的時候一定要特別留意，千萬不要誤用！

（二）網站的地區及語言代碼規範

不論是在設定網站網址的時候，又或者在撰寫 Hreflang 標籤時，都會遇到一個相同問題是「地區及語言代碼的縮寫該如何呈現？」

其實，這個縮寫是有統一規範的！而且地區和語言的規範並不相同，接下來就讓我們分成兩個部分來說明！

1. 語言代碼

語言代碼採用 ISO 639-1 格式，是由國際標準化組織為各語言所訂定的語言代碼，以下依照使用的語言人口數多寡，替大家列出幾種比較常見的語言代碼：

2. 地區代碼

地區代碼則是採用 ISO 3166-1 Alpha 2 格式，將各個國家的國名縮減為兩個字母的英文代碼，以下列出幾個比較常見的地區代碼：

如果在撰寫 Hreflang 或制定網頁多國語言的網址時，不確定該如何縮寫，都可以參考直接參照 Google 說明文件提供的「語言代碼」和「地區代碼」總表，才不會寫錯縮寫，造成演算法無法判讀的狀況！

（三）4 款實用 Hreflang Tool 分享：從標籤生成到檢測一應俱全！

1. The Hreflang Tags Generator Tool

The Hreflang Tags Generator Tool 是一款 Hreflang 標籤產生器（Hreflang Generator），可以透過 csv 檔案上傳的方式，一次設置 50 種地區及語言的 Hreflang Tags，也可以手動新增各個地區和語言。

2. Hreflang Tag Checker

Hreflang Tag Checker 是一款 Chrome 瀏覽器的擴充功能，可以在直接在瀏覽器上進行 Hreflang Test，點一下馬上就能知道當前網站是否有設置 Hreflang Tag，不過缺點是必須使用 Chrome 瀏覽器才能使用。

3. Hreflangchecker

Hreflangchecker 只要輸入網址就可以確認該網站是否有設置 Hreflang ，甚至可以同時輸入多組網址進行檢查，但前提必須是處於公開狀態的網站才有辦法檢測，這款工具也會針對沒有設置 Hreflang 標籤的網站提出修改建議。

4. Technicalseo

Technicalseo 可以檢視網站設置 Hreflang 標籤後，在不同搜尋引擎中會呈現怎樣的結果，包含 Google 一般搜尋、Google 圖片搜尋、Bing、Yahoo、百度等各大搜尋引擎，都可以透過 Technicalseo 來預覽結果。

（四）多語系網站例子｜看看其他企業如何設置多國語言網站

說了這麼多網站多國語言的理論，接著讓我們來看看其他企業是如何設置多國語言網站的吧！從上面介紹過的 3 種網址設定方式看看他們的區別：

1. 子目錄架設｜Netflix

知名的國際 OTT 平台 Netflix 就是使用子目錄的方式來架設多語系網站，各國網站的區別會顯示在網址的後綴上。

2. 子網域架設｜Wikipedia

著名的線上百科全書 Wikipedia 是使用子網域的方式來架設多語系網站，因此他們各國網址的區別會在網址的最前面。

3. 國家及地區頂級域名（ccTLD）架設｜Airbnb

全球知名的日租套房平台 Airbnb 在各國都有申請專屬頂級網域名稱，雖然申請 ccTLD 的費用較高，且維運也比較困難，但因為 Airbnb 本身的經營方式在部分國家需申請核可才行，所以使用國家及地區頂級域名對公司、政府、顧客都比較有保障。

對於網站 SEO Hreflang 可以提供哪些效益？

目前 4 大搜尋引擎中，Google 和 Yandex 都會參考 Hreflang 標籤來引導使用者到相對應語言的網站，而 Bing 和百度則是參考網站中設置的「HTML Lang」標籤來識別各網站的語系和地區，HTML Lang 的使用方法可以參考下面範例：

<html lang=”en”>
這個語法告訴演算法，目前網站頁面內容是英文

雖然 HTML Lang 沒有辦法讓多語系網站之間產生關聯性，但不論是 Hreflang 或 HTML Lang，只要設置清楚，就可以讓搜尋引擎能夠明確參考並引導使用者到合適的語言頁面，有助於提升使用者體驗，同時增加他們在網站上的停留時間、降低跳出率。

所以不管設置 Hreflang 或 HTML Lang SEO 都會產生正面影響！

此時可能有人會想到，如果網站使用現成架站工具建置，例如在 WordPress 系統上架設網站，是不是就沒辦法增加 Hreflang 標籤呢？會不會因此損失一部分的 SEO 效益呢？

不用擔心！WordPress 作為全球被廣泛應用的架站工具之一，有許多外掛都可以幫助大家建置多語言網站，同時還能自動設置 Hreflang，接下來就介紹實用的 WordPress 外掛幫助大家輕鬆建立 Hreflang Tags！

WordPress 也能架設多語系網站！2 款實用 Hreflang 外掛推薦！

1. Polylang Hreflang

Polylang 是一款可以在 WordPress 上創建多語系網站實用外掛，免費版就具有相當豐富的功能。Polylang 自從 2011 年推出後，已經超越 70 萬次下載數，是一款老字號的多語系網站外掛。

Polylang 的最大特色就是可以在選擇要創建其他語系網站時，會產生一個自動翻譯的版本，減少翻譯網站內容的工作量，只需要針對已經翻譯好的內容進行校對與修正即可，是非常方便的一款工具。

2. WPML

WPML 也是一款可以在 WordPress 上創建多語系網站的外掛，它是一款付費外掛，但功能比 Polylang 更為豐富，不僅有一鍵翻譯功能，WPML 還可以將各語言網站 WordPress 後台分割，在中文網站後台只會看到中文網站的內容，而不會和其他語言的內容混雜再一起。

WPML 也可以協助翻譯網站的模板、選單、小工具等內容，是相當功能非常廣泛的一款多語系網站架設外掛！

另外，可能不少人都有聽過 Yoast SEO 這款 WordPress 中非常熱門的 SEO 外掛，有許多人在網路上表示在 Yoast SEO Hreflang Tag 中也可以設定多語系網站，但實際上 Yoast SEO 並沒有提供任何 Hreflang 標籤的功能，所以是沒有辦法使用 Yoast Hreflang 打造多國語言網站的。

除了上述 2 款以外，可能大家還有聽過一款外掛叫做 Hreflang Tags Lite，不過這款外掛目前已經暫停開放使用，所以如果想在 WordPress 上建置多語系網站，還是推薦使用上面 2 款穩定度高的外掛軟體！

以上就是 Hreflang 標籤的使用教學啦！如果您想要了解更多SEO資訊，或者想要獲取免費的SEO網站檢測，都可以透過下方黃色按鈕與Welly團隊聯繫！