fbpx

網站如何自動偵測語系跳轉頁面


international-mother-language-day_21213

來源 http://www.filcatholic.org/

早期網站或服務對於各種語言的使用者,在首頁都會出現一個選擇語系的畫面,這樣的設計已經非常過時,使用體驗很差。現在很多網站都是使用單一網址,當使用者進到網頁後,程式會自動判定瀏覽器所設定的語系進行轉頁,原理其實是透過判斷 HTTP Request 中的 Accept-Language Header 設定來實現,詳細規範可以參考 RFC-2616 (14.4 Accept-Language) 章節。

那麼如何設計自動判定語系跳轉頁面的功能呢?假設我們不同語系的入口網址設計如下:

  • 繁體中文:http://domain.com/zh-TW/
  • 簡體中文:http://domain.com/zh-CN/
  • 預設英文:http://domain.com/en-US/

要實現判斷使用者語系自動跳轉網頁有兩種方法,一種為不需要 HTTP Server 的設定,直接透過 JavaScript 進行跳轉。範例程式碼如下 (GitHub),可以把這樣的程式放在 index.html 首頁,使用者進入厚就會自動跳轉,由於是透過 JavaScript 實現,如果 JavaScript 功能被關閉當然就 GG 惹!

上述使用 JavaScript 轉頁的方法雖然比較簡單,但是對於 SEO (搜尋引擎最佳化) 是比較不友善的做法,因為首頁 index.html 變成一個只能專門用來跳轉頁面的程式碼,對於搜尋引擎 Index 的建立與搜尋結果都不佳。

再來介紹第二種方法,透過 HTTP Server 判定 Header 來跳轉,這樣的方法不需要在 http://domain.com 回傳任何,僅需要送出正確的 302 讓瀏覽器自動跳轉即可,這樣的方法對於搜尋引擎是最友善的,可以正確的在不同國家顯示對應的搜尋結果。

以 Nginx 為例 (有好一陣子沒用 Apache 了),可以在設定檔中加入以下設定 (GitHub),這個版本已經有考慮 Request 透過 Proxy 的重導問題,對於大型的分散式架構也可以正確執行。

 

這樣一來,當使用者連線到 http://domain.com 就會自動偵測 HTTP Header 然後回應 302 讓瀏覽器跳轉,測試的時候要注意,由於瀏覽器通常都會有 Cache 機制,比較保險的測試方式可以透過以下 CURL 命令來模擬瀏覽器發送封包,確認設定後 Server 回應封包是正確的。

curl 'http://domain.com/' -H 'Accept-Language: zh-TW,zh;q=0.8,en-US;q=0.6,en;q=0.4' -v

最後提醒一下,不同語系頁面的 HTML 記得在 Head Tag 標註各種語系的 hreflang 設定 URL,SEO 才會比較友善喔。如下:

收工!