此文章使用365Blog 3.0引擎的旧版格式编写，可能未兼容新站点，部分内容可能显示异常，请谅解。

前言

最近看到很多评论插件和友链页都会自动给<a>标签中加入一个rel属性

这篇文章就和大家分享一下rel属性有什么用，顺便可以解决一下评论区链接被误识别成友链的问题。

什么是属性？

属性是HTML中规定标签配置的一种数据，带标签的参数一般是这样的：

<label parameter="value" > </label>

我们可以看到这是一行被Notion自动上色的HTML源码，其中，红色的带”label”字样的字为标签，绿色的“parameter”为属性，黄色的“value”为值。

参数是很常见的，学过JavaScript和CSS的小伙伴都知道，一般我们使用JavaScript来修改元素时，或使用CSS设置样式时，一般都需要在元素中添加“id”或”class“的属性用于使代码被编译时可快速定位到元素。

rel属性

rel属性定义了所链接的资源与当前文档的关系，在<a>、<area>和<link>元素上有效。支持的值取决于拥有该属性的元素。

关系的类型是由rel属性的值给出的，如果存在的话，它的值必须是一组无序的、唯一的、用空格隔开的关键字。与不表达语义的class名称不同，rel属性必须使用对机器和人类都有语义的标记。目前关于rel属性的可能值的注册表是 IANA 链接关系注册表、HTML 现行标准和 microformats wiki 中可自由编辑的 existing-rel-values 页面（根据现行标准的建议）。

有关SEO的相关值及代表含义

有关SEO的这些值大多是Google最先提出的，目的是减少无用的链接对排名的干扰，使开发者可以通过此值向搜索引擎解释当前页面与此链接指向页面之间的关系。现在主流的博客程序，如 WordPress等均默认为其留言与 trackback 中的链接自动添加 nofollow 属性。这样可以使 Spammer 意图通过这种方式提高网站流行度的目标落空。

rel=”nofollow”

用法：

<a href="你要指向的页面" rel="nofollow" >链接展示文本</a>

此参数将使搜索引擎认为这个超链接指向的页面与此页无关联，此链接不传递权重，不会影响SEO排名结果。这种用法在留言区访客发的链接中，以及文章中提及的参考资料链接中很常见。

rel="external"

用法：

<a href="你要指向的页面" rel="external" >链接展示文本</a>

此参数将使搜索引擎认为链接将指向一个外部站点的页面，作用跟target=”_blank”差不多。

rel="external nofollow"

上面已经说过rel=’nofollow’ 和 rel=’external’ 两种参数的所代表的意思了。这个参数基本上是相当于将两种参数结合起来，大致可以解释为 “这个链接非本站链接，不要爬取也不要传递权重”。因此在SEO的角度来说，是一种绝对隔离处理的办法，可以有效减少蜘蛛爬行的流失。

rel="nofollow noopener noreferrer"

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

因为当你浏览一个页面点击了一个类似

<a href="<https://kegongteng.cn>" target="_blank">访问</a>

的元素并跳转到另一个页面时，在新打开的页面中可以通过 window.opener 获取到源页面的部分控制权， 即使新打开的页面是跨域的也不受影响。

阳光岛主曾做了一个测试：

在chrome 49+中，如果您打开添加了rel=noopener的链接， 且有脚本正试图使用window.opener获取控制权时，浏览器将返回null值。

而在旧版本浏览器里又该怎么避免这种问题呢？阳光岛主也给出了方法：