跳至主要内容

SEO 链接属性之Rel:Nofollow,Noopener,Noreferrer和其他

比较常见使用的dofollow,nofollow,noopener,noreferrer和canonical有着怎样的使用场景及区别?

1. <a>标签通常会配合着使用noopener, noreferrer及nofollow这些属性, 它们的作用及用法如下。

noopener

当给链接加上target="_blank"后,目标网页会在新的标签页中打开,此时在新打开的页面中可通过 window.opener 获取到源页面的window对象,这就埋下了安全隐患。

具体来说,你自己的网页A有个链接是打开另外一个三方地址B,B网页通过window.opener获取到 A 网页的window对象,进而可以使得A页面跳转到一个钓鱼页面 window.opener.location.href ="abc.com",用户没注意地址发生了跳转,在该页面输入了用户名密码后则发生信息泄露。

为了避免上述问题,引入了rel="noopener"属性,这样新打开的页面便获取不到来源页面的 window 对象了, 此时 window.opener 的值是 null。

所以,如果要在新标签页中打开三方地址时,最好配全着rel="noopener"。

noreferrer

与noopener类似,设置了rel="noreferrer"后新开页面也无法获取来源页面的window以进行攻击,同时,新开页面中还无法获取document.referrer信息,该信息包含了来源页面的地址。

通常noopener和noreferrer会同时设置,rel="noopener noreferrer"。

既然后者同时拥有前者限制获取window.opener的功能,为何还要同时设置两者呢。

考虑到兼容性,因为一些老旧浏览器不支持 noopener。

nofollow

搜索引擎对页面的权重计算中包含一项页面引用数 (backlinks), 即如果页面被其他地方链接得多,那本页面会被搜索引擎判定为优质页面,在搜索结果中排名会上升。

当设置rel="nofollow"则表示告诉搜索引擎,本次链接不为上述排名作贡献。

一般用于链接内部地址,或一些不太优质的页面。

<a href="https://www.wfqcj.com/" rel="noopener nofollow" target="_blank">https://www.wfqcj.com/</a>

<a href="https://www.wfqcj.com/" rel="noopener noreferrer" target="_blank">https://www.wfqcj.com/</a>

dofollow

与nofollow相反,dofollow链接是在网站上创建的默认链接。大多数情况下,它们用于标记有价值的内容。根据“do follow”命令搜索引擎应该关注该链接。

由于dofollow链接旨在提供高质量的内容,因此它们允许搜索引擎爬虫将其所在站点的一些功能传输到登录页面。这是一种对SEO友好的力量。使链接的网站在搜索结果中显示得更高,尤其是在链接中使用的锚文本(关键字)上。

除了dofollow 链接的力量之外,它们还向目标网站传达了信任,对 Trust Rank 指标的值产生了积极影响。这个值越高,网站在搜索引擎算法中的可靠性就越高。


2. <link>标签通常配合着使用canonical来规范页面唯一链接,且在一个页面中仅使用一次,所以与dofollow,nofollow,noopener,noreferrer使用完全不同,但rel="canonical"属性会影响SEO。

当一个页面存在多一个可能URL时,为了防止不利的索引,您需要将爬虫引导到最重要的URL——包含原始内容的URL。

例如https://www.wfqcj.com/p/ab.html,从不同入口进入链接不唯一时。

首页进入:https://www.wfqcj.com/p/ab.html

频道a页进入:https://www.wfqcj.com/a/p/ab.html

频道b页进入:https://www.wfqcj.com/b/p/ab.html

频道c页进入:https://www.wfqcj.com/c/p/ab.html

频道a,b,c页页面源码均需添加如下代码

<link rel="canonical" href='https://www.wfqcj.com/p/ab.html' >

3. 还有不常见使用的标签如rel="sponsored",rel="ugc",rel="preconnect",rel="icon",rel="stylesheet"等等。

评论

此博客中的热门博文

【转载】张朝阳给躺平族解毒

