React SEO：让 React 应用获得排名的渲染、元数据与链接

快速测验

SEO 适合您吗？该如何开始？

第 1 题，共 4 题25%

人们会在 Google 上搜索您卖的东西吗？

会，我觉得会不会，这是新东西或非常小众我不知道

React SEO 的目标是让 React 应用能够被搜索引擎和 AI 助手抓取、索引和理解。React 本身是中立的：问题出在把一切都放到浏览器中渲染。Google 在 JavaScript SEO 基础知识中确认，它分三个阶段处理 JavaScript 应用（抓取、渲染、编入索引），并指出服务器端渲染或预渲染"仍然是个好主意，因为它能让网站对用户和爬虫都更快，而且并非所有机器人都能运行 JavaScript"。

为什么 React 不利于 SEO？

以单页应用方式创建的 React 应用，交付的 HTML 文件里几乎只有一个空的根 div 和一个 script 标签。浏览器下载 JavaScript、执行它，然后构建页面。只读取 HTML 的爬虫看不到任何可索引的内容：没有标题，没有正文，也没有链接。

Googlebot 确实会执行 JavaScript，但这是一个单独的步骤：页面先被抓取，进入渲染队列，在无界面 Chromium 中渲染，之后才会使用渲染出的链接和内容。每多一个步骤，就多一次失败的可能（脚本错误、API 被屏蔽、超时），新页面出现在搜索结果中的时间也会推迟。我们的 JavaScript SEO 指南详细介绍了这一流程，关于 Google 索引的文章则说明了如何加快页面收录。

其他机器人没那么有耐心。Vercel 于 2024 年 12 月发布的分析 The rise of the AI crawler 发现，"目前没有任何主要 AI 爬虫会渲染 JavaScript"，点名了 GPTBot、ChatGPT-User、OAI-SearchBot、ClaudeBot 和 PerplexityBot。客户端渲染的 React 页面对 ChatGPT、Claude 和 Perplexity 不可见，即使 Google 已经将其编入索引。

React 网站应该采用哪种渲染方式？

React 团队现在建议用框架来创建新应用。在 2025 年 2 月 14 日停用 Create React App 时，团队在公告中写道，"服务器渲染可以改善 SEO"，同时还能减少用户在看到内容前需要下载的 JavaScript，从而提升性能。以下选项按对搜索的友好程度从弱到强排列：

关于动态渲染，Google 文档说得很明确：它"只是一种权宜之计，并非长期解决方案"，Google 推荐改用服务器端渲染、静态渲染或水合。如果你正在选择框架，我们的 Next.js SEO 指南详细介绍了渲染模式、Metadata API 和站点地图。

如果无法迁移，只要稍加注意，单页应用仍然可以被 Google 索引。我们的单页应用 SEO 指南列出了相关条件；本文其余内容对两种情况都适用。

如何在 React 中设置标题和元标签？

自 React 19（2024 年 12 月 5 日发布稳定版）起，组件可以直接渲染 title、meta 和 link 标签，React 会把它们提升到文档的 head 中。React 19 发布说明指出，这种原生支持适用于"纯客户端应用、流式 SSR 和 Server Components"。在 React 19 之前，这项工作由 react-helmet 或 react-helmet-async 等库完成，它们在需要按路由覆盖默认值时仍然有用。

function ProductPage({ product }) {
  return (
    <>
      <title>{`${product.name} | Shop`}</title>
      <meta name="description" content={product.summary} />
      <link rel="canonical" href={`https://example.com/p/${product.slug}`} />
      <h1>{product.name}</h1>
    </>
  )
}

无论使用哪种方法，都要遵守三条规则：

• 每页只有一个标题，唯一且具有描述性。React 文档提醒，如果多个组件同时渲染标题，"浏览器和搜索引擎的行为是不确定的"。请传入单个字符串（模板字符串），而不是文字和变量的混合。
• 每个网址一个描述和一个规范链接，根据页面数据生成。元标签生成器可以帮助撰写，规范链接检查工具可以确认线上实际情况。
• 把 Open Graph 标签放在初始 HTML 中，用于会被分享的页面，因为链接预览机器人通常读取原始 HTML。

