让我们从一些定义开始。

rel="noreferrer"是什么？

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

<a href="https://www.example.com" rel="noreferrer">Link to Example.coma>

示例：

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

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

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

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

使用场景

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

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

补充一个Nofollow属性：

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

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

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

rel="noopener"是什么？

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

<a href="https://www.example.com" rel="noopener">Link to Example.coma>

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

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

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

<a href="https://www.example.com" target="_blank" rel="noreferrer noopener">Link to Example.coma>

window.opener.location = 'https://www.baidu.com';

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

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