单页应用 SEO：如何让 SPA 被 Google 编入索引并被 AI 读取

单页应用 SEO 是一套技术，让用 React、Vue、Angular 或 Svelte 构建的 JavaScript 应用像传统网站一样容易被抓取。这个问题早有充分记录：Google 在 JavaScript SEO 基础知识 中解释，它分三个阶段处理 JavaScript 页面（抓取、渲染、编入索引），而 SPA 的每个弱点都位于这条流程的某个环节。本指南专注于 SPA；关于一般的 JavaScript 网站，请阅读我们的 JavaScript SEO 指南。

什么是单页应用，为什么它的 SEO 很难做？

传统网站为每个 URL 返回完整的 HTML 文档。SPA 为每个 URL 返回几乎相同的文档：一个空的 <div id="root">、几个 meta 标签和一个庞大的 JavaScript 包。浏览器下载这个包，调用 API，然后绘制页面。访客点击链接时，JavaScript 会替换内容而不重新加载页面。

对于使用高速手机的用户来说，结果几乎是即时的。对于爬虫来说，第一次响应只是一个空壳：没有标题，没有文本，没有链接。一切都取决于机器人是否执行 JavaScript，以及何时执行。仅这一点就解释了大部分 SPA SEO 问题：

• 内容延迟或缺失：文本只在渲染后才存在，而 Google 稍后才会渲染，其他机器人则直接跳过。
• 多个视图共用一个 URL：较旧的 SPA 使用片段路由（/#/pricing），而 # 之后的部分永远不会发送到服务器，因此所有视图都合并成一个 URL。
• 标题和描述完全相同：外壳只有一个 <title>，如果路由器不更新它，所有页面都会共用。
• 没有 href 的链接：按钮和 onClick 处理程序能为用户导航，却不给爬虫留下任何可以跟踪的东西。
• 软 404 错误：服务器对每个路径都返回 200，包括不存在的页面，因此错误视图会被当作低质量页面编入索引。
• JavaScript 过重：庞大的包会拖慢首次显示和交互，从而影响 Core Web Vitals。

Google 如何抓取和渲染 SPA？

Googlebot 首先获取原始 HTML，并读取其中的链接和指令。返回 200 状态码的页面随后进入 Web Rendering Service（一个无头 Chromium）的队列。Google 表示，页面“可能会在这个队列中停留几秒钟，但也可能需要更长时间”。渲染完成后，生成的 HTML 会再次被解析以提取内容和链接，然后编入索引。

Google 文档中有四个细节对 SPA 尤为重要：

1. 只有带 href 的 <a> 元素才是可靠的链接。由 JavaScript 注入的链接只要符合这种格式就没有问题。
2. 片段不是独立的页面。Google 要求使用 History API（pushState）而不是 # 路由。它已于 2015 年 10 月弃用旧的 AJAX 抓取方案（#! 网址）。
3. 原始 HTML 中的 noindex 优先。Google 看到 noindex 时可能会跳过渲染，因此之后再用 JavaScript 移除它是无效的。
4. 渲染使用缓存文件。Googlebot 会积极缓存 JavaScript 和 CSS 文件，因此请使用带指纹的文件名（在文件名中加入内容哈希），以避免使用过时的包。

实际后果是：Google 可以为客户端渲染的 SPA 编入索引，但你为每个页面增加了第二个步骤、一段延迟和一个故障点。渲染过程中的超时、被阻止的 API 调用或 JavaScript 错误，都会让编入索引的版本变成空白。请用 Search Console 中的网址检查工具查看 Google 看到的内容；如果页面一直未被编入索引，请阅读我们关于 Google 索引如何运作 的指南。

ChatGPT、Claude 和 Perplexity 会读取 JavaScript 吗？

大多数情况下不会。Vercel 和 MERJ 在 2024 年 12 月发布的一项基于 Vercel 网络流量的研究中发现，“目前没有任何主要 AI 爬虫会渲染 JavaScript”：GPTBot、OAI-SearchBot 和 ChatGPT-User（OpenAI）、ClaudeBot（Anthropic）、PerplexityBot、Meta-ExternalAgent 和 Bytespider 都只读取原始 HTML。它们确实会下载 JavaScript 文件（约占 ChatGPT 请求的 11.5%、Claude 请求的 23.8%），但不会运行这些文件。例外是依靠 Google 渲染基础设施的 Gemini，以及使用基于浏览器的爬虫的 AppleBot。

对于客户端渲染的 SPA，这意味着为 ChatGPT、Claude 和 Perplexity 提供数据的 AI 爬虫 看到的是一个空白页面。你的产品可能在 Google 上排名靠前，却在 AI 回答中完全隐形，因为助手从未读到其中的一个字。社交网络和即时通讯应用中的大多数链接预览机器人也是如此，它们读取原始 HTML 中的 Open Graph 标签。内容进入 HTML 之后，还要检查你的 robots.txt 是否允许你需要的 AI 爬虫。

