加 canonical 的关键是判断 URL 参数是否影响主体内容：干扰型参数（如 utm_source）应剔除，语义型参数（如 page、q）须保留；href 必须为绝对 URL，与目标页实际响应完全一致，且由服务端静态写入。
带 URL 参数的页面加 canonical，核心不是“要不要加”，而是“加对不对”——参数是否改变页面主体内容，直接决定 href 该不该保留它。
先判断：这个参数是干扰项，还是语义项？
搜索引擎靠 canonical 区分“同一内容的不同入口”和“不同内容的不同版本”。关键看参数是否影响用户看到的主体信息：
- 干扰型参数（剔除）：utm_source、ref、fbclid、sort、filter、_ga 等——它们只用于追踪或临时视图切换，删掉后页面正文、标题、结构完全不变
- 语义型参数（保留）：page、q、category、id（当它是路由主键）、lang、region 等——删掉会导致内容缺失、错乱或跳转，比如 /blog?page=3 和 /blog 是两页不同内容
href 必须是绝对 URL，且路径与真实返回一致
即使参数被过滤，最终 href 的协议、域名、路径格式必须和目标页实际响应的 URL 完全匹配：
- 当前页是 https://example.com/products?utm_medium=email&id=456，内容等同于 https://example.com/products/456 → canonical 应写：
<link rel="canonical" href="https://example.com/products/456"> - 当前页是 https://example.com/list?q=shoes&page=2，第 2 页有独立标题、商品列表、分页导航 → canonical 应写：
<link rel="canonical" href="https://example.com/list?q=shoes&page=2">，不能指向 page=1 或无参首页 - 末尾斜杠必须一致：如果 https://example.com/article/ 返回 200，而 https://example.com/article 会 301 跳转或 404，那 href 就必须带斜杠
服务端生成时别踩这些坑
canonical 必须在 HTML 输出前由服务端写死，JS 动态插入无效。不同环境处理方式略有差异：
立即学习“前端免费学习笔记（深入）”；
- PHP：用
parse_url($_SERVER['REQUEST_URI'], PHP_URL_PATH)提取干净路径，再拼上$_SERVER['HTTP_HOST']；用正则清除干扰参数，但不碰 page、q 等 - Next.js：避免直接用
router.asPath；推荐基于router.pathname+ 手动过滤router.query中的 tracking 类参数 - Nuxt 3：用
route.path构造，不要用route.fullPath（含 query），否则容易把所有参数原样带上 - Node.js（Express）：优先用
req.originalUrl，它未被中间件修改，比req.url更可靠
验证是否生效，只看源码和状态码
打开页面，右键 → “查看网页源代码”，搜索 rel="canonical"：
- 确认标签唯一、闭合、且位于
<head>内部 - href 值是完整绝对 URL，没有空值、相对路径或协议相对写法
- 点击 href 链接，确保返回 HTTP 200，不跳转、不报错、不重定向到其他地址
