What is Canonical URL？設定好Canonical Tag避開SEO排名懲罰！

Canonical URL是什麼？

你是否常在讀SEO文章的時候看到Canonical URL、或是常在電商討論社群中看到有人在討論 Google Canonical URL該怎麼設定，但卻不知道它到底是什麼？可以用在什麼地方？

Canonical URL屬於SEO優化中「技術層面」的操作，是一種HTML語法標籤，通常會需要網頁工程師協助處理，其也常被稱為Canonical Link，Canonical中文則為「標準網址」。

Canonical URL設定好後，會在搜尋結果頁面（又稱SERP，下文以此簡稱）中確定哪個版本的URL應該被呈現，以處理重複內容所引發的網頁問題。因為是技術面的優化，因此很常被營銷人所遺漏，但其實設定正確的Canonical URL Tag相當重要。

相信你看到這邊應該還是一頭霧水，這篇教學文章將會帶你認識為什麼要做網址的Canonicalization、不執行的話會發生什麼事情、以及又該怎麼設定。

Canonical Tag長什麼樣子？不設定它可能會被懲罰？

（一）為什麼要用Canonical Tag? 在SEO上的好處是什麼？

先說結論，Google不喜歡一個網站中出現「不同網址、相似內容」的頁面，嚴重的話可能會有排名懲罰。

在網站中，可能會因為多個網址指向相同或相似的內容而造成搜尋引擎混淆，進而導致搜尋引擎產生排名和索引方面的問題。Canonical URL Tag的設定可以告訴搜尋引擎哪個網址應該被視為主要版本，從而避免重複內容問題。

當你有多個相似網址指向同一內容時，搜尋引擎可能會在這些不同的網址上耗損爬蟲的爬取預算、以及針對這些不同的網址給出頁面評分，但事實上他們可能是同一個頁面內容，這樣將會導致該頁面的排名降低。

而Canonical URL的運用可以確保搜尋引擎專注於「主要的那一個網址」，幫助你集中網站的權重和排名價值，提高網頁的SEO表現。

簡單一句話來說明，使用Canonical URL有助於消除重複內容問題，改善網站的搜尋引擎優化，並確保搜尋引擎將主要版本視為正確的內容，進而提升你的網站在搜尋結果中的表現。

歸納以上所述，3大Canonical SEO操作可達成的效用分別為：

➊ 告訴Google不可避免的重複頁面出現時，你希望呈現在SERP上的是哪一個網址

➋ 避免Google的爬蟲程式耗損爬取預算去爬取不重要的頁面

➌ 把原本可能被分散掉的頁面權重跟評分，聚集回最重要的那一個頁面上，提升排名表現

（二）什麼網站情境應該用Canonical URLs？

上面講了這麼多，到底什麼時候會出現「不同網址但內容相似」的情況呢？可以大致上分成2類型，一種是「頁面內容不得已，一定會相似或重複」，另一種則是「網站URL設定問題」。

📌頁面內容不得已一定會相似或重複

◆ 產品頁面有多個變化版本

在衣著鞋包電商網站最常出現這種情況，例如產品頁面可能有同商品、不同顏色的「內容相似頁面」產生。網址可能長得像這樣：

• example.com/shirt-black
• example.com/shirt-white

這種情況出現時，請挑選一個主推顏色，並選定該顏色的網址設定「Canonical Tag」。（設定的方式，下一段會統一教學）

◆ 媒體轉發原文、或是被有心人士整頁抄襲

有時，會出現「跨網域」但其他網站的頁面內容與你相同的情況，在你無法管理其他網域的頁面內容，但又希望搜尋引擎不要因此受到影響的情況下，最好也要在自站該頁面設定HTML Canonical標籤，來告訴Google這個網址才是原創內容。

󠀠

📌網站URL設定問題：4個情境

以上談論的是「內容上無法避免的重複」，接下來還有一些情況是自站網址設定導致的「不同網址指向相同內容」的情況。

其實只要網址稍微有一點不一樣，Google就會認為這是不同的URL、理應不該出現相同的內容。常見的情境如下方4個舉例：

◆ http vs. https

這2種網址的差別主要在「網頁通訊協定的安全性」設定差異，這邊就不多做介紹它們是什麼，但 https網址基本上是使用相對具有安全性的資料傳輸方式，因此搜尋引擎會給予「https」的網站更高的評價。

若2種網址你都有設立，但他們會導向同一頁面時，建議要設定「https」版的為 Canonical 網址。

◆ www vs. 去除www

有時候，企業或個人網頁會想把www給去除、讓網址更加乾淨好記，例如「welly.hk」。但其實 www有無存在對於SEO來說是沒有影響的。只是大部分的人在直接key-in網址時，往往習慣在主要網域前打上www，若你的網址沒有www，可能會讓人鍵入錯誤而無法進入你的網站。

