rel属性是决定资源加载、安全策略和SEO效果的关键语义标识；stylesheet强制同步加载CSS，icon触发favicon下载，preload需as属性才预加载，noopener noreferrer防止新窗口XSS攻击，canonical和alternate影响搜索引擎索引。

rel 属性不是可有可无的装饰，写错值会导致资源不加载、预取失效、SEO 降权甚至安全漏洞。 它明确告诉浏览器“这个 或 和当前页面是什么关系”，不同值触发完全不同的底层行为。

哪些 rel 值会真正触发资源下载或连接建立

只有部分 rel 值会让浏览器主动发起网络请求；其余多数仅提供语义信息（如给搜索引擎看）。

• stylesheet：唯一被广泛支持且强制同步加载的类型。必须配合 href 指向 CSS 文件，否则浏览器忽略；type="text/css" 可省略，但若写错（如 type="css"）可能在旧版 Safari 中失效
• icon：浏览器默认尝试加载，即使路径 404 也会发请求；建议显式写 sizes（如 sizes="32x32"）并提供多尺寸 链，避免 fallback 到根目录 /favicon.ico 的额外请求
• preload：必须带 as 属性（如 as="script"、as="font"），否则被当作普通 prefetch 处理；as="font" 还需加 crossorigin，否则字体加载失败且无报错
• preconnect 和 dns-prefetch：前者建立完整 TCP+TLS 连接，后者只查 DNS；不要对同域名重复写多个 preconnect，浏览器只用第一个，多余项浪费连接池 slot

哪些 rel 值影响新窗口打开的安全上下文

在 上漏写或错写 rel，子页面就能通过 window.opener 访问并篡改父页面 —— 这是真实 XSS 攻击链起点。

• noopener：切断 window.opener 引用，子页面无法访问父页面 DOM 或执行脚本；Chrome/Firefox/Edge 全支持，但 Safari 12.1 之前需手动加
• noreferrer：除隐式包含 noopener 外，还会禁发 Referer 请求头；注意它让 analytics 工具丢失来源数据，内部跳转慎用
• noopener noreferrer 是最稳妥组合；两个值顺序无关，但必须空格分隔，写成 rel="noopener,noreferrer"（逗号）会完全失效

哪些 rel 值被搜索引擎识别但不触发运行时行为

这些值对用户不可见，但直接影响爬虫如何索引、聚合和展示你的内容。

• canonical：必须放在 中，href 必须是绝对 URL（如 https://example.com/page），相对路径或协议相对路径（//example.com/page）会被忽略
• next/prev：仅适用于严格线性分页（如 /blog/1 → /blog/2），不能用于带查询参数的筛选页（如 /products?color=red）；Google 已不再依赖它们做分页合并，但仍建议保留以兼容其他工具
• alternate：搭配 hreflang 时，所有语言版本页面必须互相双向声明（A 页面有 rel="alternate" hreflang="en" 指向 B，B 也得有对应指向 A），否则 hreflang 标记无效

容易被忽略但上线就出问题的细节

很多 rel 值表面简单，实际有硬性约束，一错就静默失效。

• stylesheet 只能用于 ，写在 上毫无意义；同样，icon 也不能用在
• author 已被 Chrome 94+ 废弃，Firefox 也仅保留兼容；现在应改用 或 JSON-LD
• nofollow 对站内链接基本无效 —— Google 自 2020 年起已将其视为提示而非指令，且不传递权重；外链才需考虑是否加
• 多个 rel 值必须用空格分隔（如 rel="preload stylesheet"），不能用逗号、分号或换行；浏览器遇到非法分隔会整个忽略该属性