27. 链接的 rel 属性

本节目标：理解 rel 属性的作用，掌握 noopener、noreferrer、nofollow、external 这四个最常用值的用法。

rel 描述的是当前页面和链接目标之间的关系。它不影响点击行为，但对安全和 SEO 很重要。

noopener：安全隔离

当你用 target="_blank" 打开新标签页时，新页面能通过 window.opener 访问原页面。这是潜在的安全风险。

<a href="https://unknown-site.com" target="_blank" rel="noopener">
  安全的外部链接
</a>

加上 rel="noopener"，新页面就无法访问 window.opener 了。相当于”各走各的路，互不干扰”。

Important

只要是 target="_blank" 的外部链接，就应加上 noopener。这是现代 Web 的基本安全实践。

浏览器默认会在请求头里带上 Referer 字段，告诉目标网站”这个访客从哪来”。noreferrer 会去掉这个信息。

<a href="https://external.com" rel="noreferrer">不透露来源</a>

常见场景：内部工具的链接不想让外部网站知道你的来源域名。

Note

noreferrer 包含了 noopener 的效果。如果你同时写 rel="noopener noreferrer"，两个效果都会生效。

nofollow 是给搜索引擎看的提示——“这个链接我不背书，别把它算成推荐票”。

<a href="https://user-generated-link.com" rel="nofollow">用户提交的内容</a>

常见于评论区、论坛帖子里的用户生成链接。防止垃圾链接蹭你的 SEO 权重。

Note

nofollow 只是提示，不是命令。搜索引擎可能选择忽略它。

rel="external" 表示这是一个外部链接。浏览器不会做特别处理，但方便 CSS 选择器和 JavaScript 识别。

<a href="https://other-site.com" rel="external" target="_blank">外部网站</a>

你可以在 CSS 里用属性选择器给它加个小图标：

a[rel="external"]::after {
  content: " ↗";
}

多个 rel 值用空格分隔：

<a href="https://external.com" target="_blank" rel="noopener noreferrer nofollow">
  完整安全配置
</a>

这行代码的意思是：新标签页打开、安全隔离、不隐藏来源、搜索引擎别追踪。

Tip
实际项目中，外部链接的标配写法：
<a href="..." target="_blank" rel="noopener noreferrer">文本</a>

HTML 标准里 rel 的合法值有几十个。除了上面四个常用的，还有几个你可能遇到：

这些是语义化的辅助信息，浏览器和搜索引擎会自动利用。不需要刻意记忆，需要时查文档即可。

下节我们学习图像地图——一张图片上划分多个可点击区域。