Hreflang 是什麼?如何妥善使用 Hreflang 提升多國語系網站的 SEO 排名?
前言
如果想要做國外的 SEO 優化策略,一定不能忽略的就是建置多國語系標籤。
本篇文章,我們將會著重介紹 Hreflang Tag 是什麼,多國語系標籤對於 SEO 的影響,以及 Hreflang Tag 的設定教學。
Hreflang 是什麼?打造多國語系網站的重要根基
Hreflang Tag 是一個 Meta 標籤,主要功用是向搜尋引擎說明不同語種、地區的網頁版本之間的關係。
當網站目標受眾會跨國際地區或是語言時,我們需要讓使用者可以直接看到正確的頁面,那我們要如何確保這件事情呢?
答案就是設定 Hreflang 標籤!
Hreflang 有時也被稱為多國語系標籤。
針對不同語系的頁面建立 Hreflang 標籤,可以讓瀏覽器直接針對不同地區 / 國家 / 語系的使用者顯示相對應的語言版本,
方便使用者閱讀,也讓搜尋引擎可以分辨如何針對不同國家的關鍵字查詢做出排名。
例如:我們在台灣搜尋「Apple」會出現繁體中文「tw」版本。
但如果我們在西班牙搜尋「Apple」則會出現西班牙文「es」版本。
事例來源:ahrefs
為什麼 Hreflang 是多語系網站不可或缺的一環?
沒有 Hreflang 多國語系標籤,搜尋引擎會無法分辨多個不同語言版本的頁面,可能會導致以下問題:
- 用戶被導向錯誤語言的頁面,提升跳出率
- 搜尋引擎誤認有頁面重複內容問題,影響 SEO 排名
正確的設定 Hreflang 語系標籤可以有效解決這些問題,並且根據使用者慣用語系顯示頁面,還可以有效提升使用者體驗。
畢竟一點進搜尋結果頁面,發現網頁內容符合自己的母語,不用再自行切換回慣用語系,是很便利的一件事情對吧!
Hreflang 如何增加 SEO 效益?
前面我們提到,如果要做多國語言網站,Hreflang 標籤是不可或缺的加分項目,那麼 Hreflang 是怎麼增加 SEO 效益的呢?原理是什麼?
Hreflang 好處1:提升使用者體驗,減少跳出率
Hreflang 標籤能讓搜尋引擎根據使用者的語言和地理位置顯示最合適的頁面。
當使用者點擊搜尋結果時,能看到符合語言與文化的內容,這可以減少因網頁顯示的語言不符而快速跳出的情況,顯著降低跳出率。
Hreflang 好處2:避免重複內容懲罰
多語系網站容易出現語言相似但針對不同地區的頁面,像是:繁體中文、簡體中文語系。
如果沒有設置好 Hreflang,搜尋引擎可能會將這些頁面當作重複頁面,導致排名降低。
設置好 Hreflang 標籤,可以有效解決重複頁面的問題,讓搜尋引擎識別這些相似的內容頁面只是不同語系版本,並非刻意的堆疊排名,避免重複內容的懲罰。
Hreflang 好處3:提升網站的全球可見度
設置 Hreflang 標籤,搜尋引擎能夠在全球範圍內為不同語言和地區的用戶提供相關的語系內容,從而提高網站的國際可見度。
Hreflang 好處4:增強跨國銷售的效果
如果有經營跨國銷售,Hreflang 可以幫助不同地區的使用者展示相關語系的產品或服務內容。
根據精準的使用者 IP 定位,找到並且針對不同國家 / 地區的消費者進行相關產品的推廣,可以有效提升轉換率。
多國語言網站的 Hreflang 應用情境
經營多國語言網站,常常會遇到一個問題:到底是要依「使用者的語言」來分版本,還是「使用者的地區」來分?又或者,兩者都要分?
這時候,就會用到 Hreflang 語系標籤。
它的作用,就是幫助搜尋引擎知道:你這些看起來內容差不多的頁面,其實是給不同語言或地區的人看的。
但要怎麼設定才正確?我們可以從三種常見的情境來理解:
多語系(語言不同,但不分地區)
這種網站通常提供多種語言版本,像是英文、法文、德文、繁體中文、簡體中文等等,不管使用者在哪個國家,看到的內容都是同一語言版本。
例如:
- 使用者在美國、英國、加拿大,都會看到英文頁面
- 使用者在台灣、新加坡,都會看到繁體中文頁面
適合只需要語言切換的網站,例如國際品牌形象網站、部落格等。
Hreflang 範例設定:
<link rel="alternate" hreflang="en" href="https://example.com/en/" />
<link rel="alternate" hreflang="zh-hant" href="https://example.com/zh-hant/" />
多國家(地區不同,但語言相同)
這種網站雖然語言一樣,但會針對不同國家的使用者,做內容上的微調,例如拼字、幣別、稅率、付款方式、商品庫存。
例如:
-
美國版:英文 + 美元 + color
-
英國版:英文 + 英鎊 + colour
常見於購物網站、票券平台、物流平台等,需要根據地區做精細調整的服務。
Hreflang 範例設定:
<link rel="alternate" hreflang="en-us" href="https://example.com/us/" />
<link rel="alternate" hreflang="en-gb" href="https://example.com/uk/" />
多語系 + 多國家(語言和地區都不同)
這是最複雜但也最常見的情境,網站不僅提供多語言,還會針對每個語言的使用地進一步區分版本。
例如中文版本就會細分成:
-
繁體中文(台灣用詞+新台幣)
-
繁體中文(香港用詞+港幣)
-
簡體中文(中國用詞+人民幣)
-
簡體中文(新加坡用詞+新幣)
英文也可能細分成美國、英國、澳洲等版本。
適合有跨國營運需求、產品定價多國差異化、需要依地區進行行銷調整的網站。
Hreflang 範例設定:
<link rel="alternate" hreflang="zh-tw" href="https://example.com/tw/" />
<link rel="alternate" hreflang="zh-hk" href="https://example.com/hk/" />
<link rel="alternate" hreflang="zh-cn" href="https://example.com/cn/" />
<link rel="alternate" hreflang="en-us" href="https://example.com/us/" />
<link rel="alternate" hreflang="en-gb" href="https://example.com/uk/" />
小提醒:那要怎麼判斷自己是哪一種情境?
你可以問自己幾個問題:
- 我網站的內容有針對不同地區調整嗎?(有就要用地區碼)
- 我的內容有提供多種語言嗎?(有就要用語言碼)
- 有些語言在不同地區要分開嗎?(如繁中台灣 vs 香港)
只要你回答「是」,那就代表你可能要進行多語系+多國家的 hreflang 設定。別擔心,它雖然麻煩,但搜尋引擎會感謝你,使用者也更容易找到他們看得懂的版本!
多國家 vs 多語系+多國家的不同
-
「多國家」:語言一樣,地區不同(針對內容微調)
-
「多語系+多國家」:語言不同,每個語言還要再分地區(全面在地化)
Hreflang 3 種標籤語法設定教學
講完 Hreflang 標籤的應用情境後,本章節我們開始講解如何設定 Hreflang 標籤。
方法 1:在每個頁面直接設定 Hreflang 標籤
Hreflang 是一種 HTML 標籤,用於多語言或多地區網站。以下是一個常見的程式碼語法範例:
<link rel="alternate" hreflang="en-US" href="https://example.com/us/" />
<link rel="alternate" hreflang="en-GB" href="https://example.com/uk/" />
<link rel="alternate" hreflang="x-default" href="https://example.com/" />
程式碼分析說明:
- rel="alternate"
負責告訴搜尋引擎這些是替代的網頁版本。 - hreflang="en-US"
表示此版本適用於「美國英語」的用戶。 - href="https://example.com/us/"
指定該語言或地區的頁面網址。 - hreflang="x-default"
指向預設的頁面,適用於無法確定特定語言或地區的用戶。
不同頁面的語系標籤,需要放置在頁面的 <head> 內。
方法 2:在網站地圖設定 Hreflang 標籤
對於需要設置多個語言、多個區域頁面的大型網站,直接在網站地圖設置 Hreflang 標籤會是較建議的做法。
不僅方便集中管理,也可以減少單一頁面的修改負擔。
程式碼範例:
<url>
<loc>https://example.com/us/</loc>
<xhtml:link rel="alternate" hreflang="en-US" href="https://example.com/us/" />
<xhtml:link rel="alternate" hreflang="en-GB" href="https://example.com/uk/" />
<xhtml:link rel="alternate" hreflang="fr-FR" href="https://example.com/fr/" />
</url>
完成設置後,記得將網站地圖提交到 Google Search Console,以便搜尋引擎正確讀取 Hreflang 標籤內容。
方法 3:在伺服器的 HTTP 標頭中設定 Hreflang 標籤
還有第三種方法,可以透過修改伺服器的 HTTP 標頭來設定 Hreflang 標籤。
但通常這種情況會比較少見,當網站開發限制導致 HTML 和網站地圖無法添加 Hreflang 標籤時,才需要考慮透過伺服器的 HTTP 標頭來設定 Hreflang 標籤。
範例程式碼:
Link: <https://example.com/us/>; rel="alternate"; hreflang="en-US"
Link: <https://example.com/uk/>; rel="alternate"; hreflang="en-GB"
Link: <https://example.com/fr/>; rel="alternate"; hreflang="fr-FR"
步驟:
- 修改伺服器的回應設定,添加上述語法。
- 當用戶或搜尋引擎請求頁面時,伺服器自動傳遞 Hreflang 資訊。
適用情境:
- 無法修改 HTML 或網站地圖時(例如 API 頁面)。
- 有技術團隊可以協助進行伺服器設定。
優點:
- 適合動態生成的頁面。
- 不需改動頁面代碼。
注意:此方法需要與技術團隊合作,確保伺服器正確傳遞標籤。
4 種多語系網站的網域架構與 Hreflang Tag 的搭配應用
在架設多語系網站時,選擇適合的網域架構是成功的重要基礎。
不同的架構不僅會影響網站的管理方式,也會對 SEO 操作產生重大影響。
下面我們會介紹 4 種常見的網域架構及其適用情境,並說明如何與 Hreflang 標籤做搭配使用。
1. 使用 ccTLD (Country Code Top-Level Domain)
什麼是 ccTLD?
ccTLD 是基於國家和地區的頂級域名,例如 .tw、.us、.jp。每個語言或地區的版本都擁有獨立的域名。
範例架構:
- 中文:https://example.tw
- 英文:https://example.us
- 日文:https://example.jp
優點:
- 針對特定國家或地區的 SEO 效果最佳。
- 搜尋引擎和用戶能清楚識別地區屬性。
缺點:
- 每個 ccTLD 都是獨立網站,SEO 權重分數無法共享。
- 維護成本高,需要獨立經營每個網域的內容+SEO 數位行銷策略。
建議情境:
適合資源充足,且有明確區域市場目標的企業。
Hreflang 標籤建議: 確保每個頁面間的 Hreflang Tag 互相參考,例如:
<link rel="alternate" hreflang="zh-TW" href="https://example.tw" />
<link rel="alternate" hreflang="en-US" href="https://example.us" />
<link rel="alternate" hreflang="ja-JP" href="https://example.jp" />
2. 使用子目錄 (Subdirectory)
什麼是子目錄?
子目錄是在主域名下建立不同語言的分頁,使用「資料夾」方式管理網站內容。
範例架構:
- 中文:https://example.com/zh/
- 英文:https://example.com/en/
- 日文:https://example.com/ja/
優點:
- 所有語言版本共享主網域的權重,對於 SEO 優化及維護來說會更容易。
- 管理方便,所有內容集中在同一網站。
缺點:
- 缺乏明確的國家地區信號,搜尋引擎需要依賴其他方式進行判定。
建議情境:
適合中小型網站,或以語言為主而非區域的國際化網站。
Hreflang 標籤建議:
每個語言的子目錄都需要設定 Hreflang Tag,例如:
<link rel="alternate" hreflang="zh-TW" href="https://example.com/zh/" />
<link rel="alternate" hreflang="en-US" href="https://example.com/en/" />
<link rel="alternate" hreflang="ja-JP" href="https://example.com/ja/" />
3. 使用子網域 (Subdomain)
什麼是子網域?
子網域是主域名下的獨立分區,每個子網域可以針對不同語言或地區設置。
範例架構:
- 中文:https://zh.example.com
- 英文:https://en.example.com
- 日文:https://ja.example.com
優點:
- 提供一定的獨立性,適合需要不同功能或大規模網站的架構。
- 可以更清晰區分出不同語言版本。
缺點:
- 每個子網域也都需要獨立累積 SEO 權重。
- 維護比子目錄稍微複雜。
建議情境:
適合希望在主域名下保持多語言版本一定獨立性的大型網站。
Hreflang 標籤建議:
每個子網域間的頁面也需互相參考,設定如下:
<link rel="alternate" hreflang="zh-TW" href="https://zh.example.com" />
<link rel="alternate" hreflang="en-US" href="https://en.example.com" />
<link rel="alternate" hreflang="ja-JP" href="https://ja.example.com" />
4. 使用網址參數 (URL Parameters)
什麼是網址參數?
透過在網址後加上參數來區分不同語言版本,結構較簡單。
範例架構:
中文:https://example.com/?lang=zh
英文:https://example.com/?lang=en
日文:https://example.com/?lang=ja
優點:
- 設置簡單,不需要新增子網域或資料夾。
- 管理方便,所有版本共用同一網站架構。
缺點:
- 不利於 SEO,參數可能與其他 UTM、追蹤參數混淆。
- 容易造成重複內容,影響搜尋引擎的判斷。
建議情境:
需要快速測試多語系頁面時使用,並不建議將此作為長期策略。
Hreflang 標籤建議:
<link rel="alternate" hreflang="zh-TW" href="https://example.com/?lang=zh" />
<link rel="alternate" hreflang="en-US" href="https://example.com/?lang=en" />
<link rel="alternate" hreflang="ja-JP" href="https://example.com/?lang=ja" />
Hreflang 的常見錯誤與解決方案
缺少雙向標籤的影響與補救措施
如果 Hreflang 標籤在設定時,只有 A 頁面指向 B 頁面,但 B 頁面未回指 A 頁面,搜尋引擎可能忽略這些標籤,導致跨語言或地區的對應關係無效。
例如:
- 台灣地區的繁體中文頁面(A 頁面):https://example.com/tw/
- 美國地區的英文頁面(B 頁面):https://example.com/us/
在台灣的 https://example.com/tw/ 頁面中,我們設置了Hreflang 標籤,表示身處美國 IP 的使用者必須顯示「/us」的 B 頁面,如下:
<link rel="alternate" hreflang="en-US" href="https://example.com/us/" />
但在英文頁面上,我們沒有加入指向繁體中文頁面的對應 Hreflang 標籤。
這可能會讓搜尋引擎認為 A、B 兩個頁面之間,沒有雙向語系的對應關係,從而忽略這筆 Hreflang 設置,導致以下問題產生:
- 搜尋引擎無法正確區分受眾地區:台灣的使用者可能會被引導至英文頁面,而非預設顯示的繁體中文頁面。
- 影響 SEO 的語言與地區定位效果:搜尋結果中無法正確呈現符合語言需求的頁面,反而讓 SEO 分數降低。
- 重複頁面的問題:兩個頁面沒有相對的語系關聯,導致搜尋引擎認爲同一個內容製作兩個頁面,重複性頁面出現會讓 SEO 分數降低。
因此確認好有無每個頁面都有設置相對應的 Hreflang 標籤是很重要的。
重複或衝突的 Hreflang 標籤修正方法
如果在 HTML 或 XML 中同一頁面有重複的 hreflang 標籤,或設置了矛盾的語言與地區對應(例如將「zh-TW」誤設為「zh-CN」),會讓搜尋引擎無法準確判斷頁面的語言版本或地區設定。
重複示範:
<link rel="alternate" hreflang="en-US" href="https://example.com/us/" />
<link rel="alternate" hreflang="en-US" href="https://example.com/us/" />
衝突示範:
<link rel="alternate" hreflang="zh-CN" href="https://example.com/tw/" />
我們可以使用工具檢查 Hreflang 標籤是否設置錯誤。
例如:Google Search Console、HTML 驗證器⋯⋯等工具都可以幫助我們檢查 Hreflang 標籤是否有設置錯誤。
搜尋引擎無法正確索引的原因與解決方法
如果搜尋引擎無法正確爬取或索引頁面,Hreflang 標籤即便正確設置也沒辦法順利發揮作用。
造成搜尋引擎無法完全順利爬取的原因可能包括:
- 標籤語法錯誤:標籤未正確封閉,或 URL 格式有誤,都會導致標籤語法錯誤,Hreflang 標籤無法順利設置。
- 頁面未被爬取:頁面可能被 robots.txt 屏蔽,或因無效鏈接導致搜尋引擎無法訪問。
- 使用 HTTP 標頭配置但未生效:伺服器配置錯誤或 HTTP 標頭未正確傳遞。
這時候我們除了檢查本身的語系標籤是否有正確設定外,也可以使用 Google Search Console 檢查 Hreflang 狀態,同時檢查 robots.txt 是否阻擋搜尋引擎收錄相關的 URL。
Hreflang 與其他 SEO 標籤的整合應用
有很多和語系標籤相關的 SEO 設置標籤,是可以一起運用,避免 SEO 分數降低的。
以下是一些相關 Meta 標籤的 SEO 應用說明,可以當作參考:
Hreflang 與 Canonical 標籤的整合
Canonical 標籤是主要版本標籤,可以和 Hreflang 語系標籤一起使用,主要是在告訴 Google 搜尋引擎,這麼多同樣內容的網頁,哪一個會是我們最希望被不同語言的主關鍵字收錄的頁面。
兩者可以同時使用,但必須要避免設置錯誤的部分。
例如,一個網站有繁體中文+英文版本的頁面,但設定以下 Meta 標籤:
<!-- 英文頁面 -->
<link rel="canonical" href="https://example.com/en/" />
<link rel="alternate" hreflang="zh-TW" href="https://example.com/zh-tw/" />
<!-- 繁體中文頁面 -->
<link rel="canonical" href="https://example.com/en/" />
<link rel="alternate" hreflang="en" href="https://example.com/en/" />
這個範例錯誤的原因,在於兩個語言的頁面都設置 Canonical 標籤指向「英文版本」頁面。
應該需要「繁體中文頁面的 Canonical 標籤指向繁體中文頁面」、「英文頁面的 Canonical 標籤指向英文頁面」這樣才是正確的設置,告訴搜尋引擎各自語系的標準頁面是什麼。
Hreflang 與 Open Graph 標籤的整合
Hreflang 可與 Open Graph 標籤,也就是社交媒體與搜尋引擎的內容,做出指定要展示什麼文字與圖片的效果。
Hreflang 標籤主要會影響搜尋引擎如何為使用者顯示網頁的語言與地區定位;而 Open Graph 標籤則用於提升社交媒體分享時的顯示效果(如 Facebook、Twitter 等)。
確保每個語言版本的頁面都有對應的 OG 標籤,尤其是 og:locale 標籤與 Hreflang 的語言地區一致。例如:
<!-- 英文頁面 -->
<link rel="alternate" hreflang="en-US" href="https://example.com/en/" />
<meta property="og:locale" content="en_US" />
<!-- 繁體中文頁面 -->
<link rel="alternate" hreflang="zh-TW" href="https://example.com/zh-tw/" />
<meta property="og:locale" content="zh_TW" />
使用 og:locale:alternate 標籤來指明其他語言版本:
<meta property="og:locale:alternate" content="zh_TW" />
<meta property="og:locale:alternate" content="en_US" />
Hreflang 與 Schema 結構化資料的整合
Hreflang 語系標籤讓搜尋引擎了解多語系頁面關係,Schema.org 則提供頁面整體的結構化數據,提升搜尋引擎對內容的理解,以及增加頁面在搜尋引擎結果頁面的展示效果(如:精選摘要、產品、電影⋯⋯等等)。
在多國語言頁面中,結構化數據應該包含對應的語言屬性(inLanguage),並與 Hreflang 設定是一致的。
實例分享:多國語系網站的成功範例
本篇文章介紹許多跨多國語言版本的網頁該如何設定語系標籤的方法。
在了解之後,我們再來看看其他知名公司是如何針對這方面進行實作的:
Hreflang 語系標籤案例 1:IKEA
IKEA(台灣):https://www.ikea.com.tw
網域架構:
IKEA 採用國家代碼頂級域名(ccTLD)方式,為各國家或地區提供獨立的網站。例如:
同時為了更精細的針對各國搜尋引擎進行 SEO 優化,每個國家的站點,都各自有不同的語言版本。
例如:台灣站又使用「子目錄」的方式,去做出語言標籤
-
台灣站(繁體中文版):https://www.ikea.com.tw/zh
-
台灣站(英文版):https://www.ikea.com.tw/en
Hreflang 語系標籤案例 2:Mercedes-Benz(賓士)
Mercedes-Benz 賓士(德國):https://www.mercedes-benz.com/de/
網站架構:Mercedes-Benz 使用子目錄方式為不同地區和語言提供對應的網站版本。
-
德國:https://www.mercedes-benz.com/de/
-
美國:https://www.mercedes-benz.com/en/
-
中國:https://www.mercedes-benz.com/zh/
在各地區頁面的 <head> 區域中,Mercedes-Benz 使用 Hreflang 標籤指示不同語言版本的對應關係
結語
在製作多語系、多國家的網站時,Hreflang 是多國語系網站 SEO 策略的核心工具。
透過正確設定 Hreflang 多國語系標籤,可以幫助搜尋引擎和使用者快速找到最符合當地語言和地區的頁面,幫使用者省下切換語言的困擾,同時降低跳出率!
同時我們也可以避免重複頁面導致 SEO 分數降低,並且讓整個網站更具備國際化的優勢,還能幫助提升跨國銷售的轉換率。
像 IKEA 和 Mercedes-Benz 這些大品牌的實例告訴我們,透過精準的語言與地區設定,網站可以同時服務全球不同的用戶,還能讓搜尋引擎更喜歡!
即使你剛開始學習 SEO 優化和 Hreflang 語系標籤,慢慢設定,也能讓網站在全球大放光彩!
如果對於跨國 SEO 有操作上的需求,愛思伯提供網站 SEO 語系標籤設置的相關服務,由專業的 SEO 分析師幫助你進行跨國 SEO 的調整。點此聯絡我們開始免費諮詢:SEO 優化&網站設計服務。