rel=noopener、noreferrer 和 nofollow 实际上做了什么

简短版本

链接上的 rel 属性描述当前页面与被链接页面之间的关系。这听起来有些抽象，但在日常 Web 工作中，有三个值会反复出现：

<a href="https://example.com" target="_blank" rel="noopener noreferrer nofollow">
  External resource
</a>

这三个 token 经常被一起粘贴使用，好像它们是在做同一件事。其实不是。

• noopener 是一种浏览器安全控制。
• noreferrer 是一种隐私和分析控制。
• nofollow 是一种搜索引擎信号。

它们可以组合使用，但你应该知道每一个为什么存在。给每个出站链接都加上这三个值并不总是错的，但通常是一种偷懒做法。

rel=noopener 防止反向标签劫持

rel="noopener" 告诉浏览器，不要让新打开的页面通过 window.opener 访问原页面。

这主要在你使用 target="_blank" 在新标签页或新窗口中打开链接时很重要：

<a href="https://external.example" target="_blank" rel="noopener">
  Open external site
</a>

如果没有 noopener，目标页面可能能够运行这样的 JavaScript：

window.opener.location = 'https://phishing.example';

这种攻击通常称为反向标签劫持。用户点击一个合法链接，进入另一个站点，而原来的标签页会被悄悄导航到一个伪造登录页或其他恶意目标。

现代浏览器在这方面已经有所改进。在当前浏览器行为中，target="_blank" 通常会被当作已经存在 rel="noopener" 来处理。这很好，但并不意味着显式属性没有意义。显式写出 noopener 仍然有用，因为：

• 它记录了你的意图；
• 它保护较旧或不常见的浏览环境；
• 它避免假设每个嵌入式 web view 都像现代桌面浏览器一样工作；
• 它让代码审查更容易。

对于会在新标签页中打开的外部链接，rel="noopener" 是一个合理的默认值。

noopener 会影响 SEO 吗？

不会，至少不会以任何有意义的方式影响。noopener 用于浏览器行为。它不会告诉搜索引擎你是否认可某个页面、是否应传递链接权重，或者该链接是否为付费链接。

如果你的 SEO 策略把 noopener 当作排名指令，那么这份策略需要修改。

rel=noreferrer 隐藏引用来源页面

rel="noreferrer" 告诉浏览器，在用户跟随该链接时不要发送 Referer HTTP header。

是的，这个 header 在历史上被拼写成了 Referer。属性则拼写为 noreferrer。

通常，当用户从你的页面点击链接进入另一个站点时，目标站点可能会收到一个 referrer 值，显示访问来自哪里。根据你网站的 Referrer-Policy，它可能是完整 URL、仅 origin，或者什么都没有。

例如，目标站点可能看到：

Referer: https://www.example.com/pricing?plan=enterprise

或者只有：

Referer: https://www.example.com/

使用 rel="noreferrer" 时，浏览器不应为这次导航发送该 header。

<a href="https://external.example" rel="noreferrer">
  External site
</a>

在实践中，noreferrer 在现代浏览器中也表现得像 noopener。如果你使用了 noreferrer，通常不需要在同一个链接上再用 noopener 来实现安全保护。许多团队仍然会同时写两者，以便更清晰：

<a href="https://external.example" target="_blank" rel="noopener noreferrer">
  External site
</a>

这样没问题。它是冗余的，但可读。

什么时候 noreferrer 有用

当当前页面 URL 不应暴露给目标站点时，使用 noreferrer。

常见示例包括：

• 来自私有仪表盘的链接；
• 来自未发布预览环境的链接；
• 来自包含敏感查询参数的 URL 的链接；
• 管理工具、审核队列、CRM 界面或客户支持系统中的链接；
• 目标站点不应知道确切来源页面的链接。

最后一点并不总是关于保密。有时它关乎数据最小化。如果目标站点不需要知道引用来源 URL，就不要发送它。

这符合更广泛的隐私感知型 Web 设计方向。浏览器、用户和监管机构都在走向默认发送更少的环境数据。如果你正在重新审视这一领域，我们关于 2026 年 cookies 发生了什么变化以及应对方法 的文章涵盖了同一类总体转变：更少的隐形跟踪，更有意识的数据流动。

分析上的取舍

noreferrer 可能会破坏你所链接站点的归因。他们的分析系统可能会把这次访问归类为直接流量，而不是引荐流量。

这不是你的主要问题，但在合作伙伴关系、联盟营销关系、客户旅程和内部跨域生态中，它可能很重要。如果你的营销团队期望合作伙伴站点看到来自你域名的引荐流量，全面使用 noreferrer 可能会造成混乱。

对于许多普通的编辑类链接，更好的做法是设置站点级的 Referrer-Policy header，而不是到处添加 noreferrer。例如：

Referrer-Policy: strict-origin-when-cross-origin

该策略会在同源导航时发送完整 URL，向安全的跨源目标只发送 origin，并且在从 HTTPS 转到 HTTP 时不发送 referrer。对许多站点来说，这是一个实用的默认值。

如果你需要检查生产环境中的 header 行为，原始 HTTP 检查通常比从分析仪表盘中猜测更清楚。用于在生产环境中调试重定向和 HTTP headers 的小工具包 中的工作流可以直接用于 referrer-policy 调试。

rel=nofollow 面向搜索引擎，而不是浏览器

