canonical标签是搜索引擎识别规范url的建议性标签，必须置于中且仅一个，须用绝对路径，动态页需过滤干扰参数但保留分页等语义参数，amp页须与canonical双向对应。
canonical 标签不能强制搜索引擎执行，但它是最直接、最可控的重复内容协调手段——只要 href 值写对、位置放对、逻辑自洽，Google 就大概率采纳。
canonical 标签必须放在
常见错误是把它塞进 、用 JS 动态插入、或在同一个页面里写两遍。搜索引擎抓取时只解析静态 HTML 的 部分，JS 还没执行就走了； 里的 <link rel="canonical"> 直接被忽略；两个 canonical 会让 Google 视为信号冲突，可能整个标签作废。
正确做法：
- 确保它出现在 开始后、 前的任意位置
- 模板渲染时硬编码或服务端动态生成，别依赖客户端 JS
- 检查最终 HTML 源码，确认只有一处 <link rel="canonical">
href 必须是绝对 URL，协议、域名、路径一个都不能少
相对路径如 /article/123 或协议相对路径如 //example.com/article 极易出错：HTTP 页面里解析成 HTTP 地址，HTTPS 页面里变成 HTTPS，CDN 域名下又可能指向错误源站。Google 明确要求绝对 URL。
实操要点：
- 写全 https://www.example.com/article/123，不要省略 https:// 和 www.
- 路径末尾斜杠要和目标页面实际返回的 URL 一致（/article/ ≠ /article）
- 动态页面中，从 $_SERVER['HTTP_HOST']（PHP）或 request.headers.host（Node）等可信服务端变量拼接，别信 window.location
动态页面设 canonical 时，要过滤参数但不能误杀分页
用户访问 /product?id=123&utm_source=email 和 /product/123，内容一样，canonical 就该统一指向后者；但访问 /blog?page=2 时，如果 canonical 指向 /blog（第 1 页），Google 会认为第 2 页没有独立价值，可能不索引。
关键判断点：
- 参数是否影响主体内容呈现？?sort=price、?ref=abc 属于干扰参数，应剔除
- 分页、筛选结果页（如 /search?q=foo&page=3）通常需保留 page 参数，canonical 指向自身
- Next.js 中避免用 route.fullPath，改用 route.path + 手动清理 query
- Nginx 重写规则不能替代 canonical：重写只改用户看到的 URL，不解决爬虫抓到多个参数 URL 的问题
canonical 不是万能解药，和 noindex、301 用错会互相打架
最常踩的坑是逻辑矛盾：在 <meta name="robots" content="noindex"> 的页面上还加 canonical；或者对已 301 跳转的旧 URL，还在跳转前页面设 canonical 指向跳转后地址。
合理分工：
- 页面要长期存在、只是有多个入口 → 用 canonical
- 页面已废弃、永久迁移 → 用 301 重定向（权重传递更强）
- 页面不该被索引（如登录页、测试页）→ 用 noindex，别加 canonical
- AMP 页面必须双向对应：<link rel="amphtml"> 指向 AMP 版，AMP 版里 <link rel="canonical"> 必须指回原页，缺一不可
真正难的不是写那行 <link rel="canonical">，而是搞清每个 URL 变体背后的内容语义是否真的“相同”——比如带参数的搜索页和首页，看着像，但 Google 认为它们内容不同。这时候硬加 canonical，反而会被忽略。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