SPA 应该采用哪种渲染策略？

解决办法是在第一次响应中就发送真实的 HTML。Google 在其 动态渲染文档 中称动态渲染（只向机器人提供预渲染版本）是“一种权宜之计，而不是推荐的解决方案”，并建议改用服务端渲染、静态渲染或 hydration。下面的定义参考了 web.dev 上的 Rendering on the Web 一文。

大多数现代框架允许按路由混合使用策略：营销页面用静态生成，产品目录用服务端渲染，登录后的应用用客户端渲染。这种混合架构在搜索流量所在之处为爬虫提供完整的 HTML，并在 SPA 体验真正有价值的地方保留它。

各框架的方案

AI 建站工具生成的网站值得特别一提：其中许多导出的是客户端渲染的 React 应用。如果你的网站是用这类工具搭建的，在假定 Google 和 ChatGPT 能读取它之前，请先看看我们关于 Lovable 的 SEO 和 GEO 的说明。

SPA SEO 检查清单：逐个路由要修复什么

1. 为每个视图提供干净、可抓取的 URL

使用 History API（/pricing，绝不要用 /#/pricing），每项内容对应一个 URL，并且无论访客是直接访问还是通过应用内导航到达，URL 都保持一致。每个 URL 在新标签页中打开时都必须加载正确的内容，这正是爬虫所做的测试。

2. 使用真实链接

每个指向可编入索引页面的导航元素都应该是 <a href="/path">。框架的链接组件（Link、NuxtLink、routerLink）会输出这种标记；而在 div 或 button 元素上自定义的点击处理程序则不会。好的链接还承载着你的 网站架构：如果一个页面没有被链接，爬虫很少能找到它。

3. 按路由更新标题、描述和 canonical

每个路由都需要自己的标题、meta 描述、canonical 和 Open Graph 标签，并尽可能在服务器端生成。我们关于 meta 标签 的页面列出了需要设置的内容。只保留一个 canonical 标签：Google 建议在 HTML 中设置它，如果 JavaScript 修改了它，结果不得与原始值相矛盾。

4. 返回真实的状态码

不存在的商品和已删除的文章不能返回 200 加一条错误信息。使用 SSR 时，从服务器返回真正的 404 或 410。在纯 SPA 中，Google 接受两种备选方案：用 JavaScript 重定向到返回 404 的 URL，或者在错误视图中添加带 noindex 的 robots meta 标签。

5. 把主要内容和结构化数据放进 HTML

标题、正文、价格、常见问题和 JSON-LD 结构化数据都应该出现在服务器响应中，而不是在点击或滚动后才加载。藏在按需渲染的标签页后面，或藏在“加载更多”按钮后面的内容，常常会被遗漏。

6. 保持 JavaScript 轻量

按路由拆分代码包，延迟加载首屏不需要的内容，并避免在 hydration 期间重新渲染整个页面。请注意，Chrome 的实际用户数据（CrUX）会把应用内导航的指标归到访客最初加载的 URL 上，因此要单独测试每个关键模板。

7. 测试机器人收到的内容

对每个关键模板比较三个版本：原始 HTML（查看源代码或用命令行工具获取页面）、Google 渲染后的 HTML（网址检查，然后点击“查看已抓取的网页”），以及禁用 JavaScript 后的页面。如果主要文本只出现在第二个版本中，AI 爬虫就看不到它。我们的免费 AI 可抓取性审核 和 可索引性检查工具 可以对任意 URL 运行这些检查。

如何判断你的 SPA 是否存在 SEO 问题？

SPA 的 SEO 与 GEO：在 Google 上被找到，被 AI 引用

多年来，客户端渲染是一种可控的风险，因为 Google 最终会渲染 JavaScript。如今，一部分发现过程发生在 ChatGPT、Claude、Gemini 和 Perplexity 中，代价随之改变：只有在执行 JavaScript 后才存在的页面，不在大多数助手能够读取的来源之列。原始 HTML 中的 可抓取性 已成为生成式引擎优化的首要条件。

HTML 完整之后，其余部分遵循常规规则：清楚回答一个问题、带有来源事实和结构化数据的页面，才是助手会引用的页面。Sorank 的 GEO 优化 功能帮助你撰写和发布这类内容，而 AI 提及追踪 会显示在修复渲染之后，ChatGPT、Claude 和 Gemini 是否引用了你的品牌。

单页应用 SEO 的核心规则可以用一句话概括：凡是你希望 Google 排名、AI 引用的内容，都必须出现在服务器发送的 HTML 中。把 SPA 留给登录后的体验，在服务器或构建时渲染公开页面，然后在每次发布前后测试机器人收到的内容。