因此蠻多企業可能會是設定好轉址，讓客人不論是key-in「www.welly.hk」或是「welly.hk」都可以順利進入網站，這時候重複頁面內容就出現了！因此，你應該指定要作為主要顯示的網址為Canonical URL。

◆ 電腦版網址 vs 行動裝置網址

最明顯的例子是Meta Facebook的行動版頁面跟電腦版頁面差異：

• 電腦版URL：https://www.facebook.com/
• 行動版URL：https://m.facebook.com/

為了提升行動裝置的瀏覽體驗，有些公司官網會將行動版網頁獨立製作，或是開發AMP加速行動頁面。這種情況也會導致不同網址導向同樣內容的網頁。

◆ 網址後加上的參數

營銷人最常接觸到的其中一種網址參數，就是「UTM」網址追蹤參數。UTM可以幫助網站管理員透過Google Analytics報表查看追蹤「內含UTM追蹤碼」的特定網址流量來源。比如說：

• https://welly.hk?source=FB&medium=Post&campaign=SuccessCases

基本上，自站每一個頁面都應該在HTML程式碼中加入Canonical Tags，這樣在建立參數追蹤網頁頁面時，才能向Google宣告應該以哪一個URL為主。

以上6個例子主要是先幫大家建立觀念、了解哪些情況可能導致重複內容的網址出現，下一段將繼續跟大家介紹Canonical URLs的設定方法、如何檢查以及常見的邏輯錯誤。

Canonical URL的設定該怎麼做？營銷人又可以怎麼確認呢？

由於Canonical是屬於HTML語法的一種，因此在操作上會需要工程師的協助，營銷人可以先確認目前要進行設定的網站是什麼類別，選擇相對應的程式碼、並確認希望首先呈現的標準網址之後，再交由工程師進行埋放。

（一）不會設置Canonical URL？營銷人可以做的4件事！

📌Step1 確認要設定的網站的類別

與工程師協作時，工程會需要知道「要被設定為Canonical URL的網址」以及「哪些網址需要設定」，包含網址是否為行動版網址、電腦版、或是AMP網址…（因為行動版的HTML Canonical Tag埋設方法稍微不太一樣）。

📌Step2 選擇對應的程式碼

大部分情境的設定方式與程式碼是相同的，只有行動裝置 vs 電腦版的HTML Canonical Tag會長得不太一樣，我們會在下一段放上程式碼的長相跟埋設教學。

📌Step3 將程式碼交由工程師進行埋放

只要告訴工程師HTML Canonical Tag埋放的位置在「每一頁」的＜head＞＜/head＞區塊內。且一個網頁只能有1個Canonical Tag。

另外，標準網址在埋放時，需要使用「完整網址」ex. https://welly.hk

📌Step4 使用工具檢查是否設定成功

本大段在下一段埋設教學設定後，也將教學如何檢查已完成的設定。

以下將從「Step 2 選擇對應的程式碼」開始進行設定教學。

（二）如何設定HTML Canonical Tag？選對「rel canonical」正確情境語法很重要！

首先，我們從Google官方文件中可整理出Canonical Tag共有3大類別：

1. 「一般網頁」指向「一般網頁」
2. 「行動裝置」與「電腦版網頁」互相指向
3. 「一般網頁」與「AMP網頁」互相指向

📌「一般網頁」指向「一般網頁」

■ 若以「http的網址頁面」指定「https的頁面」作為標準網址為例：

請工程師把以下HTML語法放入「http頁面」的跟之間，並於href後填上「https頁面」的完整網址，即可完成設定。

■ 若以「帶有參數的頁面」指定「無參數頁面」作為標準網址為例：

則是請工程師把以下HTML語法放入「帶有參數的頁面」的跟之間，並於href後填上「無參數頁面」的完整網址，即可完成設定。

HTML語法：

< link rel=”canonical” href=”填入要指定的標準網址” >

若你是使用WordPress，可以透過Yoast SEO這個外掛來進行設定，只要進入「標準網址」欄位，並填入希望指定的標準網址即可。

📌「行動裝置」與「電腦版網頁」互相指向

如果你的網站頁面「行動版」與「電腦版」是不同的網址（URL），且網頁內容是幾乎一樣的，那也會需要使用Canonical Tag來指定標準網頁。且，是兩邊網址都需相互設定。做法如下：

■ 在「電腦版網址頁面」上指定「行動版網址」作為標準網址，記得更換Tag為”alternate”

語法：

< link rel="alternate" href="行動版網址" >

■ 在「行動版網址頁面」上指定「電腦版網址」作為標準網址

語法：

< link rel="canonical" href="電腦版網址" >

還可以在語法中指定「當顯示視窗寬度 < (數字) px 時會以行動版標準網址為主來呈現畫面」！

