我们在做网站优化的过程中肯定有引用到外链的时候，大家基本都知道A标签加上nofollow可以防止网站权重流失，但如果加上rel="noopener
noreferrer"这个标签可能会比较疑惑，那么各表示什么意思？可以正常传递权重吗？
这篇文章解释了 rel="noopener noreferrer nofollow" 是什么，它们的使用和安全性以及搜索引擎优化 (SEO)
的含义。
如果您参与 Web 开发或搜索引擎优化 (SEO)，您可能会偶然发现 noopener、noreferrer 和 nofollow 术语。什么是
noopener noreferrer?那nofollow呢?在这篇文章中，我们将解释所有这些以及它们对 SEO 和网络安全的影响。
所有三个术语(noopener、noreferrer 和 nofollow)都是 HTML 中锚标记的 rel 属性的值。可以说，nofollow 是
Web 开发人员和 SEO 中最知名的experts。
您可以看到使用了一个 href 属性(href 来自 Hypertext REFerence)，并且该属性的值是 Point Jupiter
主页的网址。以下是作为用户显示给您的文本。根据您的 CSS 和浏览器，此文本可能带有下划线、不同颜色或两者兼而有之。
锚标签可以有许多不同的属性——其中一个是 rel(rel 来自 RELationship)。这篇博文的关键主题是关于
noopener、noreferrer 和 nofollow——这三个都是 rel 属性的值。
您可以很快注意到该rel属性的三个值。但是现在您也可以看到带有_blank值的目标属性。这部分代码指示 Web 浏览器在新选项卡中打开此链接。
noopener这就是为什么使用喜欢和的值的主要原因noreferrer。这也是潜在安全和网络钓鱼挑战的根本原因。
让我们更详细地讨论它们以及它们对 SEO 和安全性的重要性，以及何时应该添加rel、添加nofollow以及添加的意义是什么rel
noopener.
什么是noopener?
当您target="
_blank"使用价值时，会发生一些有趣的事情。您链接到的页面获得对链接页面的部分访问权限。它通过window.opener对象这样做。
然后，链接页面可以window.opener.location用来打开恶意网站。
使用 target _blank 可能会导致安全问题。
这可以被用于网络钓鱼攻击。考虑以下场景。
您创建了一个恶意网站并在其上放置病毒内容。然后，您在社交媒体或其他使用target="_blank". Facebook 就是这里的主要例子。
毫无戒心的用户点击链接，您的网页将在新选项卡中打开。那时，您的恶意网站现在可以控制以前的(“Facebook”)选项卡。使用window.opener.location它导航到新站点——例如，一个模拟
Facebook 登录屏幕的登录表单，其中包含一条消息：“你之前的 Facebook 会话已过期。请重新登录以继续使用 Facebook”。
现在，用户被诱骗输入他的登录信息并成为网络钓鱼攻击的受害者。
这只是一个假设案例，因为 Facebookrel="noopener"在其target=" _blank"链接上使用 。但你明白了。
更多细节
使用noopener有效地告诉浏览器在新选项卡中打开链接，而不提供对打开链接的网页的上下文访问。这是通过不设置
window.opener属性从而返回空值来实现的。
指示浏览器打开链接，但不授予新的浏览上下文访问打开它的文档的权限——方法是不在打开的窗口上设置 window.opener(它返回null)。
因此，rel= "noopener"属性和值不会以任何方式影响搜索引擎优化 (SEO)。它与 SEO
无关。但它应该用于处理带有目标空白的链接的情况。
什么是noreferrer?
其功能与
类似noopener，noreferrer也可防止新打开的站点对window.opener对象进行操作。但是，另外，noreferrer当您导航到另一个页面时，防止浏览器发送引用网页的地址。
简单地说，noreferrer点击链接时，该值会隐藏引用者信息。例如，如果有人在他们的网页上发布您的链接并使用noreferrer，然后用户点击该链接，您将无法分辨这些用户来自哪里。在您的分析软件(例如，谷歌分析)中，这将显示为直接流量，而不是推荐。
同样，noreferrer对 SEO 也没有影响，但它可以通过报告更直接的流量来扭曲分析和跟踪软件中的数字。
关于联属网络营销还有一些注意事项noreferrer，但这些超出了本文的范围。一般来说，会员链接和会员计划现在使用不依赖于noreferrer价值的方法和技术。
那么，您应该何时使用noreferrer以及何时使用noopener?我建议你考虑使用两者。大多数现代浏览器都支持noopener，但在某些情况下，如果noopener不支持，您可以使用noreferrer.
这意味着，实际上，同时使用它们来支持旧版浏览器也是有意义的。但最好的方法是完全避免使用target="_blank"。除非你有充分的理由使用它。
什么是nofollow?
在搜索引擎优化中，获得许多有价值的高质量链接链接到您的页面至关重要。这些被称为反向链接。但并非所有链接都是平等的。
一般来说，当一个页面链接到你的页面时——它正在传递它的链接汁——这意味着——它会给你的网站更多的可信度，并向搜索引擎发出信号，表明他们重视你的网站。从本质上讲，您可以将其视为一种认可。如果一个高权威的网页链接到你——它认可你，谷歌/必应会发现这是一个排名因素。Google
使用 PageRank 一词来衡量链接的数量和质量。
但是，有时您不想传递链接汁。在内部链接页面时可能会出现这种情况 – 例如 – 您可能不希望将链接汁从更有价值的页面传递到那些不那么重要的页面。
输入rel="nofollow"。就像它的表亲一样noopener
noreferrer，nofollow是一个rel属性值。当您添加此值时，它将向搜索引擎发出信号，表明您不想将链接汁/PageRank
传递给您链接到的页面。
rel="noopener noreferrer nofollow"
target="_blank">Click here to visit Point Jupiter website.
view rawdetailed-example.html hosted with by GitHub
在上面的代码行中，我们输入了所有三个值——通过添加nofollow值，我们向 Google 发出信号，表明
PageRank/链接汁不会传递到目标网站。
什么时候应该使用nofollow?
一般规则是nofollow在评论或论坛中的链接上使用。用户生成的内容可能是垃圾邮件和低质量链接的来源。您不希望您的博客或论坛网站将其价值传递给那些低质量的页面。
此外，谷歌和其他搜索引擎要求您使用nofollow所有赞助链接和广告。新闻稿中的链接和不同类型的付费链接也是如此。
关于术语 – noopener noreferrer nofollow
有时你会注意到人们提到noopener标签或noreferrer标签。在其他情况下，您可以发现该rel noreferrer属性。尽管大多数 Web
开发人员都可以理解这些内容，但值得注意的是以下几点。
noopener, noreferrer, 和nofollow不是标签或属性。它们是属性值。
rel不是标签。它是锚标记的一个属性。
是一个 HTML 标签。因此，它具有属性(即rel)，并且这些属性具有值(noopener noreferrer nofollow)
结论
rel锚标记的属性有三个基本值。它们是noreferrer、noopener和nofollow。
rel="noopener"您在使用target _blank.
如果您不使用noopener在新选项卡中打开的链接上的值，则会产生安全隐患。恶意攻击者可以使用该window.opener对象来更改原始页面的内容和位置。
rel="noreferrer"可以起到与
类似的作用noopener，尤其是在较旧的浏览器中。因此，同时使用它们是有意义的。此外，noreferrer可能会影响您的分析并将流量报告为直接而不是推荐。
rel="nofollow"将通知搜索引擎不要将链接汁传递给链接页面，并且不会传递PageRank。您可以将其视为一个值，当您想要链接到另一个页面但不“认可”它时使用它。这是rel此列表中唯一对
SEO 工作产生切实影响的价值。
最后总结一下就是：
对于写了target="_blank"的a标签，如果不带上
rel=“noopener noreferrer”属性，会存在以下问题：
1、性能问题：新打开的页面，和当前页面是在一个进程里的，如果新打开的页面比较耗资源，那当前页面的性能也会受到影响；
2、安全问题：新打开的页面可以通过window.opener操作上个页面，这可能会让你的上个页面重定向到不安全的钓鱼网站。
带上
rel=“noopener noreferrer”属性的话，新打开的页面是在新的进程中运行，不影响上个页面，而且新页面拿到的 window.opener =
null，无法在获取上个页面进行操作。