Canonical URL
Canonical 用來指定主版本 URL，避免參數/排序/追蹤碼造成重複內容與權重分散。
定義
Canonical URL 是用 <link rel="canonical"> 指定「同一內容的主版本 URL」。當同內容可透過多個 URL 存取時，canonical 能避免重複內容稀釋排名訊號。
為什麼重要
- 避免 URL 參數與追蹤碼造成重複內容
- 集中排名訊號到主版本頁面
- 降低搜尋引擎爬取浪費
- 解決分頁、排序、篩選產生的重複 URL 問題
- 跨網域內容鏡像時指定權威來源
- 防止 HTTP/HTTPS 或 www/non-www 版本分散權重
- 讓 Search Console 報告更準確（合併資料到 canonical URL）
怎麼做（實作重點）
- canonical 要指向「可索引、HTTP 200、內容一致」的主版本
- 避免把 canonical 指到無關頁或首頁（容易被視為錯誤訊號）
- 搭配 sitemap 只提交 canonical URL
- 每頁都要有 canonical，即使是自指（self-referencing）
- 使用絕對 URL，不要用相對路徑
- 確保 canonical URL 可訪問（不要指向 404 或 redirect）
- 動態頁面用程式邏輯正確產生 canonical（不要寫死）
範例
html
<!-- 基本 canonical 標籤 -->
<link rel="canonical" href="https://example.com/products/iphone" />
<!-- 分頁的 canonical（指向第一頁或 view-all） -->
<link rel="canonical" href="https://example.com/products" />
<!-- 帶參數的頁面指向乾淨 URL -->
<!-- 當前 URL: /products/iphone?utm_source=newsletter -->
<link rel="canonical" href="https://example.com/products/iphone" />typescript
// React/Vite 動態產生 canonical
import { useLocation } from 'react-router-dom';
import { Helmet } from 'react-helmet-async';
function SEOHead({ title, description }: SEOProps) {
const { pathname } = useLocation();
const baseUrl = 'https://example.com';
// 移除 trailing slash 並產生 canonical
const canonicalUrl = `${baseUrl}${pathname.replace(/\/$/, '') || '/'}`;
return (
<Helmet>
<title>{title}</title>
<meta name="description" content={description} />
<link rel="canonical" href={canonicalUrl} />
</Helmet>
);
}相關連結
常見問題
關於這個詞彙的常見問答。