canonical标签不能消除重复内容，只能告诉搜索引擎优先索引哪个URL；它必须唯一置于<head>中、使用绝对URL、过滤非语义参数但保留分页，且严禁与noindex或301混用。
canonical 标签不能消除重复内容，只能告诉搜索引擎你希望它优先索引哪个 URL。 它不删页面、不改跳转、不阻止访问，只是一条建议性信号——写错位置、值不匹配或逻辑矛盾，就等于没写。
canonical 标签必须放在 <head> 里，且只能有一个
搜索引擎抓取时只解析静态 HTML 的 <head> 区域，JS 还没执行就走了。常见失效场景：
- 把
<link rel="canonical">写在<body>里 —— 直接忽略 - 用 JavaScript 动态插入（如
document.head.appendChild()）—— 爬虫看不到 - 模板里硬编码了固定 URL，但路由变了（比如 Next.js 中
route.fullPath没过滤 query）—— 所有页面 canonical 都指向首页 - 同一页面出现两个
<link rel="canonical">—— Google 可能整个标签作废
验证方法很简单：打开网页源码（Ctrl+U），搜索 rel="canonical"，确认它唯一、闭合、且在 <head> 区域内。
href 必须是绝对 URL，协议、域名、路径一个都不能少
相对路径（如 /article）或协议相对路径（如 //example.com/article）极易出错：
立即学习“前端免费学习笔记（深入）”；
- HTTP 页面里解析成
http://地址，HTTPS 页面里却变成https:// - CDN 域名或 www 切换时指向错误站点
- 漏写
https://或写错子域名（www.example.com≠example.com）
正确写法只有一种：<link rel="canonical" href="https://www.example.com/article">。注意末尾斜杠必须与目标页真实返回的 URL 一致（/article/ ≠ /article），且目标 URL 必须返回 200 状态码，不能是 404 或重定向链中间页。
动态页面生成 canonical 时，要过滤非语义参数但保留分页
用户访问 /product?id=123&utm_source=email 和 /product/123，内容一样，canonical 就该统一指向后者；但访问 /blog?page=2 时，如果 canonical 指向 /blog（第 1 页），Google 会认为第 2 页无独立价值，可能不索引。
- PHP：用
parse_url($_SERVER['REQUEST_URI'], PHP_URL_PATH)提取路径，拼接https://$_SERVER['HTTP_HOST'] - Next.js：避免用
router.asPath，改用router.pathname+ 手动清理 tracking 类 query 参数 - Nuxt 3：在
useHead()中基于route.path构造，别用route.fullPath（含 query）
分页、筛选结果页（如 /search?q=foo&page=3）通常需保留 page 参数，canonical 指向自身。
canonical 不是重定向，和 noindex、301 混用会互相打架
这是最常踩的坑：
- 已配置
301跳转的旧 URL，不要再加 canonical 指回自己或跳转前地址 -
noindex页面上设 canonical 属于自相矛盾，Google 很可能忽略该 canonical - 全站所有页面都指向首页？—— 严重错误，会丢失内页权重
- AMP 页面的 canonical 指向 PC 页后，PC 页却不加
<link rel="amphtml">—— 双向对应缺一不可
真正容易被忽略的点是：canonical 是“建议”，不是指令。它只在搜索引擎认为你给的链接可信、合理、且与其他信号不冲突时才生效。哪怕写对了，如果目标页内容与当前页差异过大，或者多个页面互相指错，Google 仍可能无视它。