rel="nofollow" 告诉搜索引擎，你不想暗示对被链接页面的认可。

<a href="https://external.example" rel="nofollow">
  User-submitted link
</a>

最初，nofollow 是为了打击评论垃圾信息而引入的。思路很简单：如果评论中的链接不传递排名信用，垃圾信息发布者就没有那么强的动机去淹没博客和论坛。

今天，Google 将 nofollow 视为一种提示，而不是绝对指令。这个区别很重要。它意味着搜索引擎在某些场景下可能会把该链接用于发现或排名系统，但你已经清楚地发出信号：该链接不应被视为正常的编辑性认可。

什么时候使用 nofollow

当你需要链接到某处，但不想为目标站点背书时，使用 nofollow。

合理示例包括：

• 不可信的用户生成链接；
• 公共评论或个人资料中的链接；
• 指向被作为不良行为示例提及的网站的链接；
• 为参考而包含、但不表示认可的链接；
• 审核有限区域中的链接。

对于付费或赞助链接，优先使用 rel="sponsored"。对于用户生成内容，优先使用 rel="ugc"。如果需要，可以组合多个值：

<a href="https://example.com" rel="ugc nofollow">
  User profile link
</a>

如果你运行公共表单、评论、目录或个人资料页，链接属性只是滥用问题的一部分。垃圾信息通常更早就从提交流程开始了。我们另有一篇关于 为什么你的联系表单是最大的垃圾信息风险 的拆解，同样的经验也适用于这里：不要指望 nofollow 弥补薄弱的审核。

nofollow 不能做什么

nofollow 不会阻止用户点击链接。它不会阻止浏览器发送 referrer。它不会隐藏目标地址。它不会保护 target="_blank"。

它也不能保证某个 URL 永远不会被抓取。如果搜索引擎在其他地方发现该 URL，它们仍然可以抓取它。如果你需要阻止索引，请在目标页面上使用适当的 robots 控制，例如 noindex，而不是在别人的链接上使用 nofollow 属性。

常见组合

在新标签页中打开的外部链接

<a href="https://external.example" target="_blank" rel="noopener">
  External resource
</a>

这是基线做法。它解决了打开新浏览上下文所带来的安全问题。

如果你也不想发送 referrer 数据：

<a href="https://external.example" target="_blank" rel="noopener noreferrer">
  External resource
</a>

付费展示位

<a href="https://sponsor.example" rel="sponsored">
  Sponsor site
</a>

如果它在新标签页中打开，可以添加 noopener：

<a href="https://sponsor.example" target="_blank" rel="sponsored noopener">
  Sponsor site
</a>

不要用 nofollow 作为披露付费链接的模糊替代品。搜索引擎现在有一个更具体的值：sponsored。

用户生成链接

<a href="https://user-submitted.example" rel="ugc nofollow">
  User-submitted site
</a>

这会告诉搜索引擎，该链接由用户贡献，不应被视为正常的编辑性投票。

内部链接

大多数内部链接不需要这些值中的任何一个。

不要把给内部链接添加 nofollow 当作常规的权重雕刻策略。它通常带来的困惑多于收益。如果某个页面不应被索引，请直接处理。如果某个页面不应被抓取，请认真考虑 robots 规则、身份验证、canonicalization 和站点架构。

对于在新标签页中打开的内部链接，noopener 仍然是无害的，也可能是合适的。但更好的问题是：为什么这个内部链接需要新标签页？

给团队的实用策略

简单的内部规范可以避免大多数错误：

1. 给带有 target="_blank" 的链接添加 rel="noopener"，尤其是外部链接。
2. 只有在有意隐藏来源 URL 时才添加 noreferrer。
3. 只有在你不认可目标站点时才添加 nofollow。
4. 对付费链接使用 sponsored，对用户提交的链接使用 ugc。
5. 不要把链接属性当作访问控制、审核或索引规则的替代品。

重要的是意图。rel 中的每个 token 都应该回答一个具体问题：

• 安全：新页面是否应与 opener 隔离？
• 隐私：目标站点是否应收到 referrer 信息？
• SEO：我们是否将这个链接作为编辑性参考来认可？

如果团队里没人能回答这些问题，那么这个属性很可能只是货物崇拜式 HTML。

如何测试实际发生了什么

对于 noopener，打开链接并检查目标页面是否可以访问 window.opener。在受控测试页面中，当 noopener 生效时，window.opener 应该是 null。

对于 noreferrer，检查目标端的网络请求，或在测试环境中使用请求记录器。Browser DevTools 可以显示传出的请求 header，但服务器端日志通常更可靠。

对于 nofollow，测试没那么即时，因为它是搜索引擎解释，而不是浏览器行为。你最好的检查方式是查看源代码：确认渲染后的 HTML 包含预期的 rel 值。如果你的前端框架会重写链接，请检查最终 DOM，而不只是模板。

底线

这些属性很小，但它们位于安全、隐私和 SEO 的交叉点。把它们当作可以互换的东西，会养成坏习惯。

对新标签页链接慷慨使用 noopener。在 referrer 隐私很重要时，有意识地使用 noreferrer。当你要向搜索引擎表达关于认可的声明时，使用 nofollow。当链接是付费或用户生成的，使用更具体的现代值：sponsored 和 ugc。

这对大多数网站来说已经足够。目标不是装饰每一个链接。目标是让每个链接准确地告诉浏览器和搜索引擎它们需要知道的内容。