canonical标签必须置于<head>内且使用绝对URL，动态插入、相对路径、放于<body>或指向不可访问/不匹配页面均属错误。
必须用绝对 URL，且只能放在 <head> 里——写错位置或用相对路径，等于没写。
canonical 标签必须放在 <head> 里，不能动态插入
搜索引擎抓取时只解析静态 HTML 的 <head> 区域。如果用 JavaScript 动态添加 <link rel="canonical">（比如 document.head.appendChild()），爬虫根本看不到这个标签。
常见错误包括：
- 把标签误放到了
<body>或注释里 - 在 SSR/SSG 场景下，模板中写死了一个 URL，但实际路由变了（比如 Next.js 里用了
route.fullPath而不是route.path） - 服务端渲染时未根据当前请求动态生成 href 值，导致所有页面 canonical 都指向首页
href 必须是绝对 URL，协议、域名、路径一个都不能少
相对路径（如 /article/123）会被不同入口解析成完全不同的地址：HTTP 页面里解析为 http://example.com/article/123，HTTPS 页面里却变成 https://example.com/article/123；CDN 域名或子域名不一致时更会跨域失效。
立即学习“前端免费学习笔记（深入）”；
正确写法示例：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
<link rel="canonical" href="https://www.example.com/article/123">
注意：
- 协议不能省（
https://必须显式写出） -
www和非www视为两个不同站点，要统一 - 末尾斜杠必须与目标页面真实 URL 一致（
/article/≠/article） - 目标 URL 必须返回
200状态码，不能是重定向链中间跳转页
动态页面怎么安全生成 canonical？以 PHP / Next.js / Nuxt 为例
核心原则：不管 URL 带多少参数（?utm_source=xxx、&page=2、&sort=date），只要主体内容不变，canonical 就该指向无参或标准路径版本。
实操要点：
- PHP 中建议用
parse_url($_SERVER['REQUEST_URI'], PHP_URL_PATH)提取干净路径，再拼上$_SERVER['HTTP_HOST'] - Next.js 页面组件中，避免在
getStaticProps里硬编码 canonical，应通过useRouter()获取router.asPath后过滤 query 参数 - Nuxt 3 推荐在
useHead()中基于route.path构造，别用route.fullPath（它含 query） - 分页场景下，第 2 页的 canonical 绝对不能指向第 1 页——否则 Google 会认为第 2 页无独立价值，可能不索引
canonical 不是万能解药，和 noindex、301 的边界必须分清
它只是给搜索引擎的“建议”，不是强制指令。很多问题看似重复，其实该用别的手段：
- 如果两个 URL 完全等价、且长期只需保留一个（比如旧版已下线），优先用
301重定向，权重传递更完整 - 如果页面本就不该被收录（如登录页、搜索结果页），加
<meta name="robots" content="noindex">，别再设 canonical - 如果页面已设
noindex，再加 canonical 是逻辑矛盾，搜索引擎大概率忽略整个标签 - AMP 页面必须双向对应：
<link rel="amphtml">指向 AMP 版，AMP 版里<link rel="canonical">必须指回原页，缺一不可
最容易被忽略的是：canonical 指向的页面本身，必须可访问、内容匹配、且不能自己又指向别的地址——否则整条链就断了。上线后务必用 Google Search Console 的 “URL 检查” 工具验证，别只看源码有没有标签。
