canonical标签必须置于内且唯一，href须为绝对URL、与页面实际地址严格一致；禁止JS注入、相对路径、多标签或与noindex/301混用。
canonical 标签必须放在
搜索引擎只在解析 HTML 静态 时读取 <link rel="canonical">，其他位置一律无视。常见失效场景包括：
• 把标签塞进 或注释里
• 用 JavaScript 动态插入（document.head.appendChild()）
• 在 SSR/SSG 模板中硬编码了固定 URL，但实际路由变了（比如 Next.js 里误用 route.fullPath）
• 同一页面写了两个 <link rel="canonical">，信号冲突导致整条被忽略
验证方法很简单：打开网页源码（Ctrl+U），搜索 rel="canonical"，确认它唯一、闭合、且位于 区域内。
href 值必须是绝对 URL，相对路径或协议相对路径全都不行
href 值漏掉协议或域名，爬虫就无法准确定位“权威版本”。以下全是错的：
• <link rel="canonical" href="/article/123">（相对路径，HTTP/HTTPS 环境下解析结果不同）
• <link rel="canonical" href="//example.com/article/123">（协议相对，CDN 或混合环境易指向错误协议）
• <link rel="canonical" href="http://example.com/article/123">（HTTPS 站点用 HTTP，被视为不安全跳转）
正确写法只有一种：<link rel="canonical" href="https://www.example.com/article/123">。
注意三点：
• 协议（https://）不能省
• www 和非 www 是两个不同站点，选一个并全站统一
• 路径末尾斜杠必须与目标页真实返回的 URL 一致（/article/ ≠ /article）
动态页面生成 canonical 时，要过滤干扰参数但保留分页等语义参数
URL 带 ?utm_source=mail&ref=abc 这类跟踪参数，内容没变，canonical 就该剔除；但 ?page=2 这种影响主体内容的参数，必须保留——第 2 页不能指向第 1 页，否则 Google 会认为该页无独立价值，可能不索引。
实操建议：
• PHP 中用 parse_url($_SERVER['REQUEST_URI'], PHP_URL_PATH) 提取干净路径，再拼上 https://$_SERVER['HTTP_HOST']
• Next.js 页面中避免直接用 router.asPath，应手动过滤 tracking 类 query 参数
• Nuxt 3 推荐基于 route.path 构造，别用 route.fullPath（含 query）
关键判断点：参数是否改变页面主体内容呈现？sort=price、ref=xxx 属于干扰项，page=3、q=foo 通常需保留。
canonical 不是重定向，和 noindex 或 301 混用会直接失效
它只是给搜索引擎的建议，不是强制指令，更不改变用户访问行为。最容易踩的逻辑坑：
• 在 <meta name="robots" content="noindex"> 的页面上还加 canonical —— 自相矛盾，Google 很可能忽略整条
• 对已配置 301 跳转的旧 URL，还在跳转前页面设 canonical 指向跳转后地址（正确做法是：所有能访问的页面，canonical 都应指向语义上的首选版本，即新地址）
• 全站所有页面都指向首页 —— 内页权重会被清零，属于严重误配
• AMP 页面只加 <link rel="canonical">，但 PC 页没配 <link rel="amphtml"> —— 双向对应缺一不可
立即学习“前端免费学习笔记（深入）”；
