HTML<link>标签全部rel属性详解：作用、示例与页面表现 ​

提到 <link> 标签，大多数开发者第一时间想到的是引入外部 CSS 样式表（rel="stylesheet"）。确实，这是我们最常用的场景。不过最近翻了翻文档，发现 rel 居然还有二十多种取值，有的能预加载页面，有的能告诉搜索引擎文章顺序，甚至还能保护隐私……今天干脆整理了一下，每个都写了示例和实际效果，看看这些“冷门”属性到底有啥用。

各属性表现分类 ​

影响类型属性值
直接视觉可见icon（图标）、stylesheet（样式）
影响浏览器行为next（预取）、prefetch（预加载）、noreferrer（无来源）、pingback（后台通知）
影响 SEO/搜索引擎alternate、next/prev、nofollow、license、author、tag 等
纯语义（无UI）archives、bookmark、external、first/last、help、search（现代浏览器无UI）、up
已废弃sidebar

1. stylesheet – 样式表 ​

html
<link rel="stylesheet" href="/css/style.css" />
  • 作用：链接外部 CSS 文件，定义页面样式。这是最经典、最常用的 rel 值。
  • 页面表现：肉眼可见的变化。页面会立即应用 CSS 中的颜色、布局、字体等样式，没有它网页就回到了“素颜”状态。

2. icon – 网站图标 ​

html
<link rel="icon" href="/favicon.ico" type="image/x-icon" />
  • 作用：定义浏览器标签页、书签栏中显示的小图标。也是比较常用的 rel 值。
  • 页面表现：立竿见影。打开网页，标签页上就会出现你指定的图标，书签和历史记录里也能看到它。

3. alternate – 替代版本 ​

html
<link rel="alternate" href="/zh-hant/" hreflang="zh-Hant" />
  • 作用：表示当前文档的替代版本，比如多语言网站的不同语言页面，或者提供 RSS、PDF 等格式。
  • 页面表现：
    • 用户一般看不到直接变化，但浏览器和搜索引擎会默默记下这个“孪生兄弟”。
    • 如果用于 RSS（type="application/rss+xml"），Firefox 等浏览器会在地址栏显示 RSS 图标，点击即可订阅。
    • 搜索引擎可能在不同语言搜索结果中展示对应的标题。

4. next – 下一篇文章 ​

html
<link rel="next" href="/article/2" />
  • 作用：指向序列中的下一页，比如分页文章或连载教程。
  • 页面表现：
    • 悄悄提速：Chrome 等浏览器看到这个属性，可能会在空闲时提前解析 DNS、预连接甚至预获取（prefetch）下一页的内容，这样用户点击“下一页”时感觉瞬间加载。
    • SEO 福音：搜索引擎爬虫利用它正确索引多页内容，避免把每一页都当成独立页面处理。
    • 用户无视觉变化，但能感受到更流畅的浏览体验。

5. prev – 上一篇文章 ​

html
<link rel="prev" href="/article/1" />
  • 作用：指向序列中的上一页，与 next 成对出现。
  • 页面表现：浏览器预取上一页的积极性比 next 低，但搜索引擎同样会用它理解分页关系。

6. prefetch – 预获取资源 ​

html
<link rel="prefetch" href="/next-page.html" />
  • 作用：提示浏览器在空闲时提前下载指定资源并缓存起来。
  • 页面表现：加速体验。当用户真正访问那个页面时，直接从本地缓存加载，感觉就像瞬间打开。用户无感知，但会觉得网站特别快。

7. nofollow – 不传递权重 ​

html
<link rel="nofollow" href="https://external-site.com" />
  • 作用：指示搜索引擎不要追踪此链接，也不要传递权重（PageRank）。
  • 页面表现：
    • 对 SEO 有实质影响：爬虫看到后不会把这个链接计入排名计算。
    • 用户点击链接时行为无变化，照样跳转。

8. noreferrer – 隐藏来源 ​

html
<link rel="noreferrer" href="https://external-site.com" />
  • 作用：告诉浏览器在跳转时不发送 HTTP Referer 头，保护隐私。
  • 页面表现：
    • 用户无感，但目标网站无法知道你是从哪个页面跳转过来的。
    • 可以用开发者工具在 Network 面板里验证请求头里确实没有 Referer。

9. author – 作者信息 ​

