跳至正文
外链与链接建设 · Google SEO

外链上的 noopener 属性是什么、要不要加

// / / 光算科技

rel="noopener" 解决的是浏览器安全问题,不是搜索问题。它不传递任何排名信号,也不影响你的链接是否被抓取;对做外链的人来说,正确的判断是「可以加,不加也不会有损失」,因为它管的是别人打开你的链接时那个标签页能不能反向操作你这边的页面。而你作为来源方在自己站内放外部链接时,MDN 的文档还写明了一件事:给 <a> 加上 target="_blank" 会隐式提供与 rel="noopener" 相同的行为。

noopener 在标准里到底做了什么

判断它有没有必要,先说清它做什么。MDN 对 rel 取值的定义把 noopener 解释为:如果这个超链接会创建顶层浏览上下文或辅助浏览上下文,就创建一个不是辅助浏览上下文的顶层浏览上下文,也就是让链接表现得像 window.opener 为 null。

危害点就在 window.opener 上。WHATWG HTML 标准的链接类型一节写明:这个关键字用于 <a>、<area> 和 <form>,指示浏览器导航到目标资源时不授予新的浏览上下文对打开它的文档的访问权,做法是不在被打开的窗口上设置 Window.opener。紧邻的 noreferrer 一节写明,它除了让浏览器省略 Referer 头、不泄露来源信息之外,行为等同于同时指定了 noopener。

这是标准与浏览器文档对行为的规定,不是任何一家搜索引擎的立场。把这件事和 SEO 分开看的理由很简单:noopener 不在搜索引擎会读取的链接关系取值里。

加不加,跟搜索有没有关系

外链上三种 rel 取值的职责分区示意:noopener 与 noreferrer 归为浏览器安全行为,sponsored、ugc、nofollow 归为搜索引擎读取的链接关系取值,两组互不替代
原创示意:图中为外链上两类 rel 取值分别由谁读取的对照,不是真实数据或后台截图。

搜索引擎读的是另一组取值。官方关于标注出站链接的说明给出的取值是三个:rel="sponsored" 用于标记广告或付费 placement,rel="ugc" 用于标记用户生成内容里的链接,rel="nofollow" 用于其他取值不适用、你希望 Google 不把你的站点与被链接页面关联时使用。文档也说明,对于希望 Google 直接抓取和解析的常规链接,不需要加 rel 属性。

两组并排看,结论就清楚了:noopener 解决的是「打开我链接的那个页面能不能反过来操作我这边的页面」,nofollow、sponsored、ugc 解决的是「这条链接与你的站点是什么关系」。两者不互相替代,也不互相冲突,一个 <a> 标签上可以同时写多个值。

MDN 还补了一个实用细节:使用 noopener 时仍会提供 Referer 头,除非同时用了 noreferrer。这正是做外链时最需要留意的一点——希望对方在分析工具里看到你是从哪个页面点过去的,用 noopener,不要顺手加上 noreferrer。

怎么验证改动没有副作用

改代码之前先想清楚要验证什么。这节给的是改完之后怎么核对,写法对照表放在后面。三步。一、源码核对:在源码里搜索 rel,确认每个 target="_blank" 的 <a> 上都有 noopener,且没有误加 noreferrer。二、行为核对:在浏览器里打开一个 _blank 链接,在新标签页控制台执行 window.opener,返回 null 即生效;再看网络面板请求头里有没有 Referer。三、搜索侧核对:改完之后不要动指向这些页面的链接属性,用链接报告对比改动前后的目标 URL 记录数有无变化。

第三步是关键的收尾:如果记录数变了,原因一定不在 noopener 上,按开头那两条结论逐项排查:noopener 只影响浏览器行为,不影响链接的抓取与归属,所以记录数变化的原因在别处,别把它写进验收表当结论。链接侧的确认步骤见确认一条外链是否真被收录。

推荐的写法与取舍

按你要达成的目的选,不要一律复制同一段代码:

你要的目的建议写法代价
在 _blank 打开且不暴露 window.openerrel="noopener",或只写 target="_blank"(现代浏览器已隐式提供同等行为)无,仍会带 Referer
不暴露 window.opener,且不发送 Refererrel="noopener noreferrer"对方看不到你从哪个页面点过去
这条是付费链接加 rel="sponsored",安全取值按上一行取舍无;但不标注就落进官方列举的情形
这条是用户生成内容里的链接加 rel="ugc"无
不希望 Google 从你这页抓取被链接页rel="nofollow";官方说明站内这种情况用 robots.txt 的 disallow 规则这条链接的抓取与关联被限定

一句话原则:安全取值按「你是否需要 Referer」决定,搜索关系取值按「这条链接的商业性质」决定。属性用法的完整边界见follow 与 nofollow 的实际用法。

哪些情况不需要加

四种情形可以不加。一是站内链接——两边都是你自己的页面,window.opener 不构成风险。二是邮件和消息里的纯文本地址,压根不是 <a> 元素。三是落点是你自己公司站点且完全可信的场景。四是只在设计稿或原型里出现、还没上线的代码。

另外要分清一件事:你作为被链接方在自己站内做的改动,和你作为来源方在别人站点上的链接,是两个不同的问题。如果对方站点上的链接由你提供 HTML 片段,那在自己的代码规范里统一加 noopener 是合理的默认值;如果只能控制自己站内的出站链接,那就只管好出站这一侧,不要在给对方的内容模板里塞一堆与搜索无关的属性。