前端进阶之旅前端进阶之旅
基础篇
进阶篇
高频篇
精选篇
手写篇
面经篇
AI 篇
原理篇
每日一题
小程序题库
知识卡片
  • 场景篇按分类整理的大前端场景考点
  • 历年面经按年份追踪真实考点
  • 算法题库NEW在线编码即时判题
  • 专项自测100 题快速查漏
  • 前端基础
    • HTTP从报文一路讲到 HTTPS
    • 浏览器渲染、事件循环、进程
    • 计算机基础Linux、网络、操作系统
  • 进阶专项
    • 设计模式23 种模式怎么用
    • 前端系统进阶学习大型项目工程化
    • 前端综合文章长期沉淀的实践文
  • 工程与工具
    • Node学习指南从环境搭建到服务端
    • NPM工作流script、依赖与发布
    • Docker容器化部署上手
    • Canvas图形与动画实战
  • 路线与导图
    • 思维导图知识点全景图
    • 学习路线按图索骥不跑偏
  • 动态
    • 公众号动态公众号历史文章
    • 博客动态站长的技术博客
    • 开发者导航常用工具与文档站
  • AI 助手随时提问,即时解析
  • AI 模拟面试模拟真实面试 + 报告
  • AI 知识地图串起全站知识点
  • AI 定制路线按你的简历现排
AI 热点
旧版
基础篇
进阶篇
高频篇
精选篇
手写篇
面经篇
AI 篇
原理篇
每日一题
小程序题库
知识卡片
  • 场景篇按分类整理的大前端场景考点
  • 历年面经按年份追踪真实考点
  • 算法题库NEW在线编码即时判题
  • 专项自测100 题快速查漏
  • 前端基础
    • HTTP从报文一路讲到 HTTPS
    • 浏览器渲染、事件循环、进程
    • 计算机基础Linux、网络、操作系统
  • 进阶专项
    • 设计模式23 种模式怎么用
    • 前端系统进阶学习大型项目工程化
    • 前端综合文章长期沉淀的实践文
  • 工程与工具
    • Node学习指南从环境搭建到服务端
    • NPM工作流script、依赖与发布
    • Docker容器化部署上手
    • Canvas图形与动画实战
  • 路线与导图
    • 思维导图知识点全景图
    • 学习路线按图索骥不跑偏
  • 动态
    • 公众号动态公众号历史文章
    • 博客动态站长的技术博客
    • 开发者导航常用工具与文档站
  • AI 助手随时提问,即时解析
  • AI 模拟面试模拟真实面试 + 报告
  • AI 知识地图串起全站知识点
  • AI 定制路线按你的简历现排
AI 热点
旧版
首页程序员面试题库canonical URL 重复内容 SEO
HTML语义与文档

同一内容有多个 URL,canonical 链接该怎么写?

在重复或高度相似页面的 <head> 中放 <link rel="canonical" href="首选 URL">,告诉搜索引擎你希望哪个地址作为代表。它是强信号,但搜索引擎仍会综合内容、链接和其他信号自行选择,不保证完全照做,也不会把访问者跳转到首选页。

前端进阶之旅 · 一题精讲更新于 2026.09.29
HTML#语义与文档
先看核心答案读代码示例
理解线索

为重复页面指出首选地址

  1. 重复 URL不同地址可能返回相同或高度相似的正文
  2. rel="canonical"向搜索引擎声明站点偏好的代表地址
  3. 规范页搜索引擎综合信号后选出的代表页面

首选页也可以写指向自身的规范链接,且站内链接与站点地图应尽量保持同一首选地址。

核心回答

先记住这个答案

同一篇内容若能通过多个 URL 访问,可以在这些 HTML 页面的 <head> 中放规范链接,指向希望搜索引擎采用的代表地址。例如排序参数或追踪参数生成的页面,可共同指向不带这些参数的内容页。rel="canonical" 是搜索引擎判断重复页面的强信号,不是强制指令;搜索引擎仍可能选择不同的规范页。它也不会让浏览器自动跳转,用户仍留在当前地址。

  • 规范链接放在 HTML 的 <head> 中
  • href 指向希望保留的首选 URL
  • 它是搜索引擎信号,不是跳转
  • 搜索引擎仍可能选择其他规范页

重复地址怎样指向同一篇内容