html
<link rel="author" href="/about#author" title="关于作者" />
  • 作用：链接到当前文档的作者信息页面。
  • 页面表现：同样没有默认 UI。不过一些浏览器扩展或 CMS 会读取它，搜索引擎也可能在搜索结果中显示作者头像，提升可信度。

10. license – 版权许可信息 ​

html
<link rel="license" href="/copyright" />
  • 作用：指向当前文档的版权许可说明页面，告诉别人内容是否可以转载、修改。
  • 页面表现：默认看不见，但一些版权检测工具或浏览器扩展可能会读取它。

11. tag – 标签页面 ​

html
<link rel="tag" href="/tags/html" />
  • 作用：指向当前文档所属的标签聚合页，比如一篇技术文章对应的“HTML”标签页。
  • 页面表现：没有默认 UI。语义标记，搜索引擎可能用它来关联相关内容。

12. search – 站内搜索 ​

html
<link rel="search" href="/search/" type="text/html" />
  • 作用：提供当前网站的搜索页面地址。
  • 页面表现：
    • 在 Firefox 或 IE 的“远古”时代，如果配合 OpenSearch 描述文件，浏览器地址栏的搜索框会多出一个该网站的搜索引擎选项，用户可以直接使用站内搜索。
    • 现代 Chrome、Edge 早已砍掉了这个 UI，所以现在它基本只是语义标记，但说不定哪天浏览器又加回来了呢？

13. pingback – Pingback 服务地址 ​

html
<link rel="pingback" href="https://example.com/xmlrpc.php" />
  • 作用：指定博客或网站的 Pingback 服务器地址，用于自动通知其他网站“有人链接了你”。
  • 页面表现：后台默默工作，用户看不到。WordPress 等博客系统就是靠这个实现“对方网站链接了我，自动在评论区显示”的功能。

14. archives – 归档链接 ​

html
<link rel="archives" href="/archives/2024/" title="2024年文章归档" />
  • 作用：指向网站的历史文章归档页面，方便用户或爬虫快速找到过往内容。
  • 页面表现：纯语义标记，浏览器不会因此多出什么按钮，但辅助工具或爬虫可能会利用它来理解网站结构。

15. first – 系列中的第一篇 ​

html
<link rel="first" href="/tutorial/part1" />
  • 作用：指向连载内容的第一篇，比如系列教程的第一章。
  • 页面表现：浏览器基本不理会，但搜索引擎会根据它理解内容的顺序，避免把分页内容当成重复页面。

16. last – 系列中的最后一篇 ​

html
<link rel="last" href="/tutorial/part10" />
  • 作用：指向连载内容的最后一篇。
  • 页面表现：与 first 类似，无 UI，用于语义和 SEO 理解。

17. up – 上级目录 ​

html
<link rel="up" href="/tutorial/" />
  • 作用：表示当前文档的“父级”页面，比如在详细页返回上一级目录。
  • 页面表现：浏览器不管它，但一些 CMS 或主题可能会根据这个属性生成面包屑导航。

18. bookmark – 永久链接 ​

html
<!-- 通常用于 <a> 标签，这里只是语义示意 -->
<link rel="bookmark" href="https://example.com/article/123" />
  • 作用：表示当前文档的固定 URL（永久链接），即无论内容怎么迁移，这个链接永远有效。
  • 页面表现：极少在 <link> 中使用，浏览器无特殊表现，主要是语义标记。

19. external – 外部资源 ​

html
<link rel="external" href="https://other-site.com/related" />
  • 作用：标明被链接的文档不属于当前网站，常用于区分站内站外链接。
  • 页面表现：没有视觉变化，纯粹是给搜索引擎或爬虫看的提示。

20. help – 帮助文档 ​

html
<link rel="help" href="/support/faq" />
  • 作用：提供当前页面相关的帮助或支持页面，比如表单旁边的“填写说明”。
  • 页面表现：现代浏览器已经忽略了这个属性的 UI 展示，仅作为语义存在。老版本 IE 可能在帮助菜单中用到。

21. sidebar – 侧边栏内容（已过时） ​

html
<!-- 注意：这个值已经废弃，现代浏览器不支持 -->
<link rel="sidebar" href="/sidebar.html" />
  • 作用：曾经用来指定一个文档应该作为浏览器的侧边栏显示（比如 Firefox 的侧边栏）。
  • 页面表现：完全无效，写了也白写。放在这里只是提醒大家别再用它了。