17370845950

HTML5正式支持约20个rel值，但仅部分被主流浏览器实现：stylesheet（唯一触发CSS加载）、icon（需type和sizes）、preload（须配as）、prefetch（空闲低优先级）、preconnect（单域名）、dns-prefetch；noopener/noreferrer仅对target="_blank"有效；alternate/author/next等慎用；第三方服务要求的rel值需严格按规范配as、crossorigin等属性。

rel 属性不是“可选填的描述字段”，它直接决定浏览器是否加载资源、如何缓存、是否预加载、是否影响 SEO 和安全策略。填错或漏填，link 标签可能完全失效，甚至引入 XSS 或性能隐患。

哪些 rel 值是 HTML5 正式支持且有明确行为的

HTML5 规范明确定义了约 20 个标准 rel 值，其中真正被主流浏览器实现并产生实际效果的不到一半。优先使用这些：

• stylesheet：唯一能触发 CSS 加载和应用的值；其他如 style 或 css 会被忽略
• icon：用于 favicon；必须配合 type（如 image/x-icon）和 sizes（如 32x32）才可靠生效
• preload：需同时指定 as（如 as="script"），否则降级为普通 link，不触发预加载
• prefetch：仅在空闲时低优先级获取，as 不强制但建议填写；与 preload 混用会相互干扰
• preconnect：只接受单个域名（如 https://cdn.example.com），不能带路径；多个域名需拆成多个 link
• dns-prefetch：比 preconnect 更轻量，只做 DNS 查询；对 HTTPS 站点效果有限，因现代浏览器已自动优化

rel="noopener" 和 rel="noreferrer" 的真实作用边界

这两个值只在 中有意义， 标签上写它们完全无效——浏览器直接忽略。常见误用：

• 把 rel="noopener" 加到 上，以为能防漏洞，实则无任何效果
• 混淆 noreferrer 和 no-referrer：后者是 的 referrer 值，两者协议层级不同
• noopener 本身不阻止 referrer；要同时隐藏来源，需组合 rel="noopener noreferrer"

容易被当成“标准”但实际未被规范或已废弃的值

以下值在部分文档或旧教程中出现，但要么从未进 HTML 标准，要么已被移除，慎用：

• alternate：仅在配合 type 和 hreflang 用于 RSS/Atom 订阅时有效；单独写 rel="alternate" 对 SEO 无益，Google 明确表示不识别
• author、help、license：HTML5 保留但无默认处理逻辑；浏览器既不加载也不暴露 API，纯语义占位
• next / prev：曾用于分页导航，现已被搜索引擎忽略；Pagination 应靠 + 结构化数据
• shortlink：RFC 4287 定义，但无浏览器行为；GitHub 等平台用它只是约定，非标准执行

第三方服务要求的 rel 值怎么处理

CDN、字体服务商（如 Google Fonts）、分析脚本常要求你加特定 rel，例如：

这类写法有效，但注意：

• Google Fonts 的 display=swap 是 CSS 属性，和 rel 无关；rel="stylesheet" 才真正触发加载
• Cloudflare、jsDelivr 等 CDN 文档里写的 rel="preload" 必须配 as="script" 或 as="font"，否则 Chrome 不预加载
• 某些广告 SDK 要求 rel="preload" + crossorigin，若漏掉 crossorigin，字体或脚本会因 CORS 失败而静默中断

最常被忽略的是：同一个资源多次声明不同 rel（比如既 preload 又 prefetch），浏览器不会合并请求，反而可能触发重复 fetch 或竞争加载。该用哪个，得看资源使用时机——首屏关键 JS 用 preload，下一页可能用的图片用 prefetch。