张朝阳昨晚做了一个跨年演讲迎接2024年,主题是“时间”,才猛的想起马云和张朝阳都是1964年生,把互联网带进中国的第一代到了法定退休的年纪。但张朝阳说他的字典里没有退休,早上七点到公司,有时候是五点,晚上七点走。他在直播间里讲物理,把王石和俞敏洪这些人拉来聊人生。 我就在一个科技群里吐槽,1/4个世纪之前,张朝阳从麻省理工回来,拿了尼葛洛庞帝的钱,在天安门前裹着头巾玩滑板,那张照片登上大大小小的头版,是数字时代被打开的标志,两年后搜狐纳斯达克上市。那时谁能料到1/4个世纪之后,老张成了物理网红,无数直播间里的芸芸众生。 有个老炮马上反对说,再过1/4个世纪,眼下最热的科技新贵基本都会走下神坛,他们都得找到自己的物理学和直播间,张朝阳只不过先出发了1/4个世纪,先经历周期。 另一个老炮接过去说,普通人张朝阳才是大多数人可以共情的,神坛上的偶像只是接受空洞的崇拜。物理网红张朝阳才是他自己,天之骄子只是被历史选中的演员。 2006年我写《生于80年代》,当时看到20岁出头的几个80后,戴志康、李想这些人野心勃勃,有些跟年纪不相衬的老练,初中就玩电脑,有更多数字时代的本能,他们可能突破70和60后对互联网的统治。 文章一炮而红,很多人被这个故事打动了。但现实打脸,最早要到十年之后的2016年,抖音和拼多多才前后脚上线,SheIn才一百来号人,80后才冒出接管权力的苗头。 今天黄峥、张一鸣、许仰天三个80后把全球电商市场搅到天翻地覆,拼多多和字节凭全球化把阿里和腾讯盖过,离2006年那个预言已经过去十八年,一代人。 2006年还是PC互联网盛世,70和60后早就提前占领要道,一夫当关万夫莫开。这时冒出来的80后不管战斗力多强,都不可能凭空开天辟地。那个80后的救世主,一年以后发布iPhone的乔布斯本尊,是一个50后,而且是长在唯一科技强权美国的操作系统上。那个时代的中国80后注定活在70和60后的影子里。 直到十年后移动互联网盛世,那些在这十年历练过人生又没有PC互联网包袱的80后,才能抓住机会。换句话说,2006年就冒头的80后就坏在出道太早。那一年黄峥、张一鸣和许仰天要么还在学校,要么刚开始打工。 形势比人强。 如果没有几亿农民工抛妻弃子,背井离乡去城里打工,攒下中国的制造业根基,如果没有支付宝,没有智能手机然后有了微信,如果没有大基建和四通一达,如果不巧生在刚果,那...

完美解决Google Adsense地址无法接收PIN信件,导致无法完成地址验证问题

  My account cannot modify the address to receive the PIN code https://support.google.com/adsense/thread/285805766?hl=en 如何更改“付款资料”中的“国家/地区”? https://support.google.com/adsense/thread/199758408?hl=en AdSense账户国家错误,需要申请修改 https://support.google.com/adsense/thread/199757027?hl=en https://payments.google.com/gp/w/u/0/home/addressbook Google Adsense后台是地址是没有编辑图标,所以无法修改

Opencart模板导航栏和商品优化

2020年8月购买了一个Bluehost服务器,用Opencart搭建了一个电商网站( CDCLOTH.com ),当时浅浅的研究了一下Opencart这个开源程序部署好后,有哪些地方需要优化,当时将所做的部分优化记录在了有道云笔记上,今天整理发布到个人博客,分享给有需要的朋友。 1. 类目栏背景色和字体颜色调整 刚搭建完成的网站前端页面一级类目栏背景色是蓝色,字体是黑色,由于网站是售卖服装类,蓝色背景色显得不搭,所以需要调整为黑色。所以我们需要在前端找到这个section code所在位置和引用的css字段名称,然后需要去后台源码中找到对应code位置和引用的css字段,并理解code需要如何优化才能呈现想要的效果。 http://xxxx.com/catalog/view/theme/default/stylesheet/stylesheet.css 对应源文件位置:catalog> view> theme> default> stylesheet> stylesheet.css #menu { background-color: #229ac8; background-image: linear-gradient(to bottom, #23a1d1, #1f90bb); background-repeat: repeat-x; border-color: #1f90bb #1f90bb #145e7a; min-height: 40px; } 更改为: #menu { background-color: #363636; background-image: linear-gradient(to bottom, #444444, #222222); background-repeat: repeat-x; border-color: #222222 #222222 #000000; min-height: 40px; } 二级类目同上存在类似问题需要调整,需要优化二级类目展开后背景色及Show All Category的字体颜色。 .dropdown-menu li > a:hover { text-decoration: none; color: #ffffff; background-color...