Canonical標籤在網頁設計中的全面應用與最佳實踐指南
Canonical標籤在網頁設計中的全面應用與最佳實踐指南
15-12-2023
HTML中的Canonical規範
相信大家對網頁的正規鏈接標籤(canonical tag)並不陌生。我們可利用這個 HTML 標籤告訴搜尋引擎,本頁面的主要標準連結為哪一個。這樣可避免因為頁面重複而被誤判。 要正確使用的話,只需在網頁部分加上一行程式碼:
<link rel=”canonical” href=”https://www.domain.com”>
href 屬性會指向網頁主要版本的位置。
使用正規鏈接標籤的好處:
CSS 沒有正規鏈接標籤這回事,但透過 CSS 程式碼,仍可提升 SEO 的各個層面。原理如下:
1.集中權重,避免流量分散
例如把多個產品頁面的參數合併到單一主產品頁面,或將 www 和 non-www 轉址至同一域名,這樣可聚合權重外,亦防止分散流量。同樣的概念也適用於將短連結轉址到長連結。
2.移動版與桌面版統一正規
有時移動網站的權重會比桌面網站低,這時可透過正規鏈接標籤將兩個版本統一到單一權威頁面。
3.搜尋引擎判斷準確度提高
告知引擎正規網址的目的,是讓其更準確判讀網站主要內容的位置,從而有助 SEO 排名。這個技術雖然簡單,但應用得當的話,肯定能有顯著的 SEO 幫助!
CSS中的Canonical規範
合理調整內容樣式：例如運用正確的 HTML heading 標籤展示文字段落,而不是全部用 div/span。再將 class/id 命名符合內容語意化。這些小動作能助搜尋引擎正確理解、標示關鍵資料。
移動版優化：同時兼顧不同裝置,無縫提供類近的閲覽體驗,能有效提高移動用戶的黏著度;而長短句子並存的寫作,更能增加文本的吸引力與可讀性。利用 media query 實現回應式設計;控制水準滾動、適配各螢幕尺寸也很重要。
性能、符合規範：壓縮 CSS/JS、非關鍵資源延後載入,有助加快頁面載入;妥善運用快取機制也可起加速作用。此外,緊扣無障礙標準有益 SEO,因為搜索引擎爬蟲能更輕鬆抓取分析這類網頁內容。
以上種種優化措施,雖然並非 canonical tag 本身,但無疑能對 SEO 形成正面推動力,實在不容忽視!
總結主要體現在以下幾個方面:
- 1.合理的內容樣式
- 使用正確的heading標籤(h1-h6)表示內容層級結構
- 避免統一使用div/span標籤
- 語義化cass/id命名
- 這些做法都可以幫助搜索引擎爬蟲理解頁面中的內容語義,提取關鍵資訊。
- 2.移動端優化
- 使用CSS media query實現回應式設計
- 避免水準滾動,適配不同螢幕
- 合理控制tap目標大小
- 以上做法將提高移動用戶的體驗,有助於移動端網頁的SEO。
- 3.頁面加載性能
- 精簡CSS/JS檔大小
- 使用非同步加載非關鍵資源
- 合理使用緩存
- 優化的加載速度可以減少跳出率,提高頁面在搜索引擎的評價。
- 4.符合可訪問性標準
- 顏色對比、字體大小
- 語義化HTM標籤
- WAI-ARIA屬性
- 良好的可訪問性讓搜索引擎更容易解析網頁內容,有助SEO。
雖然CSS與canonical無直接關係,但CSS的最佳實踐可以對SEO產生積極的影響與促進作用。
使用規範URL的原因
常言道:“熟能生巧”。但說到網站優化,重複內容卻是大忌,必定招來搜索引擎“紅牌”!要規避風險,使用規範網址(Canonical URL)是不二法門。
例如一個產品頁面,同時存在：
細細琢磨,多版本頁面容易分散權重,也易被搜索引擎視為自動生成內容。假如產品頁同時存在多個鏈接參數,規範標籤可發揮作用,將權重集中指向一個統一網址。
品牌若開設多個站點域名,也可利用規範鏈接聚合至主站;不同格式如網頁移動版及APP的內容重複,亦可透過此方法消除。
效果理想的話,主要頁面流量增加、排名上升皆在可期。反之,就算沒有明顯損害,分散化也非上策,網站內容體系仍有進一步整合空間。
在優化工作上,標籤技術細節固然重要,但更要從宏觀著眼,理解並區分頁面版本優劣,甄選核心內容,規範優化。此消彼長,SEO 成效才能持久。
Canonical標籤的基本使用方式和不同設置示例:
1.HTML頁面中直接設置
在頁面的部分加入鏈接標籤:
<link rel=”canonical” href=”https://www.domain.com/blog” />
這是最簡單直接的設定canonical標籤方式。
2.JS代碼中動態生成
可以通過JS代碼動態插入canonical 標籤:
var canonical = document.createElement(‘link’);
canonical.rel = ‘canonical’;
canonical.href = ‘https://www.domain.com/blog’;
document.head.appendChild(canonical);
適用於JS渲染的頁面。
3.PHP後臺代碼中生成
可以在PHP後臺範本中直接輸出canonical標籤：
<?php echo ‘<link rel=”canonical” href=”‘. $canonicalURL .'”>’; ?>
通過PHP變數動態設定網址。
4.NET後臺C#代碼中寫入Response
Response.Write(“<link rel=\”canonical\” href=\”https://www.domain.com/blog\”>”);
適用於ASP.NET站點。
5.Java Servlet中設置回應頭
response.setHeader(“Link”, “<https://www.domain.com/blog>; rel=canonical”)
通過設置Link頭資訊添加標籤。
6.Nginx Rewrite規則中加入回應頭
rewrite ^ /page? break;
header append Link “<https://www.domain.com/blog>; rel=canonical”;
7.Apache .htaccess檔中設置回應頭
Header append Link “<https://www.domain.com/blog>; rel=canonical”
8.Flask後臺Python框架中設置
@app.route(‘/page’)
def page():
response = make_response(render_template(‘page.html’))
response.headers[‘Link’] = ‘<https://www.domain.com/blog>; rel=canonical’
return response
以上是一些主要的Canonical標籤設置示例,可以根據不同後臺語言選擇合適的方式。
Canonical標籤的實施與檢測
在網站完成Canonical標籤設置後來，檢測方式可以用以下幾種：
1.流覽器插件查驗
大家比較常用的流覽器插件有SEOquake、MozBar等，在進行安裝後可以在訪問網站頁面時直接查看站點是否已經使用Canonical標籤,用起來很便利。
使用流覽器外部插件檢查網站是否成功設置了Canonical標籤的方法如下:
SEOquake ：安裝流覽器插件後,直接訪問該頁面,左下角可以看到顯示: Canonical URL: https://www.domain.com/blog
可知規範到沒有參數的產品主頁面。
MozBar ：同樣查看目標頁面後,MozBar會在網頁右邊顯示一個Purple Box框,點開後在Canonical URL一項中可以看到鏈接的目標頁面。
Screaming Frog ：在Software介面輸入示例頁面鏈接,點Crawl Website後即開始檢測網站內頁面的Canonical資訊,最後輸出詳細列表報告。
Ahrefs ：登陸Ahrefs,在URL Explorer功能中輸入示例頁面鏈接,點擊檢查頁面,在返回結果的Canonical URL一欄可看到被設置的目標地址。
這些都是行業內比較推薦的能夠直觀顯示當前頁面Canonical設置情況以及目標頁面資訊的插件和工具,使用簡單方便,可以很好地檢查網站的Canonical標籤是否設置正確。
2.利用線上工具
例如Google搜索控制臺的URL檢測工具,可以輸入頁面URL來查詢檢測是否含有Canonical標籤資訊。Screaming Frog爬蟲工具也可以檢查指定網頁的Canonical。
這裏推薦幾種online工具來檢測網站Canonical標籤,並舉例說明檢測過程:
Google搜索控制臺URL檢測工具
訪問搜索控制臺,選擇URL檢測功能
輸入需要檢測的頁面,如 https://www.domain.com/blog
搜索結果會顯示該頁面的Canonical標籤資訊
即可查看規範的目標頁面
Screaming Frog SEO Spider
打開Screaming Frog軟體,輸入網站URL
點擊Crawl網站即自動遞歸爬取
最後在列表裏查看每一個頁面的Canonical列
即可批量檢查整站設置情況
Ahrefs 網站檢測工具
登陸Ahrefs,在工具欄選擇URL Explorer
輸入要檢測頁面的鏈接,點擊分析
結果頁面會明確顯示Canonical URL
與設置的目標頁面對比檢查
以上都是免費或試用的線上網站檢測工具,操作簡便,結果明確,可以快速檢查網頁Canonical設置的正確性。
3.檢視網頁源代碼
步驟:
流覽器打開需要檢測的網頁
按下F12鍵打開開發者工具,找到Element面板
在頁面源代碼中查找:
確認href屬性是否有填入正確的主要頁面網址
如果源代碼中存在上述標籤和屬性,則表示Canonical標籤設置成功。其href路徑就是當前頁面內容的主要網址聲明。
此外也可以直接在流覽器地址欄後面加上view-source:首碼來查看原始網頁源代碼判斷是否存在Canonical元標籤資訊。
Canonical標籤的常見問題與解答:
Q: 跨域是否可以使用Canonical標籤?
A: 原則上不建議,主要針對站內重複內容。部分特殊業務場景如多區域站點下可測試謹慎使用。案例如內容站部分文章頁規範到電商產品頁。
Q: 設置Canonical後搜索引擎的處理方式是?對排名影響?
A: 搜索引擎會採納規範頁面為主要版本,其他頁面作為副本。長期有利於主頁面權重提升,排名提高。
Q: HTTP和HTTPS同時存在時如何設置Canonical?
A: 應將所有HTTP頁面規範到HTTPS頁面,這是必要的優化方案。
Q: 僅AMP頁面的Canonical設置建議?
A: 建議使用Canonical將AMP頁面規範到對應的PC網頁URL,因為AMP缺乏完整元數據。
Q: 能否自動為全站設置Canonical?優缺點?
A: 可以自動批量生成,輔助消除重複內容,但也存在風險。需要評估實施的必要性。
Q:網頁title標籤中的Canonical屬性有什麼作用?使用時有什麼注意事項?
A:title標籤的Canonical用於告知搜索引擎看到同樣標題時指向規範網址。注意不能替代標準的link Canonical,只是輔助作用。
Q:對於拆分成多頁的長內容,使用Canonical標籤需要考慮哪些方面的因素?
A:需要考慮拆分邏輯、首尾頁以及中間內容頁的鏈接關係,同時鏈接到完整版也是必要的。
Q:使用rel=“alternate” 屬性與 Canonical 有什麼關聯與區別?
A:alternate用於指向替代版本,Canonical用於指向規範版本。 fines有互補作用但不衝突。
Q:移動APP中的網頁是否也可以設置Canonical 鏈接?有什麼限制因素?
A:移動APP可使用Universal Links技術插入Canonical元數據,但部分APP對外鏈支持並不完善,需要考量。
Q:使用 CMS 系統建站時,Canonical 的設置有什麼好的方式?
A:許多 CMS 系統如 WordPress 都有相關插件實現自動化設置。也可以修改源範本添加自定義功能。