這裡介紹如何設定標準網址(canonical link),讓自己網站可以在 Google 搜尋結果上呈現正確的網址,達到搜尋引擎最佳化的效果。

在一個網站中使用不同的網址來呈現同一個頁面的內容是很常見的情況,舉例來說,有些網頁會有閱讀用與列印用兩種網址,這樣的設計可以讓使用者更便利,但是對於網路搜尋引擎(如 Google 等)而言,可能會無法判別那一個網址才是最正式的網址,如果在搜尋結果中顯示了列印用的版本就不是很恰當。

Google 標準網址標示

Google 官方為了解決這種問題,提供了標準網址的標示方式,只要在 <head> 區段加入 canonical link 的設定,就可以讓 Google 搜尋引擎呈現適當的結果:

<link rel="canonical" href="http://blog.gtwang.org/web-development/google-canonical-link-setup-after-changing-url/" />

我們可以在所有版本的網頁中(閱讀用與列印用的等等)都加上這一行,這樣 Google 搜尋引擎在顯示搜尋結果時,如果發現這個網頁內容有多個網址可選擇時,就會以這裡標示的網址為準。

使用 JavaScript 設定標準網址

由於 canonical link 的設定一定要放在 <head> 區段才會生效,如果您的網站環境無法讓您直接修改 <head> 區段的 HTML 碼,可以改用 JavaScript 的方式來加入 canonical link:

<script>
  $('head')
    .append('<link rel="canonical" href="http://blog.gtwang.org/web-development/google-canonical-link-setup-after-changing-url/" />');
</script>

這段 JavaScript 可以放在 <body> 中的任何地方,他的作用是在網頁載入時,使用 JavaScript 在 <head> 區段中增加一行 canonical link 設定,其中 href 的屬性請改為自己要指定的網址。

由於 Google 搜尋引擎在解析網頁時也會一併解析 JavaScript 程式碼,所以對於 Google 搜尋引擎而言我們可以使用這樣的方式來處理。

如果您的網頁原本就已經有 canonical link 的設定了,可以改用下面這樣的作法,修改 <link>href 的屬性:

<script>
  $('link[rel="canonical"]')
    .attr('href', 'http://blog.gtwang.org/web-development/google-canonical-link-setup-after-changing-url/');
</script>

更換網址

這種標準網址的標示也可以應用於網站遷移的問題上,通常網站要更改網址時,會先把新的網站架設起來,然後將舊網站的內容轉移至新網站,而為了不要造成網路流量的損失,我們會等待搜尋引擎將新網址都收錄之後,才會將舊網站關閉。

然而搜尋引擎的結果並不會馬上更新,甚至會有很長一段時間都還是會維持舊網站的資料,這時候我們就可以利用標準網址標示,將舊網站上每一個網頁的標準網址都標示為新網站的網址,這樣 Google 搜尋引擎就會立即更新搜尋結果,加速網站的轉移,讓訪客可以立即看到新網站的網址。