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

2025-09-10 2025-09-16

嗨，我是芦苇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. 三句话总结（贴墙用）

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

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

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

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

目录

目录