Ranking 小編
2023/03/21
瀏覽次數

多語系網站必備:Hreflang Tag 的 SEO 應用一篇讀懂!

Hreflang 是什麼?Hreflang 的用途為何?Hreflang 怎麼設定?本文將為大家介紹 Hreflang 的用途與實際語法撰寫,帶領大家揭開多國語系網站建置的面紗!

HTML Meta Tags 攻略一文中,我們介紹到了 Hreflang Tag 是向搜尋引擎說明不同語種、地區的網頁版本之間的關係。對於經營多語系網站、經營跨國 SEO 的 SEOer 來說,這是個相當重要的 Meta 標籤!以下為大家整理 Hreflang 全資訊,從觀念、實際撰寫到多語系網站的應用一次帶你看!

 

多語系網站的指引標記:Hreflang Meta Tag

(一) Hreflang 標籤的主要功能是什麼呢?

若網站在不同地區經營,會有對應語種的版本。但你是否想過,搜尋引擎是如何根據搜尋用戶的所在地區,給予對應語言的網頁呢?以 Apple 官方網站為例,若用戶在台灣進行搜尋「Apple」,會得到台灣版本的結果(參下圖):

01_Hreflang Tag 示意

 

如果是德國的用戶在 Google 搜尋「Apple」則會得到德國版本的結果(參下圖):

02_Hreflang Tag 示意

 

在台灣進行搜尋,Google 並不會給予德國版的網站,這除了搜尋引擎預設的語言影響外,Hreflang 標籤也發揮了很大的作用。Hreflang 會協助搜尋引擎判斷網頁對應的國家地區以及語系,以提供給該語系的使用者相符結果頁面、滿足其搜尋需求。

 

而為什麼 Hreflang 對於 SEO 很重要呢?最直覺來說,提供使用者他們看得懂的內容會直接影響網頁的點擊率停留時間跳出率等排名要素。另外還有一個很常被忽略的因素:避免被視為重複內容

 

➤ 了解更多 SEO 影響要素:SEO 是什麼?2023 SEO 搜尋引擎優化指南,5分鐘了解 SEO 行銷!

 

同樣以 Apple 的網站舉例來說,法國與加拿大法語區的用戶搜尋分別會得到「法國法語」以及「加拿大法語」的搜尋結果。以語種來看,兩邊網站內容大致會是一樣的(都以法語撰寫),但仍有部分內容根據當地狀況而不同(例如:商品計價的貨幣、當地銷售據點)。若沒有針對這兩種版本設定 Hreflang,搜尋引擎很可能會因為大部分內容相同而判定其為重複內容,在使用法語用戶進行搜尋時只給予其一的搜尋結果;Hreflang 則可以向搜尋引擎宣告不同語系、不同地區網站的關係,並建立關聯性

 

➤ 了解重複內容對 SEO 的影響:善用 Canonical 語法,避免網站重複內容影響 SEO 排名

 

(二) 跨國網站應用 Hreflang 的情境

網站什麼時候需要設定 Hreflang 標籤呢?主要可以分為三種情境:

1. 多語系

如政府單位或國際組織,向不同語種的使用者提供資訊。

 

2. 多國家

如跨國電商平台,在不同地區提供服務。

 

3. 多語系+多國家

多為航空公司或大型跨國公司,如上面提到的 Apple。

從 Apple 的例子可以看到,Hreflang 屬性由兩個參數所組成:語言與地區,兩者之間以「-(連字號)」進行分隔。以中文版網站為例,「zh」代表的是中文、「TW」代表台灣、「HK」代表香港。透過兩種不同參數便可以組成對應語種的 Hreflang 標籤。目前語言代碼採用 ISO 639-1 格式;地區代碼採用 ISO 3166-1 Alpha 2 格式。

 

Hreflang 實際操作教學:3 種 Hreflang Tag 標記方式

介紹完 Hreflang 使用的情境與組成之後,接下來跟大家分享 Google 官方文件建議的三種設定 Hreflang 方式。請注意,官方文件有特別說明這三種方式取其一進行就好,三個方式都設定並不會讓效果特別好喔!

  • HTML Meta Tag
  • HTTP/HTTPS 標頭
  • Sitemap

 

1. HTML Meta Tag

第一個方式是在 HTML <head> 區塊新增 Meta Hreflang 標籤。實際語法為:

<head>

<link rel=”alternate”  href=”網頁 URLhreflang=”語言代碼”>

</head>

 

以 Ranking 為例,若要宣告網站主要提供給台灣使用中文的用戶,可以撰寫以下語法:

<head>

<link rel=”alternate”  href=”https://ranking.works/hreflang=”zh-TW”>

