HTML 链接属性 noopener、noreferrer、nofollow 到底是干嘛的？

最近在写代码的时候，看到很多项目里的外部链接都带着一堆 rel 属性，什么 noopener、noreferrer、nofollow 的，说实话一开始我也是一脸懵逼。今天咱们就来好好聊聊这些属性到底是干嘛的，为什么现在大家都这么重视它们。

安全第一：noopener 的那些事儿

先说 noopener，这个主要是为了安全。当你用 target="_blank" 在新标签页打开链接时，新页面其实可以通过 window.opener 访问到原来的页面。听起来没什么问题对吧？但如果新页面是恶意网站，它就可以偷偷修改你原页面的 URL，把你跳转到钓鱼网站去。

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

这就好比借给别人一把钥匙，你肯定不希望对方能进你家乱翻东西对吧？加了 noopener 就相当于把钥匙收回来了，新页面在独立的进程中运行，既安全又不会影响原页面的性能。

不过好消息是，从 Chrome 88+ 开始，target="_blank" 的链接默认就会应用 noopener。但为了兼容性，还是建议明确写上，毕竟不是所有人都用最新版浏览器。

隐私保护：noreferrer 的作用

noreferrer 这个就比较好理解了，它主要是保护隐私。当你点击一个链接跳转到别的网站时，浏览器会默认发送一个 Referer 头，告诉对方你是从哪个网站来的。

<a href="https://example.com" rel="noreferrer">

加了 noreferrer 之后，这个 Referer 头就不会发送了。这就像你去别人家做客，不想告诉人家你之前在哪里待过一样。

另外，noreferrer 其实已经包含了 noopener 的功能，所以如果你用了 noreferrer，就不用再写 noopener 了。

不过要注意的是，加了 noreferrer 之后，搜索引擎也不会传递链接权重，这对 SEO 会有点影响。

SEO 控制：nofollow 的妙用

nofollow 这个主要是给搜索引擎看的。它告诉搜索引擎："这个链接我不推荐，你别跟着爬了，也别把我的权重传给它"。

<a href="https://example.com" rel="nofollow">

这个在评论区特别有用，毕竟你也不想用户发一堆垃圾链接，然后搜索引擎以为你在推荐那些网站对吧？

Google 在 2019 年还更新了规范，现在除了 nofollow，还有两个新属性：

• ugc：标记用户生成内容的链接，比如评论、论坛帖子
• sponsored：标记广告或赞助链接

这样搜索引擎就能更好地理解链接的性质了。

组合拳：怎么一起用

实际项目中，我们经常需要组合使用这些属性。比如外部链接，既要保证安全，又要保护隐私：

<a href="https://external.com" target="_blank" 
   rel="noopener noreferrer">
   外部链接
</a>

如果是用户提交的链接，还得加上 ugc：

<a href="https://user-site.com" target="_blank" 
   rel="noopener noreferrer ugc">
   用户链接
</a>

广告链接就用 sponsored：

<a href="https://sponsor.com" target="_blank" 
   rel="noopener noreferrer sponsored">
   赞助商
</a>

框架里的写法

现在大家基本都用框架开发了，在 React 里可以这么封装一个组件：

function ExternalLink({ href, children }) {
  return (
    <a 
      href={href}
      target="_blank"
      rel="noopener noreferrer"
    >
      {children}
    </a>
  );
}

Vue 也类似：

<template>
  <a 
    :href="url"
    target="_blank"
    rel="noopener noreferrer"
  >
    {{ text }}
  </a>
</template>

这样项目里所有的外部链接都能自动加上这些属性，既安全又规范。

最佳实践总结

最后总结一下最佳实践：

1. 外部链接：用 noopener noreferrer，既安全又保护隐私
2. 内部链接：保持默认就行，不需要加这些属性
3. 用户内容：加上 ugc，告诉搜索引擎这是用户生成的
4. 广告链接：用 sponsored，诚实标记广告性质
5. 需要跟踪的合作伙伴链接：只用 noopener，保护安全但允许跟踪

记住一句话：安全第一。对于所有 target="_blank" 的链接，至少应该用 rel="noopener" 或 rel="noreferrer"。这就像出门要锁门一样，已经成了基本的安全习惯。

写代码的时候多注意这些细节，既能提升安全性，又能让搜索引擎更好地理解你的网站，何乐而不为呢？