rel="canonical"标签必须唯一且置于HTML的<head>中，href需为绝对URL、与目标页完全一致，动态页面须按语义保留或剔除query参数，避免与noindex或301冲突。
rel="canonical" 标签不是开关，写错比不写更危险——它是一条明确的信号，一旦 href 值错误、位置放错或逻辑矛盾，搜索引擎可能直接忽略整条标签，甚至误判内页权重。
Canonical 必须放在 <head> 里，且只能有一个
搜索引擎只解析 HTML 初始源码的 <head> 区域，不会执行 JS，也不看 <body> 里的内容。你用 document.head.appendChild() 动态插入，或者把标签塞进 <body> 开头，Google 就当它不存在。
常见失效场景包括：
- 标签被 CMS 插件和主题模板重复注入，导致同一页面出现两个
<link rel="canonical"> - 在 SSR/SSG 框架中硬编码了固定 URL，但实际路由变了（比如 Next.js 中用了
router.asPath而没过滤 query） - 服务端渲染时未根据当前请求动态生成
href值，结果所有页面 canonical 都指向首页
验证方法很简单：右键 → “查看网页源代码”，搜索 rel="canonical"，确认它唯一、闭合、且在 <head> 内。
href 必须是绝对 URL，协议/域名/路径一个都不能少
相对路径如 /article/123 或协议相对路径如 //example.com/article 极易出错：HTTP 页面里变成 http://，HTTPS 页面里变成 https://，CDN 回源时还可能指向错误源站。
立即学习“前端免费学习笔记（深入）”；
正确写法只有一种：<link rel="canonical" href="https://www.example.com/article/123">
注意几个硬性细节：
-
https://不能省，www.和非www.是两个不同规范域，选一个并全站统一 - 路径末尾斜杠必须和目标页面真实返回的 URL 一致：
/article/≠/article - 目标 URL 必须返回 200 状态码，不能是 404 或重定向链中间页
动态页面怎么安全过滤 query 参数？分页和追踪参数处理逻辑完全不同
核心判断标准：参数是否改变页面主体内容？
干扰型参数（如 ?utm_source、?ref、?sort）要剔除；语义型参数（如 ?page=2、?q=foo）通常应保留——第 2 页不是第 1 页的副本，它有独立索引价值。
实操建议：
- PHP 中推荐用
parse_url($_SERVER['REQUEST_URI'], PHP_URL_PATH)提取路径，再拼上$_SERVER['HTTP_HOST'] - Next.js 中避免在
getStaticProps里硬编码路径；应在自定义 hook 里手动剔除 tracking 类 query 参数 - Nuxt 3 别用
route.fullPath（含 query），改用route.path构造href
电商商品页访问 /product?id=123&utm_source=email，canonical 应指向 /product/123；博客列表页访问 /blog?page=2，canonical 必须指向自身，绝不能指向 /blog。
别和 noindex、301 混用，信号冲突会让 canonical 失效
最常踩的坑是逻辑矛盾：
- 在
<meta name="robots" content="noindex">的页面上还加rel="canonical" - 对已配置
301跳转的旧 URL，还在跳转前页面设 canonical 指向跳转后地址 - 全站所有页面 canonical 都指向首页（严重错误，会丢失内页权重）
canonical 不是重定向，也不是 noindex，它只是给搜索引擎的建议。如果两个 URL 完全等价且长期只需保留一个，优先用 301；如果需共存（如 PC 页与 AMP 页），才用 canonical 标明主从关系，并确保双向对应（AMP 页要有 rel="canonical"，PC 页要有 rel="amphtml"）。
真正容易被忽略的是：canonical 的有效性高度依赖服务端输出的真实 HTML 结构。哪怕框架层写了逻辑，只要最终源码里没出现、位置错、值不对，就等于没写。上线后务必用 Google Search Console 的“URL 检查”工具验证，而不是只看开发环境渲染结果。
