关于 noopener、noreferrer、nofollow 的用法和区别

如果您参与 Web 开发或搜索引擎优化 (SEO)，您很可能会偶然发现 noopener、noreferrer 和 nofollow 术语。什么是 noopener noreferrer？那么 nofollow 呢？在这篇文章中，我们将解释所有这些内容及其对 SEO 和网络安全的影响。

介绍

所有三个术语（noopener、noreferrer 和 nofollow）都是 HTML 中锚标记的 rel 属性的值。可以说，nofollow 是网络开发人员和 SEO 专家中最知名的。

锚<a>标记通常在 HTML 中用于定义 URL/链接。例如，考虑以下代码行。

<a href="http://code-beat.com">Click here<a>

您可以看到使用了一个 href 属性（href 来自超文本引用），该属性的值是 CODE-BEAT 主页的网址。以下是向用户显示的文本。根据您的 CSS 和浏览器，此文本可能带有下划线、颜色不同或两者兼而有之。

锚标记可以有许多不同的属性 - 其中之一是 rel（rel 来自 RELationship）。这篇博文的主要主题是 noopener、noreferrer 和 nofollow——这三个都是 rel 属性的值。

再次考虑以下代码行。

<a href="http://code-beat.com" rel="noopener noreferrer nofollow" target="_blank">Click here</a>

您可以很快注意到该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，然后用户单击该链接，您将无法判断这些用户来自哪里。在您的分析软件（例如 Google Analytics）中，这将显示为直接流量，而不是推荐流量。

同样，这noreferrer对搜索引擎优化也没有影响，但它可以通过报告更直接的流量来扭曲分析和跟踪软件中的数字。

还有一些关于联属营销和 的注意事项noreferrer，但这些超出了本文的范围。一般来说，联盟链接和联盟计划现在使用不依赖于noreferrer价值的方法和技术。

那么，什么时候应该使用noreferrer以及什么时候使用noopener？我建议您考虑同时使用两者。大多数现代浏览器都支持 noopener，在某些情况下，如果noopener不支持，您可以使用noreferrer.

这意味着，实际上，使用它们来支持旧版浏览器也是有意义的。但最好的方法是完全避免使用target="_blank"。除非你有充分的理由使用它。

查看使用 _blank 值的一些好的和坏的原因。

什么是 nofollow？

在搜索引擎优化中，获得许多有价值且优质的链接到您的页面至关重要。这些称为反向链接。但并非所有链接都是一样的。

一般来说，当一个页面链接到您的页面时，它正在传递其链接汁，这意味着它会给您的网站带来更多可信度，并向搜索引擎发出信号，表明他们重视您的网站。从本质上讲，您可以将其视为认可。如果一个高权威网页链接到您 – 它就是对您的认可，Google/Bing 会将其视为排名因素。Google 使用 PageRank 一词来衡量链接的数量和质量。

然而，有时您不想传递链接汁。在内部链接页面时可能会出现这种情况 - 例如 - 您可能不希望将链接汁从更有价值的页面传递到那些不那么重要的页面。

输入rel="nofollow"。就像它的表兄弟一样noopener noreferrer，nofollow是rel属性的值。当您添加此值时，它将向搜索引擎发出信号，表明您不想将链接权重/PageRank 传递到您链接到的页面。

<a href="http://code-beat.com" rel="noopener noreferrer nofollow" target="_blank">Click here</a>

在上面的代码行中，我们输入了所有三个值 - 通过添加该nofollow值，我们向 Google 发出信号，表明 PageRank/链接权重不会传递到pointjupiter.com网站上。

什么时候应该使用 nofollow？

nofollow一般规则是在评论或论坛中的链接上使用。用户生成的内容可能是垃圾邮件和低质量链接的来源。您不希望您的博客或论坛网站将其价值传递给那些低质量的页面。

此外，谷歌和其他搜索引擎要求您使用nofollow所有赞助链接和广告。对于新闻稿中的链接和不同类型的付费链接也是如此。

关于术语的一些知识 – noopener noreferrer nofollow

有时你会注意到人们提到noopener标签或noreferrer标签。在其他情况下，您可以发现该rel noreferrer属性。虽然大多数 Web 开发人员都可以理解这些内容，但值得注意的是以下内容。

noopener、noreferrer、 和nofollow不是标签或属性。它们是属性值。

rel不是标签。它是锚标记的一个属性。

<a>是一个 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 工作产生切实影响的价值。

收藏

版权声明：本文为原创文章，转载请附上原文出处链接和本声明。
本文链接：https://www.oneue.com/articles/2020.html