正确使用可解决大部分重复内容索引冲突，但写错比不写更危险：它必须唯一、闭合、置于中，href须为绝对url且与目标页真实url严格一致（含协议、域名、末尾斜杠），干扰参数需剔除而分页等语义参数应保留，严禁与noindex或301混用。
直接写对 <link rel="canonical"> 就能解决大部分重复内容索引冲突，但写错比不写更危险——它不是开关，是给搜索引擎的明确建议，信号一错，内页权重可能被清零。
canonical 标签必须放在
搜索引擎只解析 HTML 初始源码的 区域，不会执行 JS，也不看 里的内容。你用 document.head.appendChild() 动态插入，或者把标签塞进 开头，Google 就当它不存在。
- 检查最终 HTML 源码（右键 → “查看网页源代码”），搜索
rel="canonical"，确认它唯一、闭合、且在内 - CMS 或多插件主题容易重复注入——比如 SEO 插件 + 主题模板各写一个，结果页面出现两个
<link rel="canonical">，Google 可能直接忽略整条 - 标签不能写在注释里、
<script></script>中、外部 CSS/JS 文件里，这些位置一律无效
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，否则返回 404 或跳转都会让 canonical 失效 - 目标 URL 必须返回 HTTP 200 状态码，不能是 301 跳转链中间页，也不能是 robots.txt 禁止抓取的地址
动态页面中怎么安全过滤 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 参数（如utm_*、ref），别直接用router.asPath - Nuxt 3 别用
route.fullPath（含 query），改用route.path构造href值 - 电商商品页访问
/product?id=123&utm_source=email，canonical 应指向/product/123（无参标准路径） - 博客列表页访问
/blog?page=2，canonical 必须指向自身https://example.com/blog?page=2，绝不能指向/blog
canonical 不是万能解药，和 noindex、301 混用会冲突
它只是给搜索引擎的“建议”，不是强制指令。很多问题看似重复，其实该用别的手段：
- 如果两个 URL 完全等价、且长期只需保留一个（比如旧版已下线），优先用
301重定向，权重传递更完整 - 如果页面本就不该被收录（如登录页、搜索结果页），加
noindex即可，再设 canonical 是逻辑矛盾，搜索引擎可能忽略 - 不要在已
301跳转的页面上再设 canonical 指向跳转前的地址 - 全站所有页面 canonical 都指向首页，是严重错误，会丢失全部内页权重
最常被忽略的一点：当页面有 AMP 版本时，<link rel="amphtml"> 和 rel="canonical" 必须双向对应，否则 AMP 无效。验证方式很简单——打开网页源码，确认 rel="canonical" 存在、唯一、位置正确、值准确，且目标页真实可访问并返回 200。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