哪些路由和链接错误会阻碍索引？

Google 表示，它"只有在链接是带有 href 属性的 a 元素时才能发现链接"，并建议不要使用网址片段来加载不同内容。大多数 React SEO 问题都源于路由细节：

要查看 Google 渲染出的内容，请使用 Search Console 的网址检查工具查看测试页面的 HTML，或用可索引性检查工具检测关键页面模板。

如何在 React 中处理站点地图和结构化数据？

React 没有内置站点地图。请在构建时根据路由和数据生成 sitemap.xml（或使用框架自带的站点地图功能），只列出返回 200 的规范网址，并在 robots.txt 中引用它。小型静态网站使用 XML 站点地图生成器即可。

结构化数据与元数据遵循同样的规则：用与页面相同的数据，把 JSON-LD 脚本与页面一起渲染，最好在服务器端完成。Google 可以在渲染后读取由 JavaScript 注入的 JSON-LD，但初始 HTML 中缺少的标记，对不渲染的爬虫来说同样不存在。文章使用 Article，电商使用 Product，全站使用 Organization，深层页面使用 BreadcrumbList。

性能如何影响 React SEO？

庞大的 JavaScript 包会损害 Core Web Vitals：浏览器必须先下载、解析并水合代码，页面才能响应，这会拖累 Largest Contentful Paint 和 Interaction to Next Paint，移动端尤为明显。React 团队关于 Create React App 的公告指出，服务器渲染发送的 JavaScript 更少，并提供完整的 HTML 文档，从而加快 First Contentful Paint，还可能降低 INP。实用做法：用 React.lazy 按路由拆分代码，为图片指定明确尺寸，延迟加载首屏以下的组件，并审查第三方脚本。

React SEO 检查清单应包含哪些内容？

1. 每个可索引网址都返回完整 HTML（服务器渲染或预渲染），并用 curl 验证。
2. 每个网址都有唯一的标题、描述和指向自身的规范链接。
3. 使用基于历史记录的路由，不使用哈希网址，每个内部链接都渲染为带 href 的 a。
4. 使用真实状态码：缺失页面返回 404，已迁移页面使用 301 或 308。
5. sitemap.xml 由与路由相同的数据生成，并在 robots.txt 中声明。
6. JSON-LD 与页面一起渲染，并通过富媒体搜索结果测试验证。
7. 渲染所需的脚本、样式和 API 在 robots.txt 中放行。
8. 按路由拆分代码，并监测真实用户的 Core Web Vitals。

如何让 React 网站出现在 AI 的回答中？

GEO（生成式引擎优化）从可访问性开始。由于 AI 爬虫获取的是原始 HTML，React 页面必须在不依赖 JavaScript 的情况下提供正文、标题和 JSON-LD，才能被读取、总结和引用。网站 AI 可抓取性审核可以展示这些机器人从你的页面收到了什么。第二个前提是值得引用的内容：每个章节回答一个问题，附带来源、数据和清晰定义。

这部分内容工作正是我们的产品 Sorank 自动完成的。Sorank 是一款 autopilot 模式的 SEO 与 GEO 软件：其博客文章生成器每月撰写并发布 20、60 或 120 篇文章，附带来源、内部链接和图片，并可通过 webhook 接入 React 或 Next.js 等自定义技术栈。其 SEO Chat 以对话方式回答有关你网站搜索表现的问题。

一句话总结：由服务器输出 HTML，为每个网址设置独立的标题、描述和规范链接，并使用真正的链接。这样，React 网站就能像其他网站一样获得排名，AI 助手也能读取它。如需持续为网站提供面向 Google 和 AI 的文章，请查看 Sorank 的方案，每月 49 美元起，可免费试用 3 天。