跳至主要内容

博文

目前显示的是 八月, 2022的博文

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"则表示告诉搜索引擎,本次链接不为上述排名作贡献。 一般用于链接内部地址,或一些不太优质的页面。 <...