Canonical 標記是什麼？透過標準網址解決 SEO 重複內容！教學

Canonical 是搜尋引擎優化中為了解決 SEO 重複內容頁面問題而產生的標記，具體用法為將 <link rel=”canonical” href=”標準網址”> 這行程式碼，放在你的重複內容頁面上（<head></head>區塊中），然後將 href 屬性裡面的網址，設定成你要指向的那個「標準網址」。

Canonical 這個標記很容易用在電商網站上，因為電商網站會有很多顏色、尺寸選項，但卻使用了不同網址，而且每個網址的內容幾乎都是一樣的，因為造成重複內容的問題。這時候你就需要使用 Canonical 這個標記，將重複內容頁面全部指向你的標準網址，避免重複內容問題。

如果你的網站上有重複內容問題，但你不使用 Canonical 標記來解決重複內容頁面，很可能會傷害到你的 SEO，會導致 Google 無法準確判斷，到底那個頁面才是你想給 Google 顯示的標準頁面。本篇文章會完整教學如何使用 Canonical 標記。

內容目錄

Canonical 是什麼？用途是？

根據 Google 官方對於重複頁面（重複內容）的說法：

如果您有某一個網頁可透過多個網址存取，或者不同網頁上存在相似的內容 (例如同時提供行動版和電腦版網頁)，Google 會將這些網頁視為相同網頁的重複版本，從中選出一個網址做為「標準」版本進行檢索，然後將其他網址判定為「重複」網址並降低檢索頻率。

為了解決重複內容問題，於是有了 Canonical 這個標記。

Canonical 標記：解決 SEO 重複內容問題

Canonical 是為了解決重複內容所產生的標記，可以幫助 Google 判斷到底哪個才是「標準網址」。

例如以下幾個網址：

www.example.com/12345
www.example.com/12345?style=2
www.example.com/12345?style=3

假設上面的網站是一個電商網站，上面三個網址後面都有 style 這個 GET 參數，三個頁面分別代表三種不同顏色的款式，而「www.example.com/12345」是你的標準網址頁面。

如果你不使用 Canonical 標記，將「www.example.com/12345?style=2」跟「www.example.com/12345?style=3」這兩個網址，全部用 Canonical 指向「www.example.com/12345」，Google 很可能就會將三個網址索引起來。

但實際上 Google 索引這三個網址根本沒有用，因為這三個頁面內容幾乎都是一樣，只差在顏色或款式的不同。

這時候你只需要在「www.example.com/12345?style=2」跟「www.example.com/12345?style=3」這兩個頁面的網頁原始碼<head></head>區塊中，加入以下程式碼即可。

 <link rel="canonical" href="https://www.example.com/12345" />

上面這行程式碼會告訴 Google：「https://www.example.com/12345」這個網址才是標準網址，其它兩個網址你別管了。

Canonical 標記的標準使用方法

使用 Canonical 標記來指定標準網址時，需要記住以下幾點，避免操作錯誤唷。

1.Canonical 標記正式的原始碼

下面這個是 Canonical 完整的標記範例，標準網址指向你要指定的標準網址頁面。

 <link rel="canonical" href="標準網址">

2.Canonical 的 href 屬性裡面的標準網址要使用絕對路徑

標準網址必須使用絕對路徑而不能用相對路徑唷。例如以下範例。

<link rel="canonical" href=“https://abc.com/123" />（正確）
<link rel="canonical" href=“/123" />（錯誤）

3.Canonical 標記必須放在 <head></head> 區塊裡面

如果你將 Canonical 標記放在<body></body>裡面，那是沒作用的，正確位置必須放在網頁原始碼的<head></head> 區塊裡面。

上面就是當你要使用 Canonical 標記解決 SEO 重複內容問題時，正確的操作方式。

什麼樣的情況需要加上 Canonical？

需要加上 Canonical 的情況很多，通常有以下幾種。

一、手機版或 AMP 使用不同網址

如果你的手機版使用了不同網址，或是有AMP頁面，例如下面這樣的情況。

https://abc.com/123
https://m.abc.com/123
https://abc.com/123/amp

此時你可以在「https://m.abc.com/123」跟「https://abc.com/123/amp」的頁面上，加入這行指令碼，指定標準網址為「https://abc.com/123」。

 <link rel="canonical" href="https://abc.com/123" />

二、相同頁面，但因不同款式、顏色而有不同的網址

這種需要加入 Canonical 的情況多見於電商網址，電商網址很常會在網址上加入 Get 參數來顯示不同的款式、顏色，例如以下。

