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

最新推荐文章于 2025-02-18 14:09:44 发布

CamphorBloom

最新推荐文章于 2025-02-18 14:09:44 发布

阅读量4.2k

点赞数 3

分类专栏：前端文章标签： html 前端 SEO web安全

本文链接：https://blog.csdn.net/weixin_45719444/article/details/126327759

版权

前端专栏收录该内容

13 篇文章

订阅专栏

本文详细解释了HTML中的rel属性，包括rel=noreferrer和rel=noopener的作用与使用方法。rel=noreferrer用于阻止引荐信息传递，使流量显示为直接访问；rel=noopener则增强安全性，防止新标签页获取原始页面的访问权限。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

让我们从一些定义开始。

rel="noreferrer"是什么？

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

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

noreferrer属性在HTML代码的使用：

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

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

示例：

假设您在没有“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.com</a>

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

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

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

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

之所以要加上这行，是因为当浏览器使用 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