假设文章既有 /guide,又能通过 /guide?utm_source=mail 打开。两者的主要内容相同,若希望搜索结果展示干净地址,就让带参数的页面声明 /guide 为首选页。首选页本身也可以写指向自己的规范链接,使各处表达一致。

在文档头部声明首选页HTML
<head>
  <title>布局指南</title>
  <link
    rel="canonical"
    href="https://example.com/guide"
  />
</head>

实际页面应把示例域名换成站点真实地址。使用绝对 URL 能减少相对路径在不同页面层级下被解析到意外位置的风险;还要核对协议、主机名、末尾斜杠与站点地图是否一致。只在正文里写“这是原文地址”或加普通 <a> 链接,不能替代文档头部的规范声明。

搜索引擎会怎样处理

搜索引擎先识别哪些 URL 的内容相同或足够相似,再综合规范链接、重定向、内部链接与站点地图等信号选择代表页。规范链接有助于把重复 URL 的信号归到首选地址,并减少搜索结果中多个相似地址竞争;但“加了就一定收录指定页、一定传递全部权重”是过度承诺。若首选地址返回错误、内容与当前页差别很大,或者站点其他信号互相矛盾,搜索引擎可能不采纳它。

在排查时,应同时看页面原始 HTML 里的规范链接、目标 URL 能否正常访问、页面主要内容是否一致,以及搜索引擎实际选中的规范页。不要只看浏览器地址栏,因为 canonical 本来就不改变用户当前的 URL。若页面必须永久迁移,服务器重定向才会把访问者和爬虫带到新地址。

与重定向和站点地图怎么分工

canonical 适合保留多个可访问地址,同时给搜索引擎一个首选版本。若旧 URL 不再需要对用户开放,永久重定向更直接。站点地图可以列出希望收录的地址,却不能代替每个重复页上的明确映射。三者指向的首选地址尽量一致,避免一处指向带参数版、一处又指向无参数版。

非 HTML 文件也可能需要规范化,例如同一报告同时以 PDF 和网页发布。HTML <link> 标签只能放在 HTML 文档里;这类文件可按搜索引擎支持方式使用 HTTP Link 响应头。回答面试题时说明这条边界,能避免把 HTML 标记误用于任何文件类型。

回答前,多想一步

容易答错的地方

以为规范链接等同于 301 跳转
浏览器不会因为 <link rel="canonical"> 改变地址。它主要提供给搜索引擎参考;要让用户离开旧地址,应配置重定向。
以为随便指向一个高权重页面就有效
规范化针对重复或高度相似的内容。把一篇完全不同的文章指向首页,搜索引擎可能忽略这个声明。先核对内容对应关系,再设置首选 URL。
试着用自己的话回答

面试官还会怎么问?

首选页自己还要写 canonical 吗?

可以写自指规范链接。它有助于把带参数、大小写或其他变体的信号统一到明确地址,但站内链接和站点地图仍应保持一致。

分页列表都能指向第一页吗?

不能只因为标题相同就把不同页内容归成一页。若第二页包含第一页面没有的条目,它们不是相同内容;需要分别判断每页应有的规范地址。

搜索结果没有采用我写的地址,先查什么?

先检查规范链接是否出现在原始 HTML 的 <head>,目标是否可访问,两个 URL 的主要内容是否相似,再查站内链接、重定向和站点地图是否给出相反信号。

从一道题,走向一组知识

把知识连起来

语义与文档

自定义元素名为什么一定要有连字符?

规范链接是 HTML 文档元信息;自定义元素一题讨论另一类需要遵守 HTML 语法规则的标记。

语义与文档

data-* 适合存什么?屏幕阅读器会读出来吗?

追踪参数可能制造重复 URL,页面内的 data-* 则用于给元素附加脚本可读数据。

参考资料

  • HTML:语义与文档参考资料

示例用于理解所注明的运行环境与边界;延伸学习可结合原文中的更多案例。

本题目录
  1. 先记住这个答案
  2. 重复地址怎样指向同一篇内容
  3. 搜索引擎会怎样处理
  4. 与重定向和站点地图怎么分工
  5. 容易答错的地方
  6. 面试官还会怎么问
  7. 把知识连起来
读懂,再试着讲出来

先看核心答案,再读代码。最后展开追问,检查自己有没有遗漏边界。

试着回答追问
浏览全部面试题理解原理,也关注真实的使用场景。回到顶部 ↑