語法：<link rel="alternate" media=”only screen and (max-width: 640px)” href="行動版網址">

📌「一般網頁」與「AMP網頁」互相指向

AMP頁面又稱「加速手機頁面」，當用戶使用行動裝置瀏覽網頁時，網頁載入的速度會比一般頁面更快，是一種提升行動裝置用戶體驗的網頁呈現方式。

但這種頁面內容相同、呈現方法不同而導致的多個網址，也會需要使用Canonical標記出標準網址。做法如下：

■ 在「非AMP網頁」上指定「AMP網頁」作為標準網址，記得更換Tag為”amphtml”

語法：

< link rel="amphtml" href="AMP網址" >

■ 在「AMP網頁」上指定「非AMP網頁」作為標準網址

語法：

< link rel="canonical" href="非AMP網址" >

■ 如果該內容的頁面只有一個AMP網頁（不存在其他重複內容頁面），請在「AMP網頁」上指定「AMP頁面本身的網址」作為Canonical網址。注意，Tag為”canonical”！

語法：

< link rel="canonical" href="AMP網址" >

（三）檢查Canonical Tag是否設定成功

如果工程師向你回報網頁的Canonical Tag已設置完成，最後一步就是檢查有沒有設置成功，你可以用以下方法做檢查。

(1) 直接檢視網頁原始碼

Step1｜到你想確認的網頁頁面，按下右鍵，選擇最下面的「檢查」

Step2｜開啟程式碼檢查視窗後，確認是在左上角「Elements」的分頁中

Step3｜使用搜尋功能（Ctrl+F／Command+F）搜尋「Canonical」

確認有出現「link rel=”canonical”」或是「link rel=”alternate“」或「link rel="amphtml" 」的語法存在< head > & < /head >之間，這樣就是有成功設置。

(2) 線上免費檢查工具－Canonical Tag Test

如果你會嫌看程式碼麻煩，可以使用Canonical Tag Test這款免費工具，只要進入此網址即可在頁面上輸入你想檢查的URL。

檢查出來的結果即會顯示你的Canonical Tag設置成功與否。

檢查出來的結果即會顯示你的Canonical Tag設置成功與否。

(3) 使用 Google Search Console

󠀠以上方法可擇一使用，接下來使用的工具是Google官網專門優化「自然流量」的工具——Google Search Console（以下簡稱GSC）。

當你把所有網頁頁面都設置好對應的Canonical Tag後，可以使用GSC一次檢查網站上有沒有漏網之魚。

附註：若你還未將網站與GSC綁定串接過，請參考這一篇文章「Google Search Console教學｜谷歌GSC功能、安裝與驗證」，內有詳細的GSC操作教學。

󠀠進入「網頁」後，下滑至「網頁未編入索引的原因」，點進「這是重複網頁；Google選擇的標準網頁和使用者的選擇不同」的警示頁面，即可確認設置好Canonical Tags的頁面是否不在這項功能給的列表當中。

（四）必知SEO Canonical Tags設定雷區

請工程師協助你設定Canonical時，如果出現錯誤，可以依照以下規則逐一排查：

➊ 1個網頁只能設定指向「某一個」頁面，如果你一個頁面中的Canonical URL大於一個，那就會是錯的設定。

➋ 如果你「http」與「https」版的網頁頁面都存在，標準網址建議選擇「https網址」。

➌ 指定Canonical URL時，請填入絕對網址，也就是必須包含https://的通訊協定。

➍ 指定Canonical URL時，網址尾巴的「斜線（slash）」需要注意統一。

• 有slash：https://welly.hk/
• 無slash：https://welly.hk

這2個網址對Google來說也是不同的網址

➎ 「link rel=””」的Canonical Tag語法需要放在之間，放在其他地方（例如之間）就是錯的。

➏ 設定邏輯錯了——到底誰才是標準網址？

• 情況1｜互相指定：A頁面指定B頁面成為標準網址，結果B頁面又指定A頁面。
• 情況2｜迴圈指定：A頁面指向B頁面，結果B頁面又指定C頁面。

正確設定方式：統一某一個頁面就是標準網址，其他相似頁面全都指定標準網址是它。

➐ 誤用 robots.txt 或 noindex 了！

robots.txt 跟 noindex 主要是用於告訴 Google「我的哪些頁面不要爬 / 要爬」。而非標準網址的頁面內容可能還是希望被爬取的，只是因為內容相似所以得要告訴 Google「我知道這個頁面是重複內容，你可以以『XXX URL』的內容為主去提供給搜尋使用者」。

以上就是關於「Canonical URL & Tag」的介紹，如果您想要了解更多SEO資訊，或者想要獲取免費的SEO網站檢測，都可以透過下方黃色按鈕與Welly團隊聯繫！