a标签中rel=“noreferrer noopener“的含义与作用

让我们从一些定义开始。

rel="noreferrer"是什么?

rel=”noreferrer” 标签是一个特殊的 HTML 属性,可以添加到链接标签 ()。它通过从 HTTP header 中删除 referrer information(引荐信息)来防止将referral info(引荐来源信息)传递到目标网站。

这意味着在 Google 分析中,来自具有 rel=”noreferrer” 属性的链接的流量将显示为Direct Traffic(直接流量)而不是Referral(推荐流量)。

 noreferrer属性在HTML代码的使用:

Link to Example.com

不过这么说还是显得苍白无力,借助下面的Google Analytics 流量分析面板理解。

示例:

假设您在没有“noreferrer”标签的情况下从网站 A 链接到网站 B。

当网站 B 的所有者查看 Google Analytics 中的“获取”报告时,他可以在“Referrals”部分下看到来自网站 A 的流量。

a标签中rel=“noreferrer noopener“的含义与作用_第1张图片

                                【来自没有 rel=”noreferrer” 的链接的流量显示为推荐流量 】


 当您使用“noreferrer”标签从网站 A 链接到网站 B 时,从网站 A 到网站 B 的任何流量都将在 Google Analytics 中显示为直接流量(而不是推荐)。

a标签中rel=“noreferrer noopener“的含义与作用_第2张图片

使用场景

当您不希望其他站点知道您正在链接到它们时,请在传出链接上使用 rel=”noreferrer” 属性。想不出你可能想要这样做的任何正当理由,但事实就是如此。

绝对不要在内部链接上使用 rel=”noreferrer” 属性,它会弄乱您的 Google 分析报告。

补充一个Nofollow属性:

当您将 rel=”nofollow” 添加到外部链接时,您基本上是在指示搜索引擎不要将任何 PageRank (页面权重)从一个页面传递到另一个页面。换句话说出于 SEO 目的忽略该链接。

nofollow和 noreferrer的区别在于noreferrer 不会将任何推荐信息传递给浏览器,而是会跟随链接。使用 nofollow,将推荐信息传递给浏览器,但不跟随链接。

所以它们不是一回事。在您不信任的链接上使用 nofollow,如果您不希望其他站点知道您已链接到它们,请使用 noreferrer。了解更多

rel="noopener"是什么?

rel=”noopener” 是一个可以添加到外部链接的 HTML 属性。它可以防止打开页面获得对原始页面的任何访问权限。

Link to Example.com

出于安全原因,建议将 rel=”noopener” 添加到在新标签页中打开的所有外部链接。Noopener 对网站的SEO 影响为零,因此您可以安全地使用它来增强网站的安全性。

 相反使用target="_blank"具有安全性风险。

a标签中rel=“noreferrer noopener“的含义与作用_第3张图片

在网页编写的过程中,当我们要跳转链接时,很容易使用  这样的写法来在新窗口打开,但如果你有使用ESLint 的话,它会建议你在a 标签中要加上 rel="noreferrer noopener",也就是:

Link to Example.com
之所以要加上这行,是因为当浏览器使用 target="_blank" 来打开新窗口时,新视窗所在的网页是有办法透过 window.opener 这个对象来操作你原本的页面。
举例来说,当你在A 站点了超链接另开新窗口到B 站时,B 站可以在它的页面中执行:
window.opener.location = 'https://www.baidu.com';
这时候你会发现你在A 站的网页默默转址到了百度的页面。
这种做法主要是利用一般人只会注意新开的窗口(B 站),而忽略了原有的窗口(A 站),但若不进一步处理, 新开的窗口是有机会可以修改到原窗口内所浏览的网址的。
因此,若你使用的  target="_blank"的话,eslint plugin都会建议你要加上  rel="noreferrer noopener",以确保使用者当前浏览的页面,不会因为开新视窗后被另开的这个网站所影响。

参考: 

  ​​​​​​What rel="noreferrer noopener" Mean and How it Affects SEO

  https://pjchender.blogspot.com/2020/05/relnoreferrer-targetblank.html 

你可能感兴趣的:(前端,html,前端,SEO,web安全)