canonical标签必须置于<head>内且用绝对URL，动态插入、相对路径、放于<body>或指向不可访问页均错误；需唯一、闭合、目标页返回200状态码。
canonical标签必须写在里，动态插入无效
搜索引擎只解析初始 HTML 源码的 <head> 区域，不执行 JS，也不读取 <body> 中的内容。你用 document.head.appendChild() 动态加的 <link rel="canonical">，Google 根本看不到。
常见错误包括：
- 把标签写在
<body>开头或注释里 - SSR/SSG 模板中硬编码了固定 URL，但实际路由变了（比如 Next.js 里用了
route.fullPath而不是route.pathname） - CMS 主题 + SEO 插件各自输出一个，导致页面出现两个
<link rel="canonical">
验证方式很简单：右键 → “查看网页源代码”，搜索 rel="canonical"，确认它唯一、闭合、且在 <head> 内。
href 必须是绝对 URL，相对路径会出错
写成 /article/123 或 //example.com/article/123 都不行。HTTP 页面里它可能被解析为 http://...，HTTPS 页面里却变成 https://...；CDN 回源时 host 头被改写，还可能指向错误源站。
立即学习“前端免费学习笔记（深入）”；
正确写法只有一种：<link rel="canonical" href="https://www.example.com/article/123">
注意三个硬性要求：
- 协议不能省——
https://必须显式写出 - 子域名要统一——
www.example.com和example.com是两个不同规范域 - 末尾斜杠必须和目标页真实返回的 URL 一致——
/article/≠/article，否则可能 404 或跳转，导致 canonical 失效
动态页面生成 canonical 时，参数过滤要分清语义和干扰
判断标准就一个：这个参数是否改变了页面主体内容？
干扰型参数（如 ?utm_source=xxx、?ref=abc、?sort=date）必须剔除；语义型参数（如 ?page=2、?q=foo）通常应保留——第 2 页不是第 1 页的副本，它有独立索引价值。
实操建议：
- PHP：用
parse_url($_SERVER['REQUEST_URI'], PHP_URL_PATH)提取干净路径，再拼上$_SERVER['HTTP_HOST'] - Next.js：在页面组件中通过
useRouter()获取router.pathname，手动过滤router.query中的 tracking 类参数，别用router.asPath - Nuxt 3：在
useHead()中基于route.path构造，不要用route.fullPath
canonical 不能和 noindex 或 301 混用
它只是给搜索引擎的建议，不是开关，也不是重定向。混用会引发逻辑冲突：
- 在
<meta name="robots" content="noindex">的页面上设 canonical，搜索引擎可能直接忽略 canonical - 对已 301 跳转的页面，再设 canonical 指向跳转前地址，属于信号矛盾
- 全站所有页面 canonical 都指向首页，内页权重会被清零
真正该用 301 的场景（如旧 URL 下线），就别写 canonical；该用 noindex 的页面（如登录页、搜索结果页），canonical 就不该存在。
最常被忽略的一点：目标 URL 必须返回 HTTP 200 状态码，不能是重定向链中间页，也不能是 robots.txt 禁止抓取的地址。
