译文

这篇文章介绍了 rel="noopener noreferrer nofollow" 的用法，安全性和对SEO（search engine option）的影响， 点击查看原文。

如果你参与到 web 开发，或者SEO相关的工作，你大概已经知道了有noopener，noreferrer和nofollow这三个属性值，但是这三个属性值是什么，在这篇文章中，我们将会对他们一一介绍，并指出他们在SEO和 web 安全方面的影响。

简介

这三个属性值，是a标签的rel的attribute，可以说，在web开发者和SEO专家中，nofollow是最广为人知的。

<a href="https://www.pointjupiter.com">
  Click here to visit the Point Jupiter website.
<a>

在上面的代码中，你可以看到a标签有个href属性，秉着这个属性的地址指向了pointjupiter的首页，中间的文本就是展示给用户的，由于设置的CSS和浏览器不同，这段文本最终的展示效果也不同。

A标签有很多不同的属性（attributes），rel（rel是RELationship，用于说明当前页面和目标链接之间的关系）就是其中一个。这篇文章的主题就是介绍rel属性的三个属性值noopener, noreferrer, nofollow。

<a href="https://www.pointjupiter.com" 
   rel="noopener noreferrer nofollow" 
   target="_blank">Click here to visit Point Jupiter website.
</a>

你应该已经注意到上面代码a标签rel属性以及属性值，并且还有一个target="_blank"属性，这个主要是用来设置新开tab页打开a标签的目标网站。

target="_blank"就是设置rel属性的主要原因，同样也是引起网站潜在风险和钓鱼网站的根本原因。

让我们详细的讨论下他们的细节，对SEO的重要性，安全性，什么场景下需要添加这些属性。

noopener

当你使用target="_blank"时，会发生一些有趣的事情。你通过A页面跳转过去到B页面，B页面可以通过一些方法访问到A页面信息。比如window.opener。（A,B页面主要是为了方便描述，并无其他含义）。

然后，B页面可以通过window.opener.location来让原本的A页面打开恶意网站。window.opener.location

这样就可以实现网络钓鱼攻击，考虑以下场景：

你创建了一个恶意网站C，并在里面设置了些恶意代码，然后将这个网站通过社交网络或者其他方式分享出去，让其他人通过target="_blank"的形式打开，Facebook就是个典型的例子。 不明所以的用户在Facebook页面点击了这个链接，浏览器在新的tab页打开了这个页面，并在同时，你的恶意网站C，就可以通过window.opener.location来控制Facebook页面所在的tab，跳转到了一个新网站，让后这个网站让告诉用户，你的登录信息已经过期，需要重新登录。 这个时候，用户并不知道自己的网站已经不是真正的Facebook，然后开始输入账户信息，提交。。。

更多细节

使用noopener属性值，就是明确的告诉浏览器，新的tab打开目标网站B，但是不能提供给B网站控制A的权限。最终的结果就是在B网站window.opener返回的结果是个null。

综上所述，rel="noopener"属性，并不会影响SEO，但是当你在使用target="_blank"跳转到外部网站的时候（非可控，自己公司的网站，倒是没必要添加这个属性），还是需要添加这个属性。

noreferrer

和nofollow类似，noreferrer同样可以限制新开的B网站，操作 window.opener对象。另外，在页面跳转的时候，noreferrer 会限制浏览器将 referring 网站信息传递给B网站。

简单来说，noreferrer在点击链接的手，会隐藏referrer信息。举个🌰，当别人把你的网站地址放到他们的网站A中，并且设置了noreferrer，那么当用户点击这个链接的手，你是不能够看到这个链接是从哪个网站过来的，在你的数据分析平台，这可能就划分为直接流量，而不是引流过来的。

同样，noreferrer也不会对SEO产生什么影响，但是会多上报一些直接流量，从而影响到你的数据分析和软件追踪。

所以，noreferrer和noreferrer到底该什么时候用？我建议你考虑两者都用。现在主流的浏览器都支持noopener，但是在某些场景下，如果浏览器不支持noopener，就可以用noreferrer代替。

这意味着，在某些场景下，为了能够兼容旧版本的浏览器，最好是两个一起使用。但是最好的方式就是避免使用target="_blank"，除非你有必须要使用的场景。（个人观点：这点可能国内和国外有些使用上的差别，国外好些网站是直接在当前页面打开的，比如GitHub、stackoverflow等，国内的网站大部分都是新开页面，个人也比较习惯新开，毕竟自己翻了几页找见的内容，点了下链接，就把当前页面刷新了，等下回来也挺麻烦。）。

什么时候使用_black。

nofollow

很多高质量和高价值（？）的网站链接到你的网站，对于SEO是相当重要的。这种叫做反向链接（backlinks，知道这么翻译是不是合适）。但是并不是所有的链接都是有一样的效果。

通常一个网站B链接到你的网站A，这将会影响链接权重（link juice），意思就是，搜索引擎将会认为你的网站A有更好的信誉。本质上来讲，你可以把他当做是一种宣传。如果有一个权威的网站，链接到了你的网站，这是在为你的网站背书，搜索引擎将会把这个作为排名的参考，Google会参照网站排名来衡量网站的质量。

然而有些时候，你并不想设置链接权重相关的内容。比如，你不想将重要/有价值的网站的链接权重，传递给一般或者不重要的网站。

在a标签上设置rel="nofollow"，设置了这个属性，就是告诉浏览器，不要将自身网站的链接权重（link juice）/排名传递到你链接的网站上。

<a href="https://www.pointjupiter.com" 
   rel="noopener noreferrer nofollow" 
   target="_blank">Click here to visit Point Jupiter website.
</a>

何时用nofollow

通常是在论坛或者评论中设置。用户输入的内容可能包含一些垃圾或者低质量的链接内容，你并不想把你的博客或者论坛网站的链接权重（link juice）/排名传递给那些链接内容上。

同时，Google和其他的搜索引擎，也要求你在赞助商链接和广告链接上使用这个属性，新闻中的链接和其他的付费链接也是如此。

noopener, noreferrer, nofollow 相关

有时你会看到有些人提到noopener，noreferrer标签，其他场景下，你会见到rel noreferrer 属性，尽管很多开发者可以理解这些内容，但是还有以下几点需要注意。

• noopener, noreferrer, nofollow 是属性值，并没有对应的标签或者属性。
• rel 也不是标签，是个属性名。
• <a></a>是个HTML标签，因此它有一些属性（比如rel,href等）。

总结

本文主要讲了a标签rel属性的三个属性值，noopener, noreferrer, nofollow。

• rel="noopener"，可以在所有，需要新开tab(target=_blank) 的链接上使用，避免不必要的安全隐患。如果不设置，恶意网站可以通过window.opener来改变原本网站的内容和链接。

• rel="noreferrer"，和noopener有类似的功能，兼容性略好，两者一起使用更佳。另外，noreferrer会影响到数据分析，将浏览计算为直接浏览，而不是引流过来的。

• rel="nofollow"，会影响搜索引擎传递链接权重（link juice）和网站排名。你可以在链接到非自己的网站的时候，添加这个属性值。这是他们三个中，唯一一个会对SEO产生影响的值。