Ranking 小編
2023/08/24
瀏覽次數

首頁 / SEO知識庫 / Canonical Tag 是什麼?掌握標準網址,改善 SEO 重複內容

Canonical Tag 是什麼?掌握標準網址,改善 SEO 重複內容

Canonical URL 是什麼?完成設定 Canonical SEO 能避免重複內容影響排名,本篇文章將介紹 Canonical 的用途、Canonical SEO 的使用情境與 Canonical 語法設定範例,帶你深入了解這個操作 SEO 的重要 HTML 語法標籤!

目錄

Canonical URL(標準網址定義) 是什麼?

Canonical URL 英文直翻為「標準網址」,為了避免 Google 將必要但內容相似的網頁視為重複版本而做的防範措施。

舉例來說:網域中同時有「https://ranking.com/blog/」與「https://ranking.com/blog1/」備份頁面,Google 會因為兩者內容相近而將其視為重複內容。這時候如果我們在備份頁面的 HTML 設置「Canonical Tag」指向目前正在使用的頁面 https://ranking.com/blog/,Google 爬蟲就會知道何者是標準網址 Canonical URL,避免因為被誤判為重複內容而影響 SEO 排名。

 

Canonical Tag 是什麼?Canonical 標籤的重要性

Canonical Tag 寫作「rel=”canonical”」,是一個會埋設在 <head> 區塊中的 HTML 語法,如同上述舉例,可以幫助 Goolge 爬蟲快速辨別標準網址、改善過多重複頁面對 SEO 帶來的負面影響。

 

Canonical Tag 標籤語法為:

<link rel=”canonical” href=”標準網址連結”>

 

大部分的人或許會認為:我的網站沒有備用網址、內容也都具有獨特性,不會發生重複內容的狀況,就算不設置 Canonical Tag 也沒問題吧!

然而在網站經營實務上,重複內容指的不單純是網頁內容,還包含網址因為安全憑證、使用不同裝置、參數生成等因素而出現「看似不同網址但導到同一個頁面」的情況,而這個狀況一般人很難察覺,以下使用 ranking.com 網域做範例:

  • https://ranking.com/blog/12345(https版本)
  • http://ranking.com/biog/12345(http版本)
  • https://www.ranking.com/blog/12345( www 版本)
  • https://m.ranking.com/blog/12345(行動裝置版)
  • https://www.ranking.com//blog/cocktail?gclid=ABC(動態網址版本)
  • http://ranking.com/blog/12345/?utm_(添加 UTM 參數版)

 

上述網址都連向同一個網站,雖然對我們的日常使用沒有影響,但搜尋引擎會把它們視為多個相同內容的不同網址,不僅會讓爬蟲在抓取資料時感到困惑,嚴重的話甚至可能會被 Google 判斷為惡意操作或抄襲,導致網站受到懲罰。所以大家千萬不要忽略 Canonical URL 設置,避免在不自知的狀況下網站排名受到影響。

 

Canonical 標準網址使用情境

從上文中我們可以知道 Canonical 標籤主要的目的是用來處裡「重複內容」,那麼除了上面的舉例外,我們也為大家整理 5 種常會需要用到標準網址的情境:

  1. 多種類似規格的商品頁面
  2. 多樣商品組成的分類集合頁
  3. 聯合發布在媒體、部落格內容相近的頁面
  4. 支援多種裝置或採用 AMP 的頁面
  5. 支援參數的頁面

 

如果想認識更多標準網址的使用情境,可以參考 善用 Canonical 語法,避免網站重複內容影響 SEO 排名一文。

 

標準網址該如何設定?

標準網址的設定並不困難,現在許多架站系統都已經操作簡單方便的外掛可以使用,而自架站也只需要有 HTML 基礎知識就能完成設定,以下為大家介紹兩種 Canonical 設定方法:

  1. WordPress 網站可使用 Yoast SEO 外掛工具
  2. 直接在 HTML 加入 rel=”canonical” 語法

 

A. WordPress 網站可使用 Yoast SEO 外掛工具

WordPress 後台如果有安裝​​ Yoast SEO 工具模組,可以直接拉到最下方的 SEO 欄位,並在標準網址欄位中輸入主要的網址,就能輕鬆搞定囉!

WordPress 外掛 rel=canonical 語法設置方法

 

B. 直接在 HTML 加入 rel=”canonical” 語法

另一種方法是直接在原始碼編輯中加入 rel=”canonical” 語法,不論是市面上的架站系統或自架站都能使用,我們以 Ranking 官網為例:

  • 在 HTML 語法中找到 <head> 部分
  • 在 <head> 區塊中 加入 <link rel=”canonical” href=”https://ranking.works/”> 語法
  • <link> 為連結外部資源時使用的語法,經常用來連結CSS樣式表
  • rel=”canonical” 為標準網址語法
  • href=”「網址」” 則是填入欲設定為目標網址的地方

