對於有研究或操作過SEO的人都會遇過類似的問題，不管是教學文件、線上課程以及市售的書籍，經常會提及『Canonical』這個標記方式來處理重複頁面的問題，但實際上到底該怎麼做基本設置，以及運用時該注意哪些事情？為什麼重複頁面不能使用301、302轉址方式？這部分就讓awoo來協助你快速理解與實作，並提醒有哪些細節可能會被忽略的吧！
理解Canonical標籤的第一步，該如何使用？
為幫助初次操作SEO的人理解Canonical的使用，先將其遇到狀況與使用方式做整理與說明，幫助初入SEO領域的人能更能理解實際使用狀況與更加貼近真實情境：）
重複頁面是什麼呢？
這邊引用Google官方的說法
『有某一個網頁可透過多個網址存取，或者不同網頁上存在相似的內容 (例如同時提供行動版和電腦版網頁)，Google 會將這些網頁視為相同網頁的重複版本，從中選出一個網址做為「標準」版本進行檢索，然後將其他網址判定為「重複」網址並降低檢索頻率。』
由上述大概可得知，若有數個網址不同但內容相似的網頁存在，皆有可能被判定為所謂的重複頁面，Google並不會懲罰重複內容的網站，但若是在整個網域中置入大量重複內容，除了可能會造成頁面間的站內競爭，以致於頁面排名不穩定外，亦有可能讓使用者瀏覽體驗不佳。
若有意更深入了解重複頁面，可參考：重複內容會影響SEO排名嗎？避免SEO排名分散的「重複內容」重點整理
Canonical該如何使用呢？
Canonical主要用途，即是遇到重複頁面時，定義哪一個目標頁面為『標準網址』，藉此改善網頁被判定為重複頁面及網頁權重稀釋所造成的排名波動。
Canonical標籤語法：
<link rel="canonical" href="標準網址" />
是的，要加入Canonical標記就是一行程式碼即可完成。
雖然語法上並不難撰寫，但這邊還是提供部分需要注意的小細節，減少一些錯誤發生的可能性。
1. Canonical的標籤語法位置：務必加在網頁的<head></head>區塊中，此部分較無關於SEO，屬於網頁語法規範需確實遵守，故若有些後台僅有提供內容部分的編輯，則在該區塊處加入Canonical語法也無法成功產生其效益。
仍舊屬於<body></body>標籤區塊內 – 截圖為Wordpress後台編輯界面
2. 務必採用絕對路徑：標準網址位置處請避免使用相對路徑，採用Google官方推薦使用的絕對路徑，以免影響判定。絕對路徑即為帶有協定（HTTP、HTTPS）、網域（awoo.ai）、路徑（/zh-hant/blog/duplicate-content-influence/）、以及查詢參數（例如&page=1）等相關元素的網址。
若以 https://www.awoo.ai/zh-hant/blog/duplicate-content-influence/ 為例：
絕對路徑：https://www.awoo.ai/zh-hant/blog/duplicate-content-influence/
相對路徑：/zh-hant/blog/duplicate-content-influence/
Canonical前期評估參考流程
後續awoo這邊會持續介紹Canonical的使用概念與方法，若在初期評估上還尚有疑慮，可先參考awoo這邊協助大家製作的簡易思考評估流程圖，先對流程有部分理解後，再繼續閱讀後面的文章，相信一定會更加有幫助的：）
Canonical的使用時機與運用場合？
若有留意前述幾點，便可順利加入程式碼且使其生效，但相較於如何加入，真正的關鍵點，還是在於使用時機以及如何判斷該加在哪些頁面內，這邊就針對使用時機做介紹。
務必使用Canonical時機：非標準頁面（重複頁面）為必要存在時
多數有在操作SEO的人，應該都會知道，在重複頁面的處理上，有Canonical標籤與301、302轉址兩種方式可以做頁面處理，但為什麼要選用Canonical而非使用轉址方式呢？
這邊用比較容易快速理解的方式，大概如下
- 若頁面A使用轉址至頁面B=>頁面A不存在，使用者僅能看到頁面B的內容。（上圖第一個示意圖）
- 若使用Canonical方式，在頁面A告知搜尋引擎標準頁面B才是標準網址=>頁面A與頁面B皆能同時存在，並能正確提供標準頁面為頁面B。（上圖第二個示意圖）
這邊僅針對Canonical與轉址差異做簡易描述，幫助大家了解後續運用時機。
若想瞭解更多301與302轉址的實際用途與重點，建議可閱讀 301/302轉址如何影響網站SEO？三大要點讓你做好網站SEO ，幫助你取得更多滿滿的乾貨：）
常遇到使用Canonical的情境分享
經過前述分析差異後，大概可知道有幾種場合可以應用：
1. 商品頁
若同一件商品有不同的尺寸與顏色可挑選，但點選其顏色或尺寸後，僅改變其參數（例：&color=blue、&size=xs），或雖有網址變換但商品頁面內容幾乎相同，此情況下便不適合使用301轉址方式（導致使用者永遠選不到他要的尺寸或顏色QQ），此時便可使用Canonical標籤，使其能達到標示標準頁面且不影響使用者瀏覽網站的效益。
範例標準網址：https://www.example.com/men/t-shirt
不同顏色與尺寸網址：https://www.example.com/men/t-shirt?color=blue&size=m
2. 分類或集合頁
最常見的即是多樣商品組成的頁面，此類頁面通常會有排序或版面呈現（例：價錢排序、條列式或區塊顯示），抑或是篩選功能（例：地區、二手、品牌篩選等），會在相似商品內產生了許多不同網址，此類作法同樣不適合在301轉址情況下使用，故便可使用Canonical在初期就先指向原始分類頁為標準網址。
範例標準網址：https://www.example.com/category/monitor/
排序與篩選後網址：https://www.example.com/category/monitor/?refine=pay_card&sort=price
3.多語言/多地區版本網站的重複頁面
這邊需要先做說明一下，該主題指的多語言與多地區並非不同語系的指定狀況，此處形容的情境為同語系內容發生於不同網域與目錄類型的情況下，發生的重複頁面問題。
範例標準網址：https://www.example.de/
範例目錄重複頁面網址：https://www.example.com/de/
可參考Google官方文件：處理多語言/多地區版本網站的重複網頁
若想了解多國語系的相關延伸設置方式，可參考：想要產品外銷國際？awoo教你多語系網站外銷SEO必做的四件事
4. 行動版網頁為獨立網址時
近年來Google對於行動裝置的使用體驗相當重視，而針對行動裝置的網頁，部分網站是採用RWD的形式，亦有另一部分是採用獨立的行動版網頁，故會有桌機版與行動裝置版兩種不同網址，但內容上相似度較高的狀況產生，此時便需要將其設置Canonical與Alternate標籤，來向搜尋引擎說明兩者的關係。
桌機版網頁：https://www.web.com
需加入
<link rel="alternate" href="https://m.web.com" />對應至桌行動裝置版網頁
行動裝置版網頁：https://m.web.com
需加入
<link rel="canonical" href="https://www.web.com" />對應至桌機版網頁
5. 採用AMP規範頁面
AMP（Accelerated Mobile Pages）為Google 從 2015 年開始推廣 的網頁格式，主要標榜讓網頁能以更快速度載入，雖然近期AMP網頁開始不再是主力推廣的項目，有許多額外的獨有優勢也陸續被取消（可參考下方註1、註2相關資料來源），即便如此，若還是有設置AMP網頁，其網址同樣有重複頁面產生的可能性，故可針對其AMP頁面做Canonical標籤設置。
非AMP頁面網址：https://www.example.com/info.html
需加入
<link rel="amphtml" href="https://www.example.com/amp/info.html" />對應至AMP頁面網址
AMP頁面網址：https://www.example.com/amp/info.html
需加入
<link rel="canonical" href="https://www.example.com/info.html" />對應至非AMP頁面網址
AMP官方相關設置文件：Make your pages discoverable
*註1 Google搜尋中心：更新涵蓋內容的詳細資料
*註2 The Register報導資訊：Google no longer requires publishers to use the AMP format. Bad news: What replaces it might be worse
該如何檢測網站內是否有成功設置Canonical標籤呢？
若自己的網站設置完成，亦或想了解其他人的網站如何設置Canonical標籤，該如何確認呢？這部分可以有幾種方式，提供給大家做參考：
1. 直接安裝瀏覽器外掛，快速追蹤當前Canonical設置。（最推薦）
Chrome推薦工具：SEO META in 1 CLICK、MozBar
2. 使用線上工具，將單一網址測試取得其指向網址。
線上工具參考：Canonical Tag Test
3. 直接檢視原始碼，確認是否有設置Canonical以及其對應網址。
此部分需注意，若網站採用CSR架構或JavaScript渲染後產生的內容，直接檢視原始碼可能會有誤判情況，此情況下建議參考前述兩個建議檢測方式，或者利用瀏覽器的開發者工具（與檢視原始碼不同），檢測渲染後的程式碼。
Canonical常見問題彙整
前面已針對Canonical的主要目的與相關情境做描寫與說明，但因在使用上還是會有相當多常見的問題與疑惑，故awoo這邊就收集內部操作時經常遇到的難題，以及相關企業實際操作時可能有的疑惑，希望能幫助到大家在操作遇到問題時能更快解惑：）
Q1：Canonical是否可跨網域（Cross-Domain）使用呢？
A1：可以，若有長期配合的媒體會轉發你的頁面內容資訊，或有同時經營多網站且會發佈同樣內容時，可在非標準頁面的網站發佈時請對方加入Canonical指向標準網站的頁面，對SEO效益上亦有幫助。
參考資訊：
- Moz – Canonical Tags [2021 SEO]
- Yoast – rel=canonical: the ultimate guide to canonical URLs
- Explore Insiders – How to Use Canonical Tags in Cross-Domain Content?
Q2：使用Canonical標籤後，搜尋引擎就會將目標頁面當標準頁面？
A2：這邊要宣導一個觀念，在Google提供的是搜尋引擎建議的規範，既然是規範，表示皆有可能是『參考用』，搜尋引擎並非絕對會照設置的內容做為唯一的參考依據。
但是否會有幫助？這點無庸置疑是絕對有幫助的，雖然僅是規範，但盡可能的照Google提供的規範執行，可提高對網站的解析能力，減少不必要的重複頁面與排名競爭情況產生。
Q3：HTTP與HTTPS皆存在情況下，需要使用Canonical嗎？
A3：開始討論是否使用Canonical之前，另一個要討論的點是：這些算是重複頁面嗎？基本上先說結論：是的，算重複頁面。
這邊也同步先提供常見各網站都容易發生的重複頁面：
- HTTP/HTTPS
- www/non-www
- 網頁結尾是否有帶斜線（如：/t-shirt/ 與 /t-shirt ，但首頁除外）
上述幾種都是重複頁面沒錯，至於是否使用Canonical標籤，這邊的建議是：
- 需要加入Canonical標籤
- 建議同步評估是否適合加入301轉址動作
- 同時尋找站內是否有相關連結是連到重複頁面，減少轉址發生與Canonical的判斷需求。
Q4：如果我的網頁僅有AMP網頁格式一種版本，Canonical該怎麼設置？
A4：若僅有使用AMP版本頁面，建議同樣設置Canonical標籤，且直接指向AMP版本頁面，此情況下就無需設置rel="amphtml"的標籤於頁面中。
參考資料：What if I only have one page?
Q5：能先寫好程式，設置預設所有頁面都先Canonical指向當前頁面嗎？
A5：此部分需先確認，Canonical指向的頁面，能夠預設排除篩選器、參數等相關變數，正確指向標準的目標頁面情況下，邊可以先做此設置。但若預設寫法是將『當前網址』直接設置到為Canonical網址，那就千萬別這樣設置了，因為此種設置法重複頁面指向的也只會是當前的『重複頁面』網址而已。
Canonical標籤心得與結論
前述介紹了不少Canonical標籤的使用時機與常見問題，但這邊還是要說明，Canonical標籤與301轉址方式主要都是能夠處理重複頁面的狀況，在改善重複頁面上有一定的助益，但在使用該類型方式排除問題之餘，還是不要忘了找出有哪些重複頁面是『必要存在』，而哪些頁面又是『非必要存在』，千萬不可因為有因應措施後，就忽略了改善源頭的重要度，這樣對網站來說才是長期治標又治本的方式喔：）
若想進一步瞭解 Awoo SEO 成長駭客工具，歡迎立即諮詢，將有 awoo 專業顧問為您服務。
