HTML link标签 rel属性
下面是每一个 rel 属性值的介绍及经典代码示例，都是最典型的用法，并包含了必要的配套属性（如 as、hreflang、media 等），你可以根据自己的实际场景直接参考或复制使用。
样式与展现
stylesheet
用于链接外部 CSS 样式表，这是 rel 最基础的用途之一。
<link rel="stylesheet" href="https://example.com/css/main.css">icon
用于指定网站图标（favicon），在浏览器标签页和收藏夹中显示。
<link rel="icon" href="https://example.com/favicon.ico">apple-touch-icon
用于苹果设备（iPhone、iPad 等）将网站添加到主屏幕时显示的图标。
<link rel="apple-touch-icon" href="https://example.com/apple-touch-icon.png">文档与SEO
canonical
canonical 是HTML中link标签rel属性的一个值，中文通常称为网址规范化标签。
它的核心作用是告诉搜索引擎，在多个内容相同或高度相似的页面中，哪一个才是主版本或权威版本。
<link rel="canonical" href="https://example.com/article.html" />为了让你更好理解，我用一个比喻来说明。假设你写了一篇文章，标题叫《夏季养生指南》。
- 可以通过网址 A 访问：
example.com/article?id=123 - 可以通过网址 B 访问：
example.com/article/123?from=wechat - 可以通过网址 C 访问：
example.com/article/123?page=1
这三条网址打开的都是同一篇文章。如果搜索引擎分别抓取了这三个链接，它会懵，到底该把哪个排在搜索结果里？
这三个页面的“权重”也会被分散，导致哪个都排不上去。
你在这三个页面的 <head> 区域，都加上这一句代码：
<link rel="canonical" href="example.com/article?id=123" />这就相当于你举着喇叭对谷歌、百度喊话：**“别看这三个长得像，真正的官方正版是第一个！其他两个都是马甲，请把排名和流量都算给第一个！”
什么时候必须用
- URL 携带追踪参数（如
?utm_source=用于统计来源）。 - 动态排序或筛选（如按价格排序、按颜色筛选产生的链接）。
- HTTP 和 HTTPS 混用（或
www与 非www并存）。 - 分页/打印版（防止文章的分页被当成独立文章）。
补充说明
- 使用绝对地址：要写完整的
https://xxx.com/page/，不要写/page/这种相对路径。 - 自引用：有时候你查看网页源码，会发现
<link rel="canonical" href="https://...">指向的地址和当前浏览器地址栏一模一样，这叫**“自引用 canonical”**。这是一种好习惯，哪怕当前页面没有重复版本，加上它也能防止别人恶意采集你的链接参数后导致排名被分走。
alternate
指向当前页面的替代版本，常用于多语言站点、移动端版本或打印版。
<!-- 指向中文版本的备用页面 -->
<link rel="alternate" href="https://example.com/zh-cn/page" hreflang="zh-cn">
<!-- 指向打印友好版本 -->
<link rel="alternate" href="https://example.com/page?print=1" media="print">
<!-- 指向移动端版本 -->
<link rel="alternate" href="https://m.example.com/page" media="only screen and (max-width: 640px)">author
链接到当前文档的作者信息页面或邮箱。
<link rel="author" href="https://example.com/about/zhangsan">license
指向当前文档的版权许可协议页面。
<link rel="license" href="https://creativecommons.org/licenses/by/4.0/">next 与 prev
用于标识分页或系列文章中的前后关系。
<link rel="prev" href="https://example.com/article/page-1">
<link rel="next" href="https://example.com/article/page-3">资源加载
preload
在当前页面加载早期，以高优先级预加载关键资源（必须搭配 as 属性）。
<link rel="preload" href="https://example.com/fonts/Inter.woff2" as="font" crossorigin="anonymous">
<link rel="preload" href="https://example.com/css/critical.css" as="style">
<link rel="preload" href="https://example.com/images/hero.webp" as="image">prefetch
以低优先级预加载用户未来可能访问的资源。
<link rel="prefetch" href="https://example.com/next-page.html">preconnect
提前与第三方源建立连接（包括 DNS、TCP、TLS）。
<link rel="preconnect" href="https://api.example.com">dns-prefetch
提前对第三方域名进行 DNS 解析。
<link rel="dns-prefetch" href="https://cdn.example.com">prerender
在后台预渲染整个页面（已被 Speculation Rules API 取代，但仍可用于兼容）。
<link rel="prerender" href="https://example.com/next-article">modulepreload
专门用于预加载 JavaScript 模块及其依赖树。
<link rel="modulepreload" href="https://example.com/js/app.js">preload、prefetch、preconnect、dns-prefetch 4个属性很容易混淆，可以查看详细对比：preload prefetch preconnect dns-prefetch 区分对比
安全与隐私
nofollow
告诉搜索引擎不要追踪此链接，不传递权重。
<link rel="nofollow" href="https://external-site.com">其他特殊用途
manifest
链接到 Web 应用清单文件，用于将网站以原生应用方式启动。
<link rel="manifest" href="https://example.com/manifest.json">search
指向站内搜索的资源，通常用于浏览器搜索提供程序。
<link rel="search" href="https://example.com/search.xml" title="搜索本站" type="application/opensearchdescription+xml">help
链接到与当前文档相关的帮助文档或常见问题页面。
<link rel="help" href="https://example.com/help">