將 Canonical 設置於 HTML head 區塊

 

Canonical 設定注意事項

除了語法需要正確輸入之外,在設置程式碼時還需要注意以下 4 點,幫助爬蟲更好抓取資料,取得更高的 SEO 評分:

  1. 每個頁面只能設置單一 rel=”canonical” 語法
  2. 使用 https 網址,以符合 Google 偏好
  3. Canonical Tag 語法必需放在 <head></head> 區塊間
  4. 使用絕對路徑網址 

 

A. 每個頁面只能設置單一 rel=”canonical” 語法

一個頁面中有多個 rel=”canonical” 語法,會造成搜尋引擎爬蟲混淆、不確定何者才是標準網址,導致 Canonical Tag 設置失效。

 

B. 使用 https 網址,以符合 Google 偏好

Google 有明確表示過會優先索引使用 HTTPS 安全協議的網站,透過 SSL/TLS 來加密封包,確保使用者有更安全的網路使用環境。

 

C. Canonical Tag 語法必需放在 <head></head> 區塊間

HTML head 標籤通常作為網頁的開頭與結尾,設計網頁時會將各種網頁資訊及元素,放入<head></head>兩個標籤中間 ,常見功能有 <meta>、<title>、<link> 等,如果把 Canonical Tag 或其他標籤放在<head></head>之外,會因不符合格式而失效。

 

D. 使用絕對路徑網址 

rel=”canonical” 語法中的網址,必須是完整的絕對路徑網址,放上相對路徑會導致語法失效。

 

正確語法:
<link rel=”canonical” href=”https://ranking.works/blog/” />

錯誤語法:

<link rel=”canonical” href=”/blog/” />

 

這邊為大家解釋一下絕對和相對路徑的概念,絕對路徑可以簡單理解為「完整的網址路徑」,而相對路徑指的則是在某個已知的相同範圍下,以省略的方式表達位置的方式。

沿用上面的舉例,Ranking 部落格的絕對路徑是「https://ranking.works/blog/」,如果我們想在同一個層級「https://ranking.works」裡以省落方式表示部落格所在位置,可以用相對路徑「/blog」表示,而若是要指出「關於我們」頁面的位置則可用「/aboutus」來表示,以此類推。

 

如何檢查 rel canonical 代碼是否設定成功?

設定好 Canonical Tag 之後,別忘了要檢查是否有埋設成功!雖然我們可以直接在網頁程式碼中以 Ctrl+F 搜尋 canonical 的方式逐一確認每個網頁是不是有進行設定,但這種做法只適用於網頁數量較少的網站,這邊 Ranking 推薦 4 個常用、可快速檢查的工具給大家參考:

  1. Google Search Console
  2. Google Analytics 4
  3. Ahrefs
  4. 安裝 Chrome 瀏覽器外掛

 

A. Google Search Console

Google Search Console 是官方建議的網址檢查工具,除了可以測試網址是否建立索引外,也能檢查結構化資料、已連結的 AMP 和 Canonical URL。只要依照指示完成網址驗證後,點擊左側列表「產生索引」中的「網頁」,就能看到重複網頁的資訊,如果未設置成功,就會出現「這是重複網頁;使用者未選取標準網頁」的文字訊息,並且 Google 會提供建議的處理方式協助改善。

 

B. Google Analytics 4

如果覺得 Google Search Console 送審檢查的時間過長,也可以直接使用 GA4 查看,從左側報表數據匯報列表依序點擊生命週期>參與>網頁和畫面,就能依序展開查看全部網頁,檢查有無重複內容。

 

C. Ahrefs

大家對 Ahrefs 的印象大多是關鍵字研究工具,但他其實也開發了眾多 SEO 小工具,可以協助評估網站中的各項數據,Canonical URL 也包含在內。雖然功能強大,不過 Ahrefs 並非免費軟體,如果有預算的考量,建議使用其他免費的管道即可。

若有購買 Ahrefs ,可以透過 Site Audit 的功能為網站進行全站健檢,而後便可從健檢結果的All issues 來確認網站中的 Canonical 設置是否有需要調整的頁面。

Ahrefs 的 Site audit 功能確認全站 Canonical 設定

 

若僅要針對單一頁面進行確認,亦可以搭配 Ahrefs 的 Chrome 小工具 Ahrefs SEO Toolbar 來檢視當前頁面的設置是否正確。

Ahrefs SEO Toolbar 小工具確認單一頁面 Canonical 設定

 

D. 安裝 Chrome 瀏覽器外掛

Chrome 上除了上述提到的 Ahrefs 工具外,還有許多 SEO 小工具模組可供選擇,市面上較多人使用的 SEO 外掛工具多數皆有確認 Canonical 的功能,例如:Detailed SEO ExtensionMozbar,安裝後自動抓取原始碼中 rel canonical 代碼,顯示當前頁面的 Canonical 設置,快速檢查代碼設置是否成功,不過外掛工具只能檢視當前頁面的 SEO 設定,若需要檢查的頁面增加,就會花費較多的時間。

