首页 > 文章 > 前端

a标签rel属性详解与应用全攻略

时间：2026-05-18 14:48:41 451浏览收藏

a标签的rel属性远非可有可无的装饰，而是深刻影响浏览器行为、安全机制与SEO语义的关键开关：它必须与target="_blank"配合才能激活noopener/noreferrer的安全防护，防止反向标签劫持和XSS风险；nofollow及其演进形态（sponsored、ugc）虽不阻止用户跳转，却向搜索引擎传递精准的链接意图信号；而大量看似“高大上”的rel值（如stylesheet、preload、canonical）在a标签中实际被完全忽略——真正实用且必需的仅寥寥数个。理解rel的生效条件、语义边界与浏览器兼容性差异，是前端开发中保障安全、性能与可访问性的基础必修课。

rel属性的作用_HTML a标签rel关联关系全攻略

rel 属性不是可有可无的装饰，它直接决定浏览器是否加载资源、如何加载、是否参与渲染、是否影响安全上下文，甚至被搜索引擎当作语义信号。用错值，轻则资源不加载，重则引入 XSS 风险或破坏预加载逻辑。

为什么 `a` 标签加了 `rel` 但没效果？

常见现象是写了 链接，却仍能通过 window.opener 访问原页面——这是因为 rel="noopener" 只在配合 target="_blank" 时才生效。

rel="noopener" 和 rel="noreferrer" 对标签无效，除非同时存在 target="_blank"（或 target="_new" 等非 _self 值）

单独写 rel="noopener" 不会报错，但浏览器直接忽略该属性

Chrome 88+ 开始，即使没写 rel，target="_blank" 也会默认启用 noopener 行为；但 Safari、Firefox 仍需显式声明

若只关心隐私不关心安全，可用 rel="noreferrer"，它会清空 document.referrer，但不切断 window.opener

`rel="nofollow"` 在 `a` 标签里到底管不管用？

它确实影响搜索引擎，但不是“禁止跳转”，而是告诉爬虫：“这个链接我不背书”。用户点击照常跳转，JS 也能正常触发。

rel="nofollow" 是 Google、Bing 等主流引擎识别的通用标准，但仅对出站链接有意义；内部链接加它基本无效
2021 年起 Google 将 rel="nofollow" 视为“提示”而非指令，更推荐用 rel="sponsored"（付费广告）或 rel="ugc"（用户生成内容）替代
多个值可共存：rel="nofollow ugc" 合法且常见，等价于两个独立语义叠加
注意拼写：写成 rel="no-follow" 或 rel="NOFOLLOW" 都无效——必须小写、无连字符、空格分隔

`rel="noopener noreferrer"` 要不要一起写？

要，但得理解各自作用：前者防 XSS，后者保隐私，二者不互斥，也不冗余。

rel="noopener" 切断新页面对 window.opener 的访问权限，防止恶意页面调用 opener.location.replace() 劫持原页
rel="noreferrer" 同时禁用 Referer 请求头和 document.referrer，比 noopener 更彻底地隐藏来源
如果只写 rel="noreferrer"，它会隐式包含 noopener 效果（多数现代浏览器），但语义不明确，建议显式并列书写
实操中优先用 rel="noopener noreferrer"，尤其在 CMS、评论区、富文本编辑器等用户可插入链接的场景