nofollow、noopener 和 noreferrer 的区别与联系

发布于 2019-06-10

nofollow、noopener 和 noreferrer 的区别与联系

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

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

什么是 noreferrer 标签?

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

这个 noreferrer 标签在 WordPress 早些版本中是自动添加到 A 标签中,但实际上这并不是 WordPress 本身所做的改变,而是由 WordPress 使用的富文本编辑器 TinyMCE(WordPress 默认编辑器)造成的。目的就是防止网络钓鱼攻击,垃圾邮件发送者劫持您的网页,可能会访问您的网站或访问机密信息。不过现在 TinyMCE 只强制插入 noopener 标签,已经不会强制插入”noopener noreferrer”标签。

nofollow、noopener和noreferrer标签的区别?

什么是 noopener 标签?

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

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

什么是 nofollow 标签?

nofollow 标签就是告诉百度、Google 等搜索引擎不要通过使用此标记的链接传递任何值。大多数情况下,nofollow 标签用于阻止“PageRank”传递到网站上的管理页面(例如,您不需要排名的登录页面),或者根据 Google 的付费使用广告客户的 URL 链接政策。除了用于付费和管理链接之外,nofollow 标记通常用于限制 PageRank 通过博客评论或留言簿条目中的链接传递。在链接到信誉或可信度可能成为问题的网站时,您也可以使用 nofollow。

noopener 和 noreferrer 标签如何提高安全性?

Noopener 和 noreferrer 标签是阻止漏洞利用的主动权,该漏洞利用在新标签中打开的链接。很少有成员知道这个漏洞,因此 WordPress 采取这一举措来提高用户的安全性。反向 Tabnabbing 是一种网络钓鱼攻击,攻击者用恶意文档替换合法且可信的页面选项卡。

当有人打开新选项卡时,网络钓鱼者会通过 window.opener 检测引荐网址,并使用 window.opener.location = newURL 推送新的网址。

这样,没有人会有陷入网络钓鱼攻击的线索,因为他们已经从可靠的来源(WordPress 建立的网站)到达网站。而使用 rel =”noopener”会阻止网络钓鱼者获取有关链接源和与 referrer 链接相关的任何数据的信息。

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

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

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

喜欢 0
奋楫笃行,臻于至善!

相关文章

基于 canvas 一款非常酷炫的动态气泡背景实现方法

canvas 是 HTML5 新增的标签,利用它我们可以轻松实现图形的绘制。canvas 元素本身并没有绘制能力,它只是一个图形的容器,必须使用脚本(通常是 JavaScript)配合来完成绘图任务。...
阅读全文

基于 sketch.js 实现非常酷炫的鼠标点击特效

JavaScript 是浏览器端脚本语言,有许多非常实用的第三方 JS 类库,我们可以借助它来实现各种各样的特效,今天为大家分享一下基于 sketch.js 实现鼠标点击特效的方法。 实现方法 实现的...
阅读全文

网站夜间模式的实现思路与详细教程分享

网站夜间模式是怎样实现的? 整体思路 夜间模式开关按钮:用来手动切换夜间模式的,会存储cookie。 自动夜间模式:当cookie为空时,浏览器时间大于22点小于6点时会自动进入夜间模式,并存储coo...
阅读全文

pace.js 网页自动加载进度条 JavaScript 插件

我们在浏览网页的时候,经常会看到网站顶部有一个好看的加载进度条,我们可能会好奇它是怎样实现的。页面的加载进度百分比,有时候获取是比较麻烦的,当然也可以利用一些优秀的JavaScript插件来实现,今天...
阅读全文

Vue.js 开发环境搭建及实例运行简明教程

Vue和jQuery一样,是一个前端框架,如果你要问在过去的一年里,前端技术框架什么最火,那无疑就是前端三巨头:React、Angular和Vue。今天,我们就一起来简单了解一下什么是Vue,以及它的...
阅读全文

使用 Prism.js 实现代码语法高亮

之前给大家推荐过两款代码高亮库,分别是 code-prettify 和 Crayon Syntax Highlighter,今天给大家推荐的是另一个代码高亮库Prism.js。 一、介绍 Prism...
阅读全文

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注