透過 Detailed SEO Extension 確認 Canonical 設置狀況

 

Canonical Tag 和 301 轉址在處理重複頁面有什麼區別?

介紹兩者的區別前,先讓我們來簡單說明 301 轉址。「301 轉址」是一種處理網址的手法,當舊網址需要永久邊遷到新網址時所需要執行的步驟,可將整個網站累積的流量、權重全部移轉到新網址。

 

遇到網站出現重複頁面的狀況時,SEO 操作人員最常使用的處理手法便是 301 轉址和 Canonical Tag,但兩者的差別是什麼呢?以下我們透過表格呈現幫助大家快速理解:

 

Canonical Tag 

301 轉址

重複頁面

設定後會降低爬蟲爬取的頻率,但並非完全禁止爬取

而在使用者端仍可自由瀏覽

被重新導向目標網址,無法瀏覽

目標頁面

自由瀏覽,不受影響

自由瀏覽,權重及流量集中到此網址

 

既然兩種方式都能用來處理重複頁面的問題,採用何種方式的判斷依據是什麼呢?接下來就讓我們從情境中來說明該使用 Canonical 還是 301 轉址。

 

Canonical Tag 適用情境

需要設定標準網址最常見的情境是電商網站中「同一商品、不同規格的頁面」。假設一家品牌專門販售球鞋,而這款球鞋總共有 5 種顏色,而且各自有獨立的商品頁面,這種情境下很容易被 Google 誤認為重複內容,但此時不會考慮使用 301 轉址,是因這麼做網站中只會保有單一頁面,使用者將無法瀏覽其他不同顏色的頁面。正確的做法是使用 Canonical Tag 讓爬蟲知道何者是標準網址,同時保留其他 5 個顏色的頁面又不影響網站的的 SEO。

 

301 轉址適用情境

在 SEO 操作實務上重複頁面的問題大多可透過 Canonical 來解決,但有些情況使用 301 轉址來解決會更加合適。

最簡單的判斷依據是「這些重複頁面是否有共存的必要」,以很常出現 http 與 https 頁面同時存在的情形來說明,兩者同時存在不僅會被判定為重複內容,還會使網頁權重被分散,這種情況雖然也可以設定 Canonical 來告訴搜尋引擎爬蟲哪一個版本才是我們的標準頁面,但因為已知 Google 為了使用者的安全鼓勵網站都使用具備安全憑證的 https 網址,在 SEO 操作上可以確定「兩者只需要留下 https 即可」,那麼我們就會建議使用 301 轉址統整這兩個頁面,解決網址太過相近帶來的麻煩。簡單來說,當遇到不再需要、可被淘汰的頁面時,就可以使用 301 轉址的方式處理。

 

如果想要進一步認識 301 轉址,可以參考【301轉址教學】做SEO必學!301轉址為什麼重要?301轉址工具介紹一文

 

Ranking AI SEO 軟體工具,新手也能輕鬆操作上搜尋排名 

Ranking AI SEO 軟體工具提供 3 大主力功能,關鍵字探索、競爭力分析、網頁評測,幫助品牌快速掌握網站狀況。從網站健檢開始,檢查品牌網域是否符合 SEO 規範,並產出優化建議書,協助進行網站 SEO 優化。接著進行關鍵字探索,分析官網與競業的網站,找出適合操作的關鍵字,並透過內建的 AI 文案工具,撰寫相關關鍵字內容,補強品牌官網缺少的議題。最後透過競爭力分析,快速追蹤關鍵字排名。只要 Ranking AI SEO 軟體工具在手,就算沒接觸過 SEO 也能快速上手操作,幫助你攻佔排名。

對 Ranking AI SEO 軟體工具感興趣嗎?歡迎與我們聯絡,我們將盡快提供服務

 

延伸閱讀:

【SEO教學指南】SEO是什麼?如何提升SEO優化技巧?

關鍵字規劃工具|操作Google必推的7款工具大解析

關於 Ranking 小編:

期許用深入淺出的方式帶你進入 SEO 世界,提供實用性高的優質文章,簡化 SEO 複雜流程及技術,讓每個人都能快速理解 SEO 行銷,一起登上 Ranking 火箭讓排名再創高峰!※若有行銷相關問題或者業務合作歡迎隨時與我們聯繫!

其他人也看了...

想透過 SEO 提升品牌曝光度及網站流量,並獲得更多商機嗎?
SEO 專家|Ranking 提供全方位解決方案,讓你排名一飛沖天!

無料相談お申し込み
(たった30秒で申し込み完了できる!)

ご連絡先をお知らせください。3営業日以内にご連絡し、御社のサイト検索順位の向上をサポートいたします!

預約顧問諮詢

請您選擇感興趣的服務,並留下聯繫資訊,我們將於三個工作天內聯繫您,讓你品牌一躍上首頁!