关于a标签,你可能不知道的rel用法

a标签,可以说是平时我们最常用的标签之一了。

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

rel=”nofollow”

字面意思:搜索引擎别跟着我跳转。

作用是告诉搜索引擎,不要爬取该链接,不要将该链接计入源站的权重,说到底是要避免垃圾外链对本站的SEO造成影响。

rel=”noreferrer”

字面意思:不要问我从哪里来。

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

rel=”noopener”

字面意思:不要让目标网站控制我。

作用是可以避免目标网站通过window.opener访问你的window对象从而被对方获取到部分源页面的控制权(可怕的是这种控制还是跨域的)。比如目标网站可以通过window.opener.location = newURL将您的页面导航到不同的网址。新的页面将与您的页面在同一进程上运行,如果新页面正在执行开销极大的JavaScript,您的页面性能可能会受影响。

而加了rel="opener"后,a标签到了目标链接后window.opener会被置为null,能够为你提供性能和安全的双重好处。

nofollow、noreferrer、noopener对SEO有什么影响?

这也是许多站长们关心的问题,因为大家都知道nofollow会影响百度、谷歌等搜索引擎的抓取和索引链接,所以大家都比较担心noreferrernoopener也会这样做。

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

最后

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

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

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