百度SEO实战：SPA单页应用如何被收录

SPA 好用，可它在百度眼里常常"隐身"

做过单页应用（SPA）的前端都知道，Vue、React 这类框架体验顺滑，路由切换不刷新，交互也干净。但把这样一个站丢到百度上，往往会遇到一个尴尬的事实：页面能打开、能用，可百度就是不怎么收录，甚至首页之外的内容一条都搜不到。

原因其实不复杂。传统 SPA 采用客户端渲染（CSR），服务器最初返回的 HTML 基本是一个空壳，真正的标题、正文、链接都要等 JavaScript 执行完才"长"出来。谷歌爬虫这些年对 JS 渲染支持较好，但 Baiduspider 对 JavaScript 的执行能力一直比较有限，也不够稳定。爬虫抓到一个几乎空白的页面，自然没什么可收录的内容。

一个真实项目踩过的坑

之前帮一个做工具类产品的团队看站，他们的官网用 Vue 全家桶重写，设计漂亮、速度也快，上线三个月后却发现：百度只收录了首页，几十个功能页、帮助文档页全部没进索引。用 site 指令查，收录量长期停在个位数。

我们做了两步排查。第一，用"百度搜索资源平台"里的抓取诊断工具去抓几个内页，返回的 HTML 里果然只有一个 <div id="app"></div>，正文一个字都没有；第二，把 UA 换成 Baiduspider 直接请求页面，拿到的同样是空壳。问题定位很清楚——不是内容质量，是爬虫根本读不到内容。

后来改成服务端渲染（SSR），让首屏 HTML 直接带上完整正文，再配合链接主动提交。大约六周后，内页开始批量进索引，收录数从个位数涨到上百，有搜索需求的长尾词也慢慢带来了自然流量。整个过程没有任何"黑科技"，无非是把内容还给爬虫而已。

让百度能读懂 SPA 的几种做法

核心思路只有一句话：爬虫到达时，页面上要有真实的 HTML 内容，而不是靠 JS 现场生成。常见方案有三种，各有取舍。

1. 服务端渲染（SSR）

这是最稳妥的方案。React 用 Next.js，Vue 用 Nuxt.js，都能把页面在服务器上渲染成完整 HTML 再返回。爬虫和用户拿到的首屏都是带内容的，收录和首屏速度一起改善。代价是架构变复杂，需要 Node 服务，对缓存和服务器压力要多花心思。

2. 预渲染（Prerender）

如果站点更新不频繁，比如企业官网、文档站，可以在构建时把每个路由提前生成静态 HTML（prerender-spa-plugin 之类），或者用独立的预渲染服务在爬虫来访时返回静态快照。它比 SSR 轻，适合页面数量可控的场景。

3. 动态渲染

判断来访 UA，是爬虫就返回预渲染好的 HTML，是普通用户就照常给 SPA。它能快速救急，但要维护两套输出的一致性：返回给爬虫的内容必须和用户看到的一致，否则容易被判定为作弊。

渲染解决了，别忘了 SEO 的基本功

把内容"喂"给爬虫只是第一步。SPA 项目常常因为太关注交互，反而丢了传统 SEO 该做的基础。这几点务必补齐：

• 每个路由要有独立、真实的 <title> 和 meta description，别所有页面共用一套；可用 vue-meta、react-helmet 这类工具动态设置。
• URL 尽量用真实路径（/help/login），少用 hash 路由（/#/help/login），hash 后面的内容爬虫通常会忽略。
• 生成 sitemap.xml 并在百度搜索资源平台提交，再配合链接主动推送，让新页面更快被发现。
• 合理使用 <h1>、<h2> 标签、图片 alt 和内链，让页面结构对机器友好。
• 控制首屏加载速度，移动端体验尤其重要，百度对移动端和加载速度是有偏好的。

落地清单与几个常见误区

如果你手上正好有个 SPA 要做百度收录，可以按这个顺序自查：

• 先用抓取诊断或 curl 模拟 Baiduspider，确认爬虫拿到的 HTML 里到底有没有正文；
• 确认渲染方案（SSR／预渲染／动态渲染）已覆盖所有需要收录的页面；
• 补齐每页独立的 title、description 和规范的 URL；
• 提交 sitemap，开通链接主动推送，持续观察索引量变化。

最后提醒两个误区。一是别指望"百度会慢慢学会执行我的 JS"，与其赌爬虫的能力，不如老老实实把 HTML 准备好；二是收录不是一锤子买卖，改完之后要给百度一点时间重新抓取，通常以周为单位观察，频繁改动反而会拉长这个周期。SPA 和 SEO 并不矛盾，关键是让机器和用户都能第一时间看到真实内容。