邁向國際市場,打造多語系網站必備 SEO Checklist

亞洲最大英文民宿訂房網站上線拉!

AsiaYo 隨著服務擴展到不同市場,首要任務之一就是打造不同語言使用者都能順利使用的多語系網站。作為進入新市場與擴展多語系的基礎語言,英文是 AsiaYo 最先實作的語言,而我們的英文網站在二月初也正式上線了!

除了網站內容在地化,如何讓搜尋引擎辨認網站/網頁所屬語系、順利收錄索引也是非常重要的事情,這裏順手整理 AsiaYo SEO 相關實作跟大家分享交流。


前情提要

  • AsiaYo 同時有桌面版本的網址 (https://asiayo.com,簡稱 PC web) 及行動版本 sub-domain (https://m.asiayo.com,簡稱 mobile web),並會在偵測到使用者以行動裝置瀏覽網站時,重新導向使用者到 mobile web。(RWD 就沒多網址 SEO 問題,我們目前還沒有實作這部分。)
  • 在資源分配的考量上,AsiaYo 主要關注 Google 搜尋引擎優化,也是本篇文章討論範疇。
  • 在英文版網頁未上線前,SEO team 就已設置了網站 sitemap

AsiaYo 五個跨國網站 SEO 實作項目

簡單來說,AsiaYo 為多語系網站準備以下幾個項目:

  1. 增加多語系情境易讀性,重設網址結構
  2. 協助排名權重分配,設置 canonical url
  3. 標記網頁語系,設置 alternate hreflang 屬性
  4. 增加多語系情境易讀性,設置結構化資料
  5. 加速 Google 收錄索引,設置 sitemap

1. 增加多語系情境易讀性,重設網址結構

為何要重設網址結構?

多語系的網址設計,AsiaYo SEO 大概考量幾個面向:

  • 易讀性:包含中文的網址結構可能會讓多語系使用者感到困惑,所以改版後都使用英文。
  • 編碼:盡量不使用需要編碼的字符(中文、特殊符號),減少在 DNS 可能會遇到的麻煩;內部使用者(行銷、管理階層)在使用流量分析工具時的可讀性也比較好。
  • 以階層代替參數:像是語系、國家、城市等固定、較不會變動的資料,AsiaYo 都是以階層目錄(directory),而非參數(parameter)處理。

範例

AsiaYo 舊版本的網站,旅宿列表網址格式是這樣子的:

https://asiayo.com/itemlist_{中文城市名稱}.html

改版後旅宿列表網址格式:

https://asiayo.com/{iso-format-語系標籤}/list/{列表所屬國家英文簡寫}/{列表所屬城市英文名稱}/

範例,東京住宿列表:

https://asiayo.com/zh-tw/list/jp/tokyo-prefecture/

2. 協助排名權重分配,設置 canonical url

為何要設置 canonical url?

先看一下 Google 說 canonical url 能做什麼

You can use canonical URLs to improve link and ranking signals for content available through multiple URL structures or via syndication

簡單來說,就是在同一個內容有多版本網址(dynamic url, http/ https, sub-domain)的狀況下,在 <head>中指定 canonical url 可以幫助 Google 排名權重的分配。

AsiaYo 設置 canonical url 主要想做到 (1) 避免網址帶參數被 Google 索引而分散權重。(2) 協助 Google 辨認並優先顯示想讓使用者搜尋到的內容,換言之想把排名權重集中到 PC 版本網頁。作法邏輯很簡單:

  • PC 網頁自指向 PC canonical url(減少網址後參數為 Google 爬蟲帶來的干擾)
  • Mobile 網頁指向 PC canonical url(讓排名權重集中到 PC 版網頁)

範例

以首頁為例,繁中版本 PC/ Mobile 網頁都在 <head>中加上,

<link rel="canonical" href="https://asiayo.com/zh-tw/">

3. 標記網頁語系,設置 alternate hreflang 屬性

為何要設置 alternate hreflang 屬性?

我們希望提供使用者慣用語系的網頁版本,且使用者在各自語系的搜尋引擎搜尋時,AsiaYo 是以對應該的語系版本被 Google 檢索呈現在搜尋結果中。

為了在搜尋結果呈現正確的語言(地區)版本,Google 提供了三個做法,我們是採用設置 alternate屬性的做法:分別在每個語系的網頁中加上 rel="alternate" hreflang="x" 屬性,分別指向其他語系對應的網址。

範例

需要特別注意,必須在每一個語系版本的網頁中都加上對應其他語系的 alternate hreflang 屬性。舉例來說,AsiaYo 英文網站上線後,在中英文版本的首頁,都有加上:

<link rel="alternate" href="https://asiayo.com/zh-tw/" hreflang="zh-tw" /> <!--指向中文版本的網頁-->
<link rel="alternate" href="https://asiayo.com/en-us/" hreflang="en-us" /> <!--指向英文版本的網頁-->
<link rel="alternate" href="https://asiayo.com" hreflang="x-default" /> <!--如果首頁有提供 redirect 偵測到的語系或是選擇語系的功能,就需指定一個預設網頁-->

4. 增加多語系情境易讀性,設置結構化資料

在多語系版本中加上對應版本的結構化資料 script,讓 Google 可以爬到該資料,這部分不多贅述。提供幾個常用工具給大家參考:


5. 加速 Google 收錄索引,設置 sitemap

在網頁上的多語系屬性、canonical url 設置、結構化資料都完成之後,前置 SEO 準備就算完成。網站上線後還有 SEO 重要的一步:確認 Google 有將網頁收錄索引

理論上原本就有中文版網址 sitemap + 有做 alternate hreflang,不需要額外多做一個語系版本的 XML sitemap。

但為了加速 Google 收錄索引的速度,AsiaYo 製作一個所有希望被收錄的網址連結頁面(一頁式網址頁),並利用 Google Search Console 裡面 Fetch as Google Crawl this URL and its direct links的功能,將一頁式網址頁上的連結都爬過。

一頁式網址頁
使用 Crawl this URL and its direct links 的功能,將所有網頁上的連結都爬過

總結

進入國際市場前,打造一個具備多語系內容的網站當然是必做項目,同時也需要搭配 SEO 相關實作,才能更快地接觸到跨國市場的使用者。

以上五個 AsiaYo SEO 實作跟大家分享,未來我們也會分享更多跨國市場的案例與實作。如果你的團隊也有打造跨國服務、SEO 等相關經驗,歡迎留言或寄信至 peter.wu@asiayo.com 賜教討論!