PHP小码农

Appearance

rel 属性详解 ​

<a> 标签的 rel（relationship）属性定义了当前页面与链接目标之间的关系。rel 属性对于安全性、SEO、资源提示和用户体验都非常重要。

前置知识

阅读本节前，建议先了解：锚点链接

基础概念 ​

rel 属性的值是一个或多个用空格分隔的关键字，每个关键字代表一种关系。这些关键字告诉浏览器和搜索引擎当前页面与链接目标之间的特定关系。

语法 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>rel 属性示例</title>
</head>
<body>
  <!-- 外部链接：noopener + noreferrer -->
  <a href="https://example.com" rel="noopener noreferrer">外部链接</a>

  <!-- 不跟踪链接 -->
  <a href="https://example.com" rel="nofollow">不跟踪链接</a>

  <!-- 预连接资源 -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
</body>
</html>

详细说明 ​

链接安全相关 ​

关键字说明
noopener防止新页面通过 window.opener 访问原始页面
noreferrer不发送 Referer 请求头，保护隐私
noopener noreferrer同时使用两者（最推荐的外部链接写法）
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>链接安全</title>
</head>
<body>
  <!-- 推荐：noopener + noreferrer -->
  <a href="https://example.com" target="_blank" rel="noopener noreferrer">安全的外部链接</a>
</body>
</html>

SEO 相关 ​

关键字说明
nofollow告诉搜索引擎不要跟踪此链接，不传递权重
sponsored标记付费/赞助链接（取代 nofollow 的部分用途）
ugc标记用户生成内容中的链接（评论、论坛帖子等）
me表示链接指向的是当前网站所有者的个人资料
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>SEO rel 属性</title>
</head>
<body>
  <!-- 不传递 SEO 权重 -->
  <a href="https://spam-site.com" rel="nofollow">可疑链接</a>

  <!-- 赞助链接 -->
  <a href="https://sponsor.com" rel="sponsored">赞助商链接</a>

  <!-- 用户评论中的链接 -->
  <a href="https://user-blog.com" rel="ugc">用户分享的链接</a>

  <!-- 个人主页 -->
  <a href="https://github.com/myname" rel="me">我的 GitHub</a>
</body>
</html>

资源提示相关 ​

关键字说明适用元素
preconnect提前建立连接（DNS、TCP）<link>
prefetch预取下个页面可能需要的资源<link>
preload预加载当前页面需要的资源<link>
dns-prefetch提前解析 DNS<link>
prerender预渲染下个页面（谨慎使用）<link>
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>资源提示</title>

  <!-- 提前连接到字体服务器 -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

  <!-- 预取下个页面的资源 -->
  <link rel="prefetch" href="/next-page.html">

  <!-- DNS 预解析 -->
  <link rel="dns-prefetch" href="https://cdn.example.com">

  <!-- 预加载关键 CSS -->
  <link rel="preload" href="/styles/main.css" as="style">
</head>
<body>
  <h1>资源提示示例</h1>
</body>
</html>

其他 rel 值 ​

关键字说明
noopener防止 window.opener 访问
noreferrer不发送 Referer 头
nofollow不传递 SEO 权重
sponsored赞助链接
ugc用户生成内容链接
me个人主页链接
alternate替代版本（RSS、其他语言）
canonical规范 URL
author作者页面
license许可证页面
help帮助页面
next / prev分页导航

rel 值组合使用 ​

rel 属性可以同时包含多个值，用空格分隔：

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>rel 组合使用</title>
</head>
<body>
  <!-- 安全 + 不跟踪 -->
  <a href="https://ad.example.com" target="_blank" rel="noopener noreferrer nofollow sponsored">广告链接</a>

  <!-- 用户内容 + 不跟踪 -->
  <a href="https://user-site.com" rel="nofollow ugc">用户评论链接</a>
</body>
</html>

实战示例 ​

综合使用场景 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>rel 综合使用</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="dns-prefetch" href="https://analytics.example.com">
  <style>
    body { max-width: 680px; margin: 0 auto; padding: 2rem 1rem; font-family: sans-serif; }
  </style>
</head>
<body>
  <h1>链接关系标注</h1>

  <!-- 导航链接 -->
  <nav>
    <a href="/">首页</a>
    <a href="/help" rel="help">帮助</a>
    <a href="/license" rel="license">许可证</a>
  </nav>

  <!-- 文章中的外部链接 -->
  <p>参考了 <a href="https://example.com/article" target="_blank" rel="noopener noreferrer">外部文章</a>。</p>

  <!-- 赞助链接 -->
  <a href="https://sponsor.com" rel="sponsored noopener noreferrer" target="_blank">赞助商</a>

  <!-- 个人主页 -->
  <footer>
    <p>作者：<a href="https://github.com/author" rel="me author">GitHub 主页</a></p>
  </footer>
</body>
</html>

注意事项 ​

  • 外部链接始终使用 noopener noreferrer
  • nofollow、sponsored、ugc 是互斥的 SEO 提示值
  • preconnect 和 dns-prefetch 可以同时使用以获得更好的性能
  • prerender 消耗大量带宽，应谨慎使用

最佳实践 ​

  1. 外部链接加 noopener：所有 target="_blank" 链接加 rel="noopener noreferrer"
  2. SEO 链接标注：根据链接类型选择 nofollow、sponsored 或 ugc
  3. 资源预加载：对关键外部资源使用 preconnect
  4. DNS 预解析：对第三方域名使用 dns-prefetch

下一节

继续学习：邮件与电话链接

参考链接 ​