</head>

 

2. HTTP 標頭

設定於 HTTP 標頭,當使用者送出了 GET 的請求給網頁時,網頁能根據其請求的語種回傳對應的版本。此種方法適用於非 HTML 的檔案類型(如 PDF),寫法如下:

Link: <檔案 URL (語種1)>;rel=”alternate”;  hreflang=”語種1”,

<檔案 URL (語種2)>;rel=”alternate”;  hreflang=”語種2”,

<檔案 URL (語種3)>;rel=”alternate”;  hreflang=”語種3

 

若 Ranking 提供了一份 SEO 白皮書(.pdf),分別有中文(台灣)、英文(不指定地區)、日文(不指定地區)三種版本,就可以設定下語法:

Link: <http://ranking.works/tw/file.pdf>;rel=”alternate”;  hreflang=zh-TW”,

<http://ranking.works/en/file.pdf>;rel=”alternate”;  hreflang=”en”,

<http://ranking.works/jp/file.pdf>;rel=”alternate”;  hreflang=”jp

 

3. Sitemap

最後一個方式,是可以使用 XML Sitemap 告知搜尋引擎網站語言和地區的版本變化。其作法是在 Sitemap 中新增 <loc> 元素來指定網址,並列出每個版本的 <xhtml> 子元素。

 

➤ Sitemap 基本概念:Sitemap是什麼?一次掌握Sitemap網站地圖製作與提交流程!

 

以下以 Google 官方文件的網站示意為例:假設有一個網站向英文使用者提供英文內容、向德文使用者、瑞士地區的德文使用者提供兩種德文版網頁,且三者內容相同。

  • 英文使用者:www.example.com/english/page.html
  • 德文使用者:www.example.de/deutsch/page.html
  • 瑞士地區德文使用者:www.example.de/schweiz-deutsch/page.html

 

那麼這三個網頁的 Sitemap 寫法會如下:

<?xml version=”1.0″ encoding=”UTF-8″?>

<urlset xmlns=”http://www.sitemaps.org/schemas/sitemap/0.9″

  xmlns:xhtml=”http://www.w3.org/1999/xhtml”>

  <url>

    <loc>https://www.example.com/english/page.html</loc>

    <xhtml:link

               rel=”alternate

               hreflang=”de

               href=”https://www.example.de/deutsch/page.html“/>

    <xhtml:link

               rel=”alternate

               hreflang=”de-ch

               href=”https://www.example.de/schweiz-deutsch/page.html“/>

    <xhtml:link

               rel=”alternate

               hreflang=”en

               href=”https://www.example.com/english/page.html“/>

  </url>

  <url>

    <loc>https://www.example.de/deutsch/page.html</loc>

    #同上 <xhtml> 區塊寫法

  </url>

  <url>

    <loc>https://www.example.de/schweiz-deutsch/page.html</loc>

    #同上 <xhtml> 區塊寫法

  </url>

</urlset>

 

Hreflang 注意事項補充,這 3 個細節別忽略!

說明完了實際語法,另有 3 個很常被忽略的眉角需要注意。這些細節會對 Hreflang 的影響很大,請務必注意!

 

1. 每個語種的網頁都要設定、自身網站的語種也別忘

Hreflang 的標籤是互相指向的,什麼意思呢?如果網站有三個語種的版本,在這三個語種的 Hreflang 設定中,都要設定三個網址的 Hreflang。若忽略任何一條指向,Hreflang 是不會發會作用的。

舉例來說,若 Ranking 提供三個語種版本,分別為中英日文,在三個網站中都應該設定如下語法:

<link rel=”alternate”  href=”https://ranking.works/tw/hreflang=”zh-TW”>

<link rel=”alternate”  href=”https://ranking.works/en/hreflang=”en”>

<link rel=”alternate”  href=”https://ranking.works/jp/hreflang=”jp”>

 

❌錯誤示範:若中文少設定了自己的網址,只設定英文與日文

<link rel=”alternate”  href=”https://ranking.works/en/hreflang=”en”>

<link rel=”alternate”  href=”https://ranking.works/jp/hreflang=”jp”>

就算英文版與日文版有設定 hreflang=”zh-TW,也會因為中文版沒有設定能夠被指向的 Hreflang 標籤,而無法發揮效果。

 

2. 語言與地區代碼要依循規範,且一種網址只能對應一種語種

語言與地區代碼切記要依循規範,若輸入錯誤(把中文輸入成「zg」等不存在的代碼)可不會有人提醒你喔!另外,一個網址只能對應一種語種,才不會導致搜尋引擎判斷失效

