本文介绍的 rel 属性主要讨论下面三个：noreferrer，nofollow，noopener，其他属性值不在这里讨论。

首先看下他们的定义：

当我们在A网页中添加下面的一个链接时：

<a href="https://domain.com" target="_blank">B页面</a>

target=”_blank” 会告诉浏览器，这个B页面需要在新的标签页中打开，而A网页不会有任何变动。

而 Rel 的属性的作用就是明确的定义了新打开的页面和A网页之间的关系，noopener 属性在 target=”_blank” 时适用。在 a 标签中添加此属性，可以解决恶意网站可以利用的安全性问题。借助JavaScript的功能，如果不带 noopener 打开的新标签页 B页面和A页面在同一个进程上。所以这个时候 B 页面可以通过调用 window.opener 对 A 页面进行控制，来窃取 A 页面的数据。

而通过设置 rel 为 noopener 或 noreferrer 的链接，将阻止新选项卡利用 JavaScript 的 window.opener 功能。所以，当你在网页中使用 target=”_ blank” 链接到其他网站时，请始终记得要包含 rel=”noopener” 或 rel =”noreferrer” 属性。

  • rel=”noopener” 属性保护 window.opener 属性可以访问新页面，并确保新页面在单独的进程中运行
  • rel=”noreferrer” 属性具有类似的作用，同时它也阻止将 Refer 来源信息传递到新页面
  • rel=”nofollow” 属性提示爬虫不需要继续爬取这个页面了，并且搜索引擎也不会计算权重

Rel=”noopener noreferrer” 如何影响你的网站？

a 标签的属性 rel=”noopener” 或rel=”noreferrer” 可以提高网站的安全性，但是有些人希望忽略它，因为他们认为这会影响网站搜索引擎的优化。

实际上它对网站 SEO 排名或网站的整体性能没有影响。并且它可以保护您的网站访问者的机密性，提升网站的额安全性。

noopener 属性只为浏览器提供了一条指令，以停止使用 window.opener Javascript 对象，并创建一个新线程进行处理。

下面的代码例子：

// A 页面的链接打开 B 页面
<a href="https://b.com/" target="_blank">B页面</a>
// B 页面中的 Hack 代码
<script>
  if (window.opener) {
    window.opener.location.replace('https://xxx.com')
  }
</script>

如果打开的B页面带有这种代码的话，并且A页面中的链接没有带 noopener 的 rel 属性时，打开B页面，A页面会被替换成 xxx.com 的页面

noreferrer 属性和 nofollow 属性之间的区别

在SEO方面，不会出现任何问题，因为搜索引擎是不管 noreferrer的。nofollow和noreferrer是两个不同的标签。大多数人在建立外链时会遇到 noopener noreferrer 链接，并开始怀疑此链接是否可以获得权重？

答案是搜索引擎只处理 nofollow 的，并不会和 “ noopener” 标签进行交互。

Rel=nofollow

标签rel = nofollow用于指示该页面的发布者到原始作者都没有认可该链接，并且两个页面的用户之间都不包含出于商业目的的引用文档链接。该标签是Google发明的，microformats 社区对此进行了标准化。目的是当 nofollow 链接无法通过PageRank时获得权重时，垃圾邮件发送者会停止在博客上发布垃圾评论。实际上，许多博客系统在评论链接中都添加了rel = nofollow。

Rel=noreferrer

标签rel = noreferrer表示在链接之后没有泄漏引荐来源信息。它主要指定浏览器在用户单击超链接时不传递HTTP Referrer标头。在StackExchange上的讨论也证明了这一点。

noopener 属性可防止跨站点黑客入侵，并且还可以提高您的网站安全性。 搜索引擎不会将noopener或noreferrer视为站点SEO排名信号。只有当您添加 nofollow 属性时，网页的权重才不会传递到链接的网站。

在Moz论坛中的讨论也非常清楚地提到，人们对于rel =“ noreferrer noopener”影响 SEO的看法完全是错误的。仅当您不希望传递引荐来源信息（例如浏览器，操作系统，区域等）时，此标记才有用。

noopener 和 noreferrer 属性会影响 Affiliate 链接吗？

尽管“ noreferrer”属性使新打开的页面无法知道流量实际来源，但不会影响联盟计划链接。

大多数的 Affiliate 链接都是一个唯一的URL，该URL是你的专属链接。只要有人点击了链接，您的会员ID随URL参数一起传递给其他网站进行跟踪。

不过大多数联盟营销者会利用短链接的方式来隐藏其联盟链接。这样可以确保这个链接不会被改掉。

比如：https://a.com?aff=1 这个一看就知道是 affiliate 链接，所以有些人会复制链接出来，把 URL 中的 ?aff=1 去掉再访问，此时他就不是通过你的 affiliate 链接访问的。但是如果你通过短网址将这个链接编程 https://t.cn/xxx 这样就看不出来这个链接是 affiliate 链接了，可以确保用户是通过你的 affiliate 链接访问的。

我是强烈推荐你保留 noreferrer 和 noopener 在链接中的，然后监控你的 affiliate 联盟是否有什么异常。如果收入有断崖式的下跌的话，再考虑下面的两个解决方法：

  1. 不在新标签页中打开链接，但是这会导致用户从你的网站流失了。
  2. 删除noreferrer noopener标签，我们不建议删除 rel =“ noopener”，因为它确实增加了网站漏洞的风险。

最后

希望本文能帮助您了解 a 链接的 noopener 和 noreferrer 属性。无需担心 noopener和 noreferrer 标记对网站的 SEO 排名有什么影响，因为它仅仅是保护您的受众免受可能劫持其选项卡的潜在恶意链接的影响。

如果有什么遗漏的地方欢迎指出～