你的SPA网站是不是在百度上“查无此人”？

你刚上线一个 Vue 做的商城页，用户点开流畅丝滑，自己看着都满意——结果搜“XX品牌连衣裙”，首页都不见踪影。
不是百度瞎了，是它根本没“看懂”你塞给它的那堆 JS。

百度爬虫到底怎么“看”你的SPA？

百度爬虫（Baiduspider）确实会执行 JS，但它不像 Chrome 那样耐心。它有时间限制、资源限制，更不会等你 API 返回数据、不会点按钮、不会滚动加载。

它访问你的页面时，大概率只看到：

  • 一个空荡荡的 <div id="app"></div>
  • 或者一堆还没来得及渲染的 window.__INITIAL_STATE__ JSON
  • 甚至直接卡在 loading 动画里

我们帮一家用 React 做的本地生活平台排查过：他们“美食推荐”页在百度搜索结果里只显示 header 和 footer，中间大片空白——因为菜品列表全靠 fetch('/api/dishes') 异步拉取，而爬虫在请求发出前就收工了。

为什么服务器端渲染（SSR）是破局关键？

SSR 的逻辑很直白：用户或爬虫一请求 /dish/123，服务器当场把这页 HTML 渲染好，连同标题、描述、菜品图和文字一起吐出去。爬虫拿到的就是成品，不用再拼、不用再等。

这不是“优化”，是换了一种交付方式。
就像你点外卖，SSR 是商家直接把做好的菜装盒递过来；CSR（客户端渲染）则是给你一包调料、半份食材，让你自己在手机上炒——爬虫可不干这活。

一个用 Nuxt 重构的本地资讯站，把原来纯 Vue 的首页+5个栏目页改成 SSR 后，两个月内百度收录的深度页面明显提升，自然流量开始稳定爬升。

除了SSR，还有哪些实用的技术手段？

如果现在没法动架构，先保住命再说：

预渲染（Prerendering）：构建时就把首页、分类页、产品详情页这些“门面”提前生成成静态 HTML。Vite 用户可以直接用 vite-plugin-prerender，Webpack 项目配个 prerender-spa-plugin 就行。爬虫来，直接甩 HTML 给它。

主动推 + 被动引：

  • 今天就去百度搜索资源平台，用“链接提交”API 把你最想被收录的 10 个页面 URL 推过去；
  • 检查一遍 robots.txt，确认没把 /api/ 之外的路径误屏蔽；
  • sitemap.xml 别扔在根目录吃灰，确保它实时更新、包含所有带内容的页面 URL（别只写路由，要写真实能打开的地址，比如 /product/iphone-15，不是 /product/:id）。

你的SPA在结构上给爬虫“使绊子”了吗？

有些交互，人觉得爽，爬虫看了直摇头：

  • 无限滚动？爬虫不会滚，也不会触发 IntersectionObserver，它只扫首屏；
  • /#/about 这类哈希路由？百度早就不认了，它需要 /about 这样的真实路径（History API 路由）；
  • 全站 <div class="title">关于我们</div>？爬虫找不到主标题。每个内容页必须有且仅有一个 <h1>，正文段落用 <p>，列表用 <ul> 或 <ol>，关键信息别全塞在 data-* 属性里。

一句话：你写给用户的 HTML，也得是爬虫能一眼看明白的 HTML。

如何精准判断百度看到了什么？

别猜，直接看。

打开百度搜索资源平台 → 找到「抓取诊断」→ 输入你最关心的那个页面 URL（比如 /article/how-to-choose-coffee-beans）→ 点击抓取。
等几秒，点开「抓取到的HTML」，Ctrl+F 搜文章标题或正文关键词。
如果搜不到，说明爬虫根本没见到内容。

顺手再跑一次「站点体检」，它会明确告诉你：“某页面 JS 执行超时”“某链接返回 404”“<title> 标签缺失”——全是能立刻下手修的问题。

今天下班前就能做的一个具体操作

现在，打开你电脑里的 Chrome 浏览器，访问 百度搜索资源平台（你肯定有账号，上次提交 sitemap 就用过），登录后点击左侧菜单「抓取诊断」。
输入你 SPA 网站里最核心的一个内容页 URL（比如一篇技术博客、一个爆款商品页），点击「抓取」。
等结果出来，左边看「抓取到的HTML」，右边打开同一页面，右键「查看网页源代码」，两边并排对比：
→ 标题对得上吗？
→ 正文第一段有没有？
→ 商品价格/参数这些关键信息在不在？

如果左边是空的、或者只有骨架，问题就锁定了——接下来三天，你就盯住这个页面：查数据加载时机、看路由是否用了 History API、检查 <h1> 和 <title> 是否动态生成却没同步到服务端……从这一处真实缺口开始改，比读十篇教程都管用。