當企業開始面向全球市場銷售產品與服務，多語系網站的需求也隨之增加。然而，在開發多語系網站時，常會遇到必須根據使用者所在區域，呈現對應語言內容的情況，這時就需要導入國際 SEO的優化策略。
以 HTML 的 Hreflang tag 為例，透過正確設定 Hreflang，可以讓搜尋引擎更精準地對應語言與地區，提升網站在不同國家搜尋結果中的能見度。本篇文章將帶你掌握多語系網站開發的關鍵技巧，深入解析 Hreflang 的用途及設定，協助你打造真正貼近全球市場的網站。
多語系網站開發為什麼重要？
多語系網站可以為企業吸引到不同地區和語言的用戶，除了最直接的增加網站流量，也能幫助企業開拓國際市場。而絕大多數的用戶也會偏好以母語呈現且符合當地文化習慣的網站內容，這樣的網站不只能提供良好的瀏覽體驗，也能帶來更高的銷售轉換率。
想要建置多語系網站，不只是把原有的內容翻譯成其他語言這麼簡單。除了要提供符合用戶習慣的在地化內容，讓搜尋引擎能夠正確了解多語系網站內容，透過精確的語言和地區設定，確保 Google 搜尋引擎能更好地推薦網站內容給最合適的目標用戶，也是提升網站SEO 行銷表現的一大重點。
多語系網站開發重點：內容與技術優化
在多語系網站開發前期，最重要的工作就是規劃網域與網址架構。前期準備完成之後，後續就可以著重在內容與技術的優化，以下段落將介紹多語系 SEO 中的內容與技術優化重點。
多語系網站內容優化：融入當地文化與用語
1. 符合當地文化與語言習慣
內容不能只是直觀的翻譯，而是需要符合當地文化和語言習慣，才能讓用戶有良好的瀏覽體驗。就算同樣是英文，美式英文與英式英文還是存有差異。
2. 在地化關鍵字研究
推薦使用 Google Keyword Planner 或 SEMrush 等工具，針對目標市場進行關鍵字分析，找出真正符合當地人搜尋習慣的關鍵詞組。
3. 避免內容重複
針對不同地區提供差異化內容，避免因為內容重複而被 Google 判定為劣質網站。
多語系網站技術優化：Hreflang 與多語系 i18n 的應用
1. 設置 Hreflang tag
Hreflang tag 是針對多語系網站提供的 HTML 標記，可以清楚告知 Google 這個網頁對應的地區、語系是什麼。透過 Hreflang tag，可以讓 Google 在美國搜尋時顯示英文版本，在法國搜尋時顯示法文版本；同時也能避免不同語言或地區的內容被視為重複內容，影響 SEO 效果，以下將會有更詳細的解說。
2. 使用多語系 i18n 技術
i18n 是「internationalization」的簡寫，由於在字母「i」和「n」之間共有 18 個字母，因此簡稱 i18n。i18n 是一個在網站開發中常用的術語，指的是進行多語系網站開發前的的技術準備。其用意是將語言內容從程式碼中分離，包含語言資源管理（如 JSON、YAML）、動態文本插入、內容格式化等，為的是讓開發者可以快速為網站新增多種語言版本。
Hreflang 是什麼？提升多語系網站開發的最佳利器
Hreflang tag 是一種幫助搜尋引擎判斷用戶的所在地區及語系，以便顯示對應的語系給用戶的標籤，像是常見的 hreflang=”en-us”，就是用來指定當使用者來自美國時，網站應顯示英文內容，這也是提升多語系 SEO 表現的重要設定。
妥善運用 Hreflang tag，不僅能提升用戶體驗，也能優化各地區的網站 SEO 成效表現。Hreflang tag 的設定並不困難，只要確認語法、建立位置正確、避免常見錯誤，就可以讓網頁呈現出想要的語言。
以遊戲製造商 Nintendo （任天堂）為例，當用戶在台灣搜尋時，搜尋結果就會出現：https://www.nintendo.com/tw/；反之，當用戶在美國搜尋時，就會跳出 https://www.nintendo.com/us/ 的結果。
然而，究竟在什麼情況下，才會需要建立 Hreflang tag ？是所有網站都需要 Hreflang tag 嗎？
什麼時候會用到 Hreflang tag？
事實上，並不是所有網站都需要 Hreflang tag ，根據 Google 官方文件指出，當網站有服務「多語系」、「多國家」或「多語系+多國家」這 3 種情境時，就會建議建立 Hreflang tag 。
1. 多語系：適用於政府單位或國際組織，針對來自不同語言背景的使用者提供相同內容的翻譯版本。
2. 多國家：常見於跨國電商平台，依據不同地區提供在地化的服務內容、價格與促銷活動。
3. 多語系+多國家：多見於航空公司或大型跨國公司，如上面提到的任天堂，會依據用戶所在國家與語言偏好，同步調整網站內容與語言，提供最符合當地市場的使用體驗。
Hreflang tag 參數怎麼寫？
Hreflang tag 的基本格式不分大小寫，參數寫法為：hreflang=”語系-地區”。只要填入語系和地區的代碼，就可以完成 Hreflang tag 的組成。例如：
英文-美國：hreflang=”en-US”
中文-臺灣：hreflang=”zh-TW”
以任天堂網站為例，「在台灣要顯示中文」完整的語法就會寫作：
<link rel=”alternate” hreflang=”zh-TW” href=”https://www.nintendo.com/tw/”>
語法分別代表的意思是：
- link rel=”alternate” ：在標籤內的連結，是該頁面的替代版本。
- hreflang=”zh-TW”：該替代版本的語系是中文，地區是台灣。
- href=”https://www.nintendo.com/tw/”：替代版本的網址。
白話文翻譯這段語法就是，在這個標籤內的替代頁面是「https://www.nintendo.com/tw/」，而該頁面的語系是中文，地區是台灣。
接下來，讓我們進一步了解在語系和地區不同的情境下時，該如何標示才能讓 Hreflang tag 發揮作用。
Hreflang tag 不同情境的應用
1. 在不同地區，顯示不同語言
當用戶在不同地區時，顯示該地區的語言，是建立 Hreflang tag 時最普遍的情況。假設需求是「用戶在台灣時要顯示中文，在美國時要顯示英文，而在日本時要顯示為日文」，我們就會標示成：
- 在台灣，顯示中文：hreflang=”zh-TW”
- 在美國，顯示英文：hreflang=”en-US”
- 在日本，顯示日文：hreflang=”ja-JP”
zh、en 和 ja 分別是中文、英文及日文的語系代碼；TW、US 和 JP 則是台灣、美國和日本的地區代碼。
2. 在相同地區，顯示不同語言
有些國家會有 2 種以上的官方語言，比如說加拿大政府承認英文和法文；有些則是語言沒有完全相同，可是該地區的用戶也能理解，像是台灣學習的是繁體中文，同時也能理解簡體中文一樣。
若以加拿大的情況而言， Hreflang tag 就會標示成：
- 在加拿大，顯示英文：hreflang=”en-CA”
- 在加拿大，顯示法文：hreflang=”fr-CA”
若要在台灣分別顯示繁體中文和簡體中文時，則需要增加 script 參數來表示語系的差異：
- 在台灣，顯示繁體中文：hreflang=”zh-hant-TW”
- 在台灣，顯示簡體中文：hreflang=”zh-hans-TW”
3. 在不同地區，顯示相同語言
反過來說，有些地區會共同使用一樣的語言時，只要調整地區代碼即可。比如說，要分別在加拿大、比利時和法國，都顯示法文時，就可以標示成：
- 在加拿大，顯示法文：hreflang=”fr-CA”
- 在比利時，顯示法文：hreflang=”fr-BE”
- 在法國，顯示法文：hreflang=”fr-FR”
講到這裡或許您會發現，語系及地區的代碼百百種，為了幫助搜尋引擎正確判斷，我們可以在國際標準化組織 ISO 639-1 查詢語系代碼，以及在 ISO 3166-1 查詢地區代碼。
建立 Hreflang tag 的 5 大重要性！
建立 Hreflang tag 其實並不難，就是有點麻煩，而且 Google 也有提到就算沒有設定，他們仍會自行尋找替代的語言版本。既然如此，又何必大費周章的設定 Hreflang tag？
事實上，Google 的確有這麼說，但根據 SEO 的核心價值，以及品牌經營的層面來看，建立 Hreflang tag 仍有一定程度的重要性，主要有以下 5 個重點：
- 提升用戶體驗
- 降低用戶跳出率
- 避免競爭到相同關鍵字
- 避免重複內容
- 避免影響到網站不同語系的 SEO
SEO 的核心價值是提供用戶高品質的內容，顯示用戶使用的語言，協助用戶理解網站內容，這樣的語言在地化與內容優化，也是打造出色使用體驗的重要關鍵。
如果我們向使用中文的用戶，顯示日文時，用戶除了會感到一頭霧水而跳出網站之外，還會對網站留下不會顯示中文的既定印象，影響日後回訪意願。不僅如此，沒有建立 Hreflang tag 時，除了會讓搜尋引擎誤以為有重複內容，還可能影響多語系網站的 SEO 表現。
多語系網站網域&網址架構與 Hreflang Tag 的搭配應用
多語系網站網域規劃：gTLD 與 ccTLD 的選擇
Google 搜尋引擎會依照網域的「頂級網域（Top-Level Domain，TLD）」來判定網站的目標受眾是否明確，而 TLD 又分為「通用頂級網域」與「國家代碼頂級網域」這 2個類型。
- 通用頂級網域（Generic Top-Level Domain，gTLD）：是指沒有地理意涵，針對全球市場的網站，這類網域的常見結尾像是 .com、.net、.org 等。
- 國家代碼頂級網域（Country Code Top-Level Domain，ccTLD）：則是具有地理意涵的網域，會使用國家代碼當結尾，例如：.tw（台灣）、.fr（法國）、.jp（日本），適合想在不同市場做在地化經營的企業。
多語系網站網址架構：3 種主要設計方式
選定網域類型以後，網址架構的設計也是多語系網站開發的另一個重要環節。以下介紹 3 種最常見的網址架構選擇：
1. 以 ccTLD 區隔語系：example.tw、example.fr
這種方式對搜尋引擎來說具有最強的地理意涵，能清楚表明網站內容是針對特定的地區或語系，因此 SEO 表現最佳。但由於需要為每個地區設置獨立的網站，網站的建置與維護成本相對較高。
2. 以 gTLD 搭配子網域：tw.example.com、fr.example.com
這種網址設計方式同樣具有清晰的結構，可以區分不同語言和地區的內容，優點是建置與維護成本比 ccTLD 更低；缺點是不同的子網域沒辦法跟主網域共享 SEO 權重，每一個子網域都會需要單獨累積流量。
3. 以 gTLD 搭配子目錄：example.com/tw/、example.com/fr/
這種網址設計方式可以讓多個子目錄共享主網域的 SEO 權重，建置與維護成本最低；缺點是地理意涵不如前面兩種強。如果是資源有限的中小型企業，且網站內容是以語言作為主要區分的話，選擇此種方式相對適合。
| 架構類型 | 國家代碼頂級網域 | 子網域 | 子目錄 |
| 範例 | example.fr | fr.example.com | example.com/fr/ |
| 優點 | 地理意涵最強烈，SEO 表現最佳。 | 區隔清晰，可獨立管理，不影響主網域。 | 共享主網域的 SEO 權重，建置與維護成本低。 |
| 缺點 | 建置與維護成本最高，需為每個地區單獨設置。 | 無法與主網域共享 SEO 權重，需重新累積流量與排名。 | 地理意涵較弱，SEO 效果較差。 |
如何建立 Hreflang tag？
埋放 Hreflang tag 的 3 個位置分別是：「HTML」、「Sitemap.xml」與「HTTP Header」。目前普遍是建立在 HTML，如果對 Hreflang tag 不太熟悉，建立在 HTML 是相對簡單的作法。無論建立在哪個位置，呈現出來的效果都大同小異，選擇自己習慣的方式即可。
1. HTML
在 HTML 建立 Hreflang tag ，需要放置在 <head> 和 </head> 區塊之間。
假設網站的需求是「原本為中文的網站內容，在台灣時要提供中文頁面，在美國時要顯示英文頁面。」完整的語法就會寫成：
<head>
…
<link rel=”alternate” hreflang=”zh-TW” href=”https://example.com/”>
<link rel=”alternate” hreflang=”en-US” href=”https://example.com/us/”>
…
</head>
2. XML Sitemap
第二種方式是在 Sitemap （網站地圖）建立 Hreflang tag ，主動提交不同語系和地區的頁面給搜尋引擎。
首先需要在 <loc> 和 </loc> 區塊之間，放入指定連結，接著在 <xhtml> 列出所需要的語系和地區版本的 Hreflang tag 。
要特別注意的是，如果網頁有 3 種版本，就需要提供各個版本的網址，且每個項目都要有 3 個相同的子項目。
同樣以中文網站，要在台灣和美國，分別顯示出中文及英文為例，完整的語法就會寫作：
<?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://example.com/</loc>
<xhtml:link
rel=”alternate”
hreflang=”zh-TW”
href=”https://example.com/”/>
<xhtml:link
rel=”alternate”
hreflang=”en-US”
href=”https://example.com/us/”/>
</url>
<url>
<loc>https://example.com/us/</loc>
<xhtml:link
rel=”alternate”
hreflang=”zh-TW”
href=”https://example.com/”/>
<xhtml:link
rel=”alternate”
hreflang=”en-US”
href=”https://example.com/us/”/>
</url>
</urlset>
3. HTTP Header
最後一種方法通常用在非 HTML 頁面，比如說 PDF 檔案。
如果 PDF 檔案要依地區顯示出不同語言時，就可以在 HTTP Header 中建立 Hreflang tag ，當使用者送出 GET 請求時，便能給出對應的語系文件。
假設目前有一份財務報表.pdf，分別要在台灣顯示為中文，其他地區顯示為英文，完整語法則寫作：
Link: <https://www.example.com/tw/file.pdf>; rel=”alternate”; hreflang=”zh-tw”,
<https://www.example.com/en/file.pdf>; rel=”alternate”; hreflang=”en”
Hreflang 應避免的 6 個常見錯誤
建立 Hreflang tag 並沒有想像中複雜，可是第一次建立沒那麼熟悉時，就有可能出現錯誤。為了省去後續修正的麻煩，設定完成後，記得檢查有沒有出現以下 6 個常見錯誤吧！
常見錯誤 1. 忘記設定網頁原本的語系
Hreflang tag 有雙向運作的特性，意思就是當我們有 N 種語言要顯示時，所有語言都要互相指向，才能發揮作用。因此，寫好不同語系、地區的語法後，務必檢查「網頁原本的語系」是否也有設定 Hreflang tag。
如果忘記設定網站原本的語系，不僅會影響 Hreflang tag 運作，也會造成讀者看不到網站原本的內容，影響本地 SEO 排名表現。
常見錯誤 2. 語系和地區代碼輸入錯誤
設定 Hreflang tag 時，語系及地區代碼一定要輸入正確，而且要記得語系可以單獨設定，但是地區不行，如果只設定了地區代碼，可能會出現語系錯亂的問題。最常見的例子就是把英國的代碼寫成「UK」，但其實正確的代碼是「GB」。還有原本是想寫國家比利時，卻因為只有單獨寫「be」，而顯示成同樣代碼的白俄羅斯語。
建議設定完成時，一定要再去國際標準化組織 ISO 639-1 和 ISO 3166-1 檢查代碼。
常見錯誤 3. 沒有輸入完整的指定網址
Hreflang tag 中的替代頁面網址，一定要完整寫出帶有「https://」或「http://」的絕對網址，不能寫成只有網址末端的相對網址，否則 Google 會找不到指定的網址而出現錯誤。比如說，當替代網頁的網址為：https://example.com/ 時，就要完整寫下：https://example.com/ ，不可以寫成：example.com。
常見錯誤 4. 沒有設定全部的頁面
只要有想要顯示出特定語系或是特定地區的頁面時，就要設定 Hreflang tag ，以免 Google 無法完整知道網站內容該如何分配而出現錯誤。
常見錯誤 5. 語系國家重複設定、指向不同網址
建立 Hreflang tag 時，相同的語系和國家只要設定一次就好，而且一個網址只能對應一種語系。舉例來說，當今天要設定中文和日文時，正確的寫法應為：
<link rel=”alternate” hreflang=”zh-TW” href=”https://example.com/”>
<link rel=”alternate” hreflang=”ja-JP” href=”https://example.com/jp/”>
不可以寫成：
<link rel=”alternate” hreflang=”zh-TW” href=”https://example.com/”>
<link rel=”alternate” hreflang=”zh-TW” href=”https://example.com/”>
<link rel=”alternate” hreflang=”ja-JP” href=”https://example.com/jp/”>
也不可以寫成：
<link rel=”alternate” hreflang=”zh-TW” href=”https://example.com/”>
<link rel=”alternate” hreflang=”ja-JP” href=”https://example.com/”>
常見錯誤 6. 在 noindex 頁面中，設定 Hreflang tag
最後一點則是在不會被 Google 搜尋引擎索引到的 noindex 頁面中，設定了 Hreflang tag 。如果在不會出現於搜尋結果頁的頁面中，設定了要顯示特定語系的指令，就會使兩者互相牴觸，導致兩個指令都失效。
2 個使用 Hreflang 多國語言網站實際案例分享
現在我們已經對 Hreflang tag 有了全面性的認識，接下來就從企業網站上看 Hreflang tag 的實際應用方式吧！
實際案例 1. Nintendo
Nintendo （任天堂）是一家國際遊戲製造商，從遊戲軟體到硬體設備通通都有，市場遍布全球各地。因此，為了讓更多消費者成為任天堂的用戶，任天堂的官方網站便設有 12 種語系，以及 32 個國家的 Hreflang tag 。
實際案例 2. mercari
Mercari（煤爐）是日本一個二手交易平台，以動漫周邊、模型等商品為大宗，主要流量來自於日本、美國及台灣，因此網站設定了日文、英文和中文等 3 種語系，幫助更多用戶在平台上交易及販售。
多語系網站開發常見問答
Q1. 如何在 Google 搜尋切換國家或地區設定？
使用者可以透過 Google 搜尋設定更改地區與語言偏好；網站則可以透過 hreflang 標籤或 Sitemap，確保搜尋引擎能對應到正確的語言版本。
Q2. 如何在網站加入多國語言？可以用自動翻譯嗎？
自動翻譯可能會導致語法錯誤或詞意不清，影響用戶體驗及 SEO 排名，因此通常會建議聘請專業翻譯人員，來提供高品質的網站內容。
Q3. 多語系網站需要提供多少個語言版本？
這取決於企業的市場和目標用戶需求。由於多語系網站的開發需要成本，通常建議針對核心市場提供主要語言版本即可。一般來說，全球化品牌通常會提供英文、西班牙文和中文版本，如果未來需求有增加，再逐步增加語言版本。
Q4. 多語系網站使用子網域和子目錄有什麼差別？
子網域（例如：en.example.com）的地理意涵較強烈，但是 SEO 權重需要單獨累積，適合對不同語言或地區進行獨立管理。子目錄（例如：example.com/en/）的地理意涵相對較弱，但因可以與主網域共享權重，適合希望降低管理成本的網站。
多語系 SEO 是企業邁向全球市場的重要策略，而 Hreflang 標籤正是其中不可忽視的關鍵技術。不僅能針對不同語言與地區進行精準內容呈現，避免重複內容與流量分散，更能提升網站在各地搜尋引擎的曝光表現。透過合理規劃網域與網址架構，結合 Hreflang tag，將能大幅優化多語系網站的 SEO 成效。
若對於多語系網站開發或對於多語系網站 SEO 優化有任何疑問，歡迎立即與 DRM 聯繫。您可填寫聯絡我們表單或是透過DRM Line@諮詢，讓我們為您一起深耕行銷市場！
