HTML <a> 标签的 rel 属性全解析：安全、隐私与 SEO 最佳实践

嗨，我是芦苇Z。

本文聊聊每个前端都踩过、却常被一笔带过的坑：<a> 标签的 rel 属性。

看完你马上能告诉自己： "以后凡是 target="_blank"，我都先写 noopener，再按需补其他。"

1. 先搞懂两件事

问题	一句话答案
rel 是干嘛的？	告诉浏览器"我和那条链接是啥关系"，顺带决定要不要把上一页的信息交出去。
为啥总跟 target="_blank" 一起出现？	新标签页会拿到 window.opener 指针，能反过来篡改来源页------这叫 reverse tabnabbing。

2. 安全两件套：noopener / noreferrer

属性	干什么	额外效果	推荐场景
noopener	切断 window.opener	无	所有 target="_blank" 都加，先保命
noreferrer	不发送 Referer 请求头	现代浏览器顺带切断 window.opener	不想让目标站知道你从哪来

"切断 window.opener"到底是啥？

默认情况下，新标签页里 window.opener 指向"是谁把我打开"的那个页面。

有了这把"回头钥匙"，新页面可以：

• 把原来的页面跳转到假登录页（reverse tabnabbing 反向标签劫持）；
• 用 opener.document 直接读写来源页（跨域时受限，但仍可 location 跳转）。
  写上 noopener 后，浏览器干脆把这把钥匙掰断------新页面拿到的 window.opener 是 null，想搞事也找不到门。

一句话记住：
"只保命" → noopener； （"断钥匙，防回头。" ）
"既保命又隐身" → noopener noreferrer（两词顺序随意）。

<!-- 最常用：外链新开标签 -->
<a href="https://external.example"
   target="_blank"
   rel="noopener noreferrer">
   外部资源
</a>

3. 搜索引擎专用暗号

属性	翻译给谷歌听	实战场景
nofollow	"别递权重，我只是提一嘴"	不可信的外链
ugc	"这是用户自己发的"	评论、论坛帖子
sponsored	"我收钱了"	广告、软文

不会阻止收录！只是不递权重，别再把 nofollow 当 robots.txt 用。

<!-- 评论里出现的链接 -->
<a href="https://xxx.com"
   target="_blank"
   rel="noopener nofollow ugc">
   用户分享的地址
</a>

4. 其他常见 rel 速查

类型	举例	一句话说明
文档关系	alternate author canonical prev/next	给爬虫或浏览器指路，不影响安全
预加载	preload prefetch dns-prefetch	性能优化，和 <link> 更配
书签	bookmark	永久锚点，几乎用不上

5. 我只想藏 Referer，行不行？

可以，但别全站甩 noreferrer，用 referrerpolicy 更细：

<a href="https://external.example"
   target="_blank"
   rel="noopener"
   referrerpolicy="strict-origin-when-cross-origin">
   外部资源
</a>

常见取值：
no-referrer / origin / strict-origin-when-cross-origin

记不住？Chrome DevTools Network 面板里看一眼 Referer 头就明白。

6. 三句话总结（贴墙用）

1. 凡是 target="_blank"，先写 rel="noopener"。
2. 不想暴露来源，再补 noreferrer 或直接上 referrerpolicy。
3. SEO 场景按需加 nofollow / ugc / sponsored，别让搜索引擎误会你卖链接。

复制下方代码，当成 Snippet 用，以后再也不用拼手指：

<!-- 外链通用模板 -->
<a href="URL"
   target="_blank"
   rel="noopener noreferrer nofollow">
   文本
</a>

祝你写链接写得开心，别再被安全扫描报告追着跑。

📚 参考资料

• MDN：<a>
• MDN：rel 属性
• MDN：noopener 与 window.opener
• MDN：noreferrer 与 Referrer-Policy
• WHATWG HTML Standard：Link types
• 原文 HTML标签的 rel 属性全解析