Canonical標準網址操作指南,操作SEO不再苦惱

SEO Canonical

對於有研究或操作過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語法也無法成功產生其效益。

Wordpress後台編輯界面
部分後台編輯,即便切換為原始碼模式加入語法
仍舊屬於<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前期評估參考流程圖

 

Canonical的使用時機與運用場合?

若有留意前述幾點,便可順利加入程式碼且使其生效,但相較於如何加入,真正的關鍵點,還是在於使用時機以及如何判斷該加在哪些頁面內,這邊就針對使用時機做介紹。

務必使用Canonical時機:非標準頁面(重複頁面)為必要存在時

多數有在操作SEO的人,應該都會知道,在重複頁面的處理上,有Canonical標籤與301、302轉址兩種方式可以做頁面處理,但為什麼要選用Canonical而非使用轉址方式呢?

這邊用比較容易快速理解的方式,大概如下

轉址與Canonical示意圖參考
轉址與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" /> 對應至桌機版網頁

行動裝置採獨立網址情況下,需善用Canonical來避免重複頁面
行動裝置採獨立網址情況下,需善用Canonical來避免重複頁面

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 CLICKMozBar

善用外掛工具,快速觀察Canonical指向目標 - SEO META in 1 CLICK
善用外掛工具,快速觀察Canonical指向目標 – 擷取至SEO META in 1 CLICK

2. 使用線上工具,將單一網址測試取得其指向網址。

線上工具參考:Canonical Tag Test

線上測試眾多項目中,取得Canonical設置網址
線上測試眾多項目中,取得Canonical設置網址 – 擷取至Canonical Tag Test

3. 直接檢視原始碼,確認是否有設置Canonical以及其對應網址。

此部分需注意,若網站採用CSR架構或JavaScript渲染後產生的內容,直接檢視原始碼可能會有誤判情況,此情況下建議參考前述兩個建議檢測方式,或者利用瀏覽器的開發者工具(與檢視原始碼不同),檢測渲染後的程式碼。

由原始碼直接確認是否設置Canonical標籤
由原始碼直接確認是否設置Canonical標籤

Canonical常見問題彙整

前面已針對Canonical的主要目的與相關情境做描寫與說明,但因在使用上還是會有相當多常見的問題與疑惑,故awoo這邊就收集內部操作時經常遇到的難題,以及相關企業實際操作時可能有的疑惑,希望能幫助到大家在操作遇到問題時能更快解惑:)

Q1:Canonical是否可跨網域(Cross-Domain)使用呢?

A1:可以,若有長期配合的媒體會轉發你的頁面內容資訊,或有同時經營多網站且會發佈同樣內容時,可在非標準頁面的網站發佈時請對方加入Canonical指向標準網站的頁面,對SEO效益上亦有幫助。

參考資訊:

Q2:使用Canonical標籤後,搜尋引擎就會將目標頁面當標準頁面?

A2:這邊要宣導一個觀念,在Google提供的是搜尋引擎建議的規範,既然是規範,表示皆有可能是『參考用』,搜尋引擎並非絕對會照設置的內容做為唯一的參考依據。

但是否會有幫助?這點無庸置疑是絕對有幫助的,雖然僅是規範,但盡可能的照Google提供的規範執行,可提高對網站的解析能力,減少不必要的重複頁面與排名競爭情況產生。

Q3:HTTP與HTTPS皆存在情況下,需要使用Canonical嗎?

A3:開始討論是否使用Canonical之前,另一個要討論的點是:這些算是重複頁面嗎?基本上先說結論:是的,算重複頁面。

這邊也同步先提供常見各網站都容易發生的重複頁面:

  • HTTP/HTTPS
  • www/non-www
  • 網頁結尾是否有帶斜線(如:/t-shirt/ 與 /t-shirt ,但首頁除外

上述幾種都是重複頁面沒錯,至於是否使用Canonical標籤,這邊的建議是:

  1. 需要加入Canonical標籤
  2. 建議同步評估是否適合加入301轉址動作
  3. 同時尋找站內是否有相關連結是連到重複頁面,減少轉址發生與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 專業顧問為您服務。

立即聯絡阿物 

延伸閱讀:SEO是什麼? SEO怎麼做? SEO搜尋引擎最佳化入門指南【2021最新版】

延伸閱讀:什麼是內部連結?3分鐘搞懂內部連結策略規劃,邁向SEO成長之路