HTML5link标签rel属性常用类型大全

• 把 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，例如：

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=...&display=swap">

这类写法有效，但注意：

• 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。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~