被忽略的rel

发布时间:2019-01-03 作者:一点通


<a>标签的rel属性用来指定当前文档与被链接文档的关系,但是在我们平时频繁使用<a>标签的过程中,却忽视了rel属性的使用,事实上这个属性是大有其用途的。

下面主要讲其中的3个取值:

1、rel=nofollow

(白话:搜索引擎别跟着我跳转)是告诉搜索引擎,不要爬取该链接,不要将该链接计入源站的权重,说到底是要避免垃圾外链对本站的SEO造成影响。

2、rel=noreferrer

(白话:不要问我从哪里来)规定当用户进入该超链接时,浏览器不应该发送HTTP Request的referer头部。这样一来,目标网站是获取不到用户的来源的,能够防止重要的地址被泄露,更有效地保护用户的隐私。

3、rel=noopener

(白话:不要让目标网站控制我)可以避免目标网页通过window.opener访问你的window对象从而被对方获取到部分源页面的控制器(可怕的是这种控制还是跨域的),而加了rel=noopener之后的<a>标签到了目标链接后window.opener会被置为null,能够为你提供性能和安全的双重好处。

当然,上面的rel值都是针对外部链接的,站内链接不需要这样的保护措施,在实际的开发中,对于不能确定安全性的外链,我们就可以直接这样写

<a rel="nofollow noopener noreferrer">...</a>

如果你在自己的博客中转载了别人的文章,请不要加rel=nofollow这对于被转载的作者是不公平的,因为这样做对原文章的SEO是毫无帮助的。