Https://abc.com/123
Https://abc.com/123?color=2
Https://abc.com/123?color=3

上面第二、第三個網址後面有GET參數，僅僅只是款式或是色不同，頁面其它內容全部一樣，此時可以在「abc.com/123?color=2」跟「abc.com/123?color=3」網頁上加入以下程式碼。

 <link rel="canonical" href="https://abc.com/123" />

雖然上面這個問題不一定每個電商網站都會有，因為很多電商現在都使用 Ajax來處理不同款式的顯示，這種不會因款式、顏色變動而導致網址不同的頁面，就不會有這個問題。

三、www/非 www 有相同內容

有些網站會同時支援「www」跟「非 www」。

例如如下面兩個網址顯示的內容一模一樣的話，就會有重複內容問題。

www.abc.com/123
abc.com/123

此時你可以選擇將 canonical 標記指向到其中一個網址，當作標準網址。

不過這裡貓熊先生建議，「www」跟「非 www」你應該只選擇其中一個就好，例如只使用「www」網址，另外「非 www」設定禁止訪問，網站上的所有連結也都是連到「www」網址。

四、http / https 有相同內容

還有些網站會同時支援 http/https，也就是在 http/https 的網址上顯示相同內容，此時也會有重複內容問題。

https://www.abc.com/123
http://www.abc.com/123

此時你應該將 canonical 標記指向到其中一個網址，當作標準網址（此時應該選擇將 https 當作標準網址）。

五、Self Canonical

其實除了上面提到的這些重複內容問題，你還可以將 canonical 標準網址指向自己，這又可以叫做 Self Canonical ，也就是標準網址頁面自己給自己 Canonical 。

例如貓熊先生的桌機版網頁，也是將 Canonical 標記的標準網址指向自己。

六、Canonical 不確定是否在跨網域上也有作用

根據 SEO 權威網站之一 moz 對「Canonical 」的官方解釋，Canonical 標記也能使用在跨網域的重複內容上，例如你擁有兩個網站，並且兩個網站發布了同一篇一模一樣的文章內容，這時你就可以使用 Canonical ，將標準網址指向其中一篇。

不過貓熊先生對於這點比較保留，因為根據 Google 內部人員說法，跨網域 Canonical 應該是沒有作用的（影片10:45秒），有興趣的人可以看這支影片。

上面就是六個你可以使用 Canonical 標記的情況。當你在使用 Canonical 的時候，還需要避免一些操作上的失誤。（說明如下）

使用 Canonical 的注意事項

下面再整理一些跟 Canonical 有關的重要觀念。

1.Sitemap 提交的網址必須是標準網址

一般來說，你會將一個網址加入到 Sitemap 裡面，是因為你希望這條網址可以被 google 索引，因此切記 Sitemap 裡面的網址必須是標準網址唷。

2.使用 HTTPS 網址 (而非 HTTP 網址) 做為標準網址

根據 google 官方對於 Canonical 的說明頁面，認定網頁的標準網址時，Google 偏好 HTTPS 網頁而非 HTTP 網頁。（請參考：整合重複的網址）

除非有下列問題或衝突情形：

HTTPS 網頁含有無效的安全資料傳輸層 (SSL) 憑證。
HTTPS 網頁含有不安全的相依關係 (圖片除外)。
HTTPS 網頁會將使用者重新導向 HTTP 網頁，或透過 HTTP 網頁重新導向使用者。
HTTPS 網頁中含有指向 HTTP 網頁的 rel=”canonical” link。

其實貓熊先生認為，現在應該要只使用 https 的網址，都不要使用 http 了。

3.避免混淆 google

使用 Canonical 時，應該正確指向，不要網頁A Canonical 到網頁B，同時網頁B又 Canonical 到網頁A（A->B->A），這樣會混淆 Google ，讓 Google 不知道哪個才是標準網址。又或者是網頁A Canonical 到網頁B，同時網頁B又 Canonical 到網頁C（A->B->C），這樣也會混淆 google。

4.避免混淆 Canonical 跟 301 redirects 的概念

Canonical 是為了解決重複內容問題，而 301 redirects 則是將舊網頁導向到新網頁上，並且傳遞頁面上的權重。這裡要特別注意，網頁 A Canonical 到網頁 B，網頁 A 還是存在；但是網頁A 301 redirects 到網頁B，網頁A是被消失的，因為即便有連結連到網頁A，使用者仍然會立即被導向到網頁B。

如果你想更了解 SEO 的全貌，推薦閱讀：SEO 搜尋引擎優化學習指南

Canonical 常見問題

Canonical 是什麼？