❌錯誤示範:中文版網址對應到了兩個語種

<link rel=”alternate”  href=”https://ranking.works/tw/hreflang=”zh-TW”>

<link rel=”alternate”  href=”https://ranking.works/tw/hreflang=”jp”>

 

3. Hreflang x-default 標籤屬性

設定 x-default 屬性會讓網頁在沒有使用者搜尋的語種版本時,被導向對應設定的網頁。沒有設定 x-default 並不影響已設定的 Hreflang 標籤發揮作用,但 Google 官方文件是建議要設定此屬性喔!

舉例今天若有俄文使用者搜尋 Ranking,因為 Ranking 沒有提供俄文的版本,若我們設定 x-default 對應的網站是英文版的,則俄文搜尋的用戶就會被導向英文版。

<link rel=”alternate”  href=”https://ranking.works/tw/hreflang=”x-default”>

 

 

多語系網站實際應用情境:不同連結形式與 Hreflang 的配合應用

介紹完 Hreflang 後,我們也整理了多語系網站的應用給讀者們參考,包含了網址不同設定的方式與其特點,最後也有兩間企業網站的實際案例,看完就能更理解多語系網站是如何運作的!

 

(一) 多語系網站 4 種連結設定方式

1. 網址參數

直接透過網址參數進行區分,延續上方 Ranking 網站中英日的假設:

  • 中文:https://ranking.works/?lang=tw
  • 英文:https://ranking.works/?lang=en
  • 日文:https://ranking.works/?lang=jp

此方式貌似滿清楚的,但缺點是會和其他參數混雜,如 utm、fbcid 等。若進行網站資料分析容易受到影響。

 

2. 資料夾(Subdirectory)

同一組網址開不同資料夾,即不同語種網頁實際上是在一樣的網址:

  • 中文:https://ranking.works/tw/
  • 英文:https://ranking.works/en/
  • 日文:https://ranking.works/jp/

所有語種建立在同樣的網址上,等於 SEO 成效能被共享,因此是操作 SEO 建議的方式!

 

3. 子網域(Subdomain)

  • 中文:https://tw.ranking.works
  • 英文:https://en.ranking.works
  • 日文:https://jp.ranking.works

子網域可以指向不同主機,便於技術人員管理,且能獲得不同的技術資料以便分析。

 

4. ccTLD

ccTLD 全稱「國家和地區頂級域,country code top-level domain」,字面上便知是以國家作為分界的域名。可以參考這邊的國家頂級域名單

  • 中文:https://ranking.works.tw
  • 英文:https://ranking.works.en
  • 日文:https://ranking.works.jp

使用 ccTD 對當地 SEO 操作很有利,不過建議在開始建置網站時就得先規劃好、買好網域。若後期才想以此方式,可能會有架構不合或是網域被買走的狀況。

 

(二) 多語系網站案例:HTML 實際語法參考

1. Apple

03_多語系網站開發案例

從上圖可以看出,Apple 網址設定上是採用不同資料夾的方式,便於累積 SEO 成效。且排序明確、設定清楚,高達上百個語種設定卻不會讓人混亂,不妨可以參考!

 

2. Pinkoi

* The website and the photos credited to Pinkoi

04_多語系網站開發案例

Pinkoi 採取的則是子網域的做法,使用者也能主動在網頁上選擇想要瀏覽的語言進行切換。不同語種的內容呈現上也所不同,利於不同地區的在地化經營。

 

結語

以上是關於 Hreflang 與多語系網站的相關內容。可以發現,不管在 Hreflang 的標籤設置上,或是在網址架構的安排上都有許多細節要注意,一有忽略便可能影響 SEO 甚至整個網站架構!

若對於跨國 SEO 有操作上的需求,Ranking 提供了網站建置與跨境 SEO 操作,由專業的團隊與技術同仁打造完整服務,協助你建置最完整的多語系網站服務,點此預約諮詢:SEO 服務專案網站建置

關於 Ranking 小編:

期許用深入淺出的方式帶你進入 SEO 世界,提供實用性高的優質文章,簡化 SEO 複雜流程及技術,讓每個人都能快速理解 SEO 行銷,一起登上 Ranking 火箭讓排名再創高峰!※若有行銷相關問題或者業務合作歡迎隨時與我們聯繫!

其他人也看了...

想透過 SEO 提升品牌曝光度及網站流量,並獲得更多商機嗎?
SEO 專家|Ranking 提供全方位解決方案,讓你排名一飛沖天!

預約顧問諮詢

請您選擇感興趣的服務,並留下聯繫資訊,我們將於三個工作天內聯繫您,讓你品牌一躍上首頁!