rel="canonical"是搜索引擎识别规范URL的建议性标签，须置于<head>中且仅一个，必须用绝对路径，动态页需过滤干扰参数但保留分页等语义参数，AMP页须双向对应；它非强制指令，仅在搜索引擎认为可信合理时生效。
什么是 rel="canonical"？它真能解决重复内容问题？
能，但只在搜索引擎爬虫层面起作用，对用户和页面渲染完全无影响。它的本质是一条“建议性声明”，告诉搜索引擎：“这个 URL 才是这组相似页面的‘权威版本’”。注意，不是强制指令——如果多个页面互相指对方为 canonical，或 canonical 指向 404/重定向链过长，搜索引擎大概率会忽略它。
<link rel="canonical"> 应该放在哪？放错位置会怎样？
必须放在 <head> 内，且越靠前越好（最好在 <title> 后、其他 <link> 前）。常见错误包括：放在 <body> 里、用 JavaScript 动态插入、或通过 HTTP Header 发送但 HTML 里又写了冲突的值。一旦放错位置，Google 等主流爬虫直接无视该标签，等于没写。
URL 绝对路径 vs 相对路径？href 值怎么写才不踩坑？
必须用绝对 URL，且协议、域名、路径全部显式写出。以下写法全是错的：
-
<link rel="canonical" href="/article?id=123">（相对路径，缺协议和域名） -
<link rel="canonical" href="//example.com/article">（协议相对，可能被解析为 http 或 https 不一致） -
<link rel="canonical" href="https://example.com/article?utm_source=mail">（带跟踪参数，破坏 canonical 的去重意图）
正确写法只有一种：<link rel="canonical" href="https://example.com/article">。确保该 URL 返回 200 状态、无重定向、内容主体与当前页高度一致。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
动态页面（如带分页、筛选、UTM 参数）怎么写 canonical？
核心原则：canonical 指向“内容本质相同”的最简、最权威的 URL。例如：
- 分页列表页
/blog?page=2→ canonical 指向/blog（除非是独立内容分页，如新闻合集，则应指向自身并配合rel="next"/"prev"） - 商品筛选页
/products?color=red&size=m→ canonical 指向/products（筛选结果非独立内容） - 带 UTM 的分享链接
/article?utm_medium=social→ canonical 指向/article（UTM 纯属追踪，不应参与去重）
容易被忽略的是：服务端渲染（SSR）或静态生成（如 Next.js、Nuxt）时，需在每次响应前动态计算 canonical 值，不能硬编码。否则首页的 canonical 可能被错误带到所有子页面上。
