Hreflang 介紹：多語言的網站架構應該要如何設計？

如果你今天希望做海外生意，讓網站不只一個語言版本，那應該要怎麼做？此時我們就需要設定多國語言的網站設定。

透過網站架構跟 hreflang 設定，就能幫助你的多國語言網站版本提供給正確的消費者觀看。

---

如果網站要有很多語言，要怎麼做？

多數人網站都只會有本地語言的，可能繁體中文、簡體中文、香港中文；但如果今天你的生意越做越大，想要做海外生意，網站除了原本的語言之外，你還想加入日語、英語、法語……，那網站要怎麼設計呢？

方法一：資料夾（子目錄）

第一種常見的方法是用網域後面，開不同語言的資料夾（子目錄）。用學校來比喻的話，就是在一所學校內區分不同的校區，我們可以來看 Apple 官網怎麼設定的。

台灣：https://www.apple.com/tw/
日本：https://www.apple.com/jp/
新加坡：https://www.apple.com/sg/

這些不同的語言都是掛在同一個網域「apple.com」底下，所有的外部連結、內容權重，也都會累積在同一個網域底下；多數品牌都會採取這個做法，我個人也比較推薦這個做法。

SEO 累積性：最佳。

---

方法二：不同網域

另一個方法就是不同的網域，用學校來比喻的話，就是直接蓋新的學校，學校跟學校之間沒有直接關係，我們來看看 Amazon 怎麼規劃不同語言的網站。

美國：https://www.amazon.com/
日本：https://www.amazon.co.jp/
英國：https://www.amazon.co.uk/

這幾個看起來很相似，但實際上這就是三個彼此獨立的網域，因為每一個都是不同的「地區頂級域名」，每一個都需要自己從零開始累積實力。

就像是 frankchiu.io 與 frankchiu.com 就是兩個不同的人，儘管長得有點像，但不一樣就是不一樣。

SEO 累積性：最差。

---

方法三：不同子網域

使用子網域來建立不同語言或地區的網域，也是一個方法。但這在最近已經比較少人這樣使用了，我們來看看維基百科的例子。

繁中：https://zh.wikipedia.org/
日文：https://ja.wikipedia.org/wiki/%E3%83%A1%E3%82%A4%E3%83%B3%E3%83%9A%E3%83%BC%E3%82%B8/
英文：https://en.wikipedia.org/wiki/Main_Page/

我們可以看到，它的主網域都是「en.wikipedia.org」，而不同語言則採用了不同的子網域來處理。

在這種情況下，SEO 的累積性會比較曖昧，會介於使用子目錄（資料夾）與完全新的網域之間，屬於折衷的作法。

SEO 累積性：普通。

---

小結

如果你的網站沒有特殊狀況或需求，建議使用方法一：資料夾（子目錄），來建立多語系的網站架構；這樣在數據分析上也會比較單純、好管理。

另一方面，現在你去逛各國的網站，應該多少都能看懂網址結構了，恭喜你成為更優秀的 SEO 人！

---

多語系的 SEO 設定

學完了上述概念後，我們就能進入下個正題：多語系多區域的 SEO 設定。

1. 利用網域設定地區

前文的三種不同的網址結構跟作法，除了方便我們管理網站以外，更是提供搜尋引擎地區性的訊號，讓搜尋引擎知道：我是哪個區域的，請你把這些內容給這個區域的人看。

好比說，因為「https://www.amazon.co.jp/」裡面有 jp，所以這個該給日本區域的人看；因為「https://www.apple.com/tw/」裡面有 tw 的子資料夾，所以應該要給台灣地區的人看。

上面的三種方法都能做到這件事情，關於這件事的更多資訊可以參考 Google 的官方文件《管理多地區和多語言版本的網站》。

---

2. hreflang 註解

hreflang 是一個能標註網址語言屬性的註解，能幫助搜尋引擎了解這個網頁是用什麼語言撰寫的，如果是多語言網站一定要設定這個標籤。

在 HTML 語言中，”hreflang” 是一個用於指定頁面語言的屬性。它由兩個部分組成：”href” 和 “lang”。

“href” 是指超文本參考（HyperText Reference）的縮寫，這在 HTML 中被用來指定超連結的目標 URL。

“lang” 則是語言（language）的縮寫，它被用於指定文檔的語言。

因此，hreflang 屬性要表達的是：這個超連結的目標 URL 是用哪種語言編寫的。搜索引擎使用 hreflang 屬性來判斷，同一內容在不同語言中的對應頁面，以便在使用者進行搜尋時提供最適合的語言版本。

關於 hreflang 的更詳細資料以及執行細節，可以參考 Google 官方網頁《向 Google 說明網頁的本地化版本》[2]。

---

實際舉例

現在我們有兩個網頁，同樣的內容，但分別是以法文跟英文撰寫的。

<link rel="alternate" hreflang="en" href="https://example.com/en/page" />
<link rel="alternate" hreflang="fr" href="https://example.com/fr/page" />

這兩個網址的翻譯如下：

網址：<link rel=”alternate” hreflang=”en” href=”https://example.com/en/page” />

• 這個網址代表英語版本的頁面。
• hreflang=”en” 表示這個頁面是以英語（”en”）作為主要語言的版本。
• href=”https://example.com/en/page” 則指定了這個英語版本頁面的 URL，即 “https://example.com/en/page”。

網址：<link rel=”alternate” hreflang=”fr” href=”https://example.com/fr/page” />

• 這個網址代表法語版本的頁面。
• hreflang=”fr” 表示這個頁面是以法語（”fr”）作為主要語言的版本。
• href=”https://example.com/fr/page” 則指定了這個法語版本頁面的 URL，即 “https://example.com/fr/page”。

---

如果你點開 Apple 的官方網頁，你也能看到各語言的 href 設定。

連結：https://www.apple.com/tw/tv-home/

<link rel="alternate" href="https://www.apple.com/ae-ar/tv-home/" hreflang="ar-AE">
<link rel="alternate" href="https://www.apple.com/es/tv-home/" hreflang="es-ES">
<link rel="alternate" href="https://www.apple.com/eg/tv-home/" hreflang="en-EG">