你的网站内容，百度真的都看到了吗？

你用 Vue 或 React 做了个挺漂亮的网站，首页轮播图丝滑、课程列表点开就加载——结果在百度搜自己品牌名，首页都排不进前五页。
不是百度不想收，是它根本没“看见”你页面里那些 JS 渲染出来的正文、标题、产品描述。

为什么百度爬虫看不懂你的 JavaScript？

百度爬虫不像你打开 Chrome 那样能等 JS 跑完再看内容。它拿到 HTML 后，如果主体内容藏在 fetch 之后、或者靠 useEffect 拼出来的，那它大概率只看到一个空 <div id="app"></div>，然后默默关掉页面。

它不是故意跳过你，是真没时间耗着。几十亿页面等着抓，谁会为一个要等 8 秒才吐出文字的页面多留几秒？

举个真事：朋友做在线教育平台，首页课程全靠 AJAX 拉取。上线两个月，百度只收录了导航栏那几行字，“热门课程”“名师推荐”这些核心模块压根没进库。后来改成服务端渲染，三周内收录量明显提升，首页关键词也慢慢露头了。

3 个方法，让百度看见你的 JS 内容

方法一：服务端渲染（SSR）

把页面“画好再给爬虫”，而不是扔个 JS 文件让它现场组装。用户访问时走客户端逻辑，爬虫来的时候，服务器直接返回带完整内容的 HTML。

Vue 项目可以试 Nuxt.js，React 项目直接上 Next.js。不需要重写整个站，先从首页、列表页、详情页这几个百度最常抓的入口开始改。

我帮一个电商站做了 SSR 改造，原来百度只收录不到 100 个页面，改完三周，收录量大幅增长，首页关键词排名也稳进了前两页。

方法二：动态渲染（Dynamic Rendering）

不适合立刻上 SSR？那就“见人下菜碟”：检测 UA，如果是 Baiduspider 或 Baiduspider-mobile，就用无头浏览器（比如 Puppeteer）提前跑一遍 JS，把最终 HTML 返回；普通用户还是照常加载 JS。

不用换框架，也不用动业务逻辑，加一层判断 + 一个渲染服务就行。之前帮一个资讯站搭了这套，收录量从几十个涨到上千个，效果立竿见影。

方法三：预渲染（Prerendering）

内容基本不更新的页面，比如公司介绍、帮助文档、已发布的博客文章，直接在构建时生成静态 HTML 文件。npm run build 的时候，工具自动把 /about /blog/2024-travel-guide 这些路由都“快照”成带内容的 HTML。

用 Prerender SPA Plugin 就能接进 webpack 或 Vite 流程。去年给一个个人博客加了预渲染，原来百度只收了 5 个页面，做完一周内收录翻了 10 倍。

如何验证百度是否成功抓取了你的 JS 内容？

别光改不动手验。改完不查，等于没改。

最靠谱的方式：登录【百度搜索资源平台】→ 点“抓取诊断” → 输入你要测的 URL → 选“移动端”或“PC端” → 发起抓取。
几秒后看返回的 HTML：如果里面有你的文章标题、正文段落、产品参数，说明成了；如果还是一堆 <script src="..."> 和空容器，就得回头调。

我习惯每两周抽 10 个页面轮着测。之前有个客户上了动态渲染，抽查发现分类页因为图片懒加载卡住，JS 没执行完就被截断了——调高超时阈值后立马解决。

另一个简单办法：搜你的页面标题，点百度结果里的“快照”。如果快照里显示的是真实文字，不是“请启用 JavaScript”，基本就稳了。不确定的话，用 curl 或 Postman 模拟 Baiduspider 的 UA 访问你的域名，看返回的源码是不是带内容。

一个真实案例：从 0 收录到每天稳定带来流量

去年接手一个旅游攻略站，React 单页应用，半年过去百度收录个位数。内容其实很扎实：每个目的地都有行程安排、交通贴士、实拍地图，但全是 JS 渲染的，百度爬虫来了，只看到骨架。

团队技术底子够，我们用 Next.js 重构了攻略详情页和城市列表页，前后花了两周。第一周收录就开始松动，一个月后不仅总量大幅增长，原来埋在 JS 里的长尾词（比如“大阪自由行七日攻略”）也开始出现在搜索结果里，自然流量一天天稳住了。

客户后来感慨：“早知道 SSR 对百度这么管用，当初真不该图快全放前端。”

踩过哪些坑？我帮你总结一下

坑一：超时时间太短
百度爬虫默认耐心只有 5–10 秒。如果你的页面要串行拉 3 个 API、再等图片解码，很容易被放弃。建议 SSR 或动态渲染时，把关键字段（比如标题、摘要）直接注入初始 HTML，别让爬虫干等。

坑二：只顾 PC，忘了移动
现在百度主抓移动端，UA 是 Baiduspider-mobile。很多人配置了动态渲染，却只匹配 Baiduspider，结果移动端爬虫进来还是空壳。检查 nginx 或 Node 中间件，确保两个 UA 都走渲染逻辑。

坑三：甩给第三方渲染服务
图省事用了某家 SaaS 渲染平台，结果某天服务挂了，或者返回头被百度判定异常，整站收录跌了一半。建议自己用 Puppeteer 搭个轻量服务，可控、可调、不出岔子。

坑四：拿预渲染硬套高频更新页
新闻站天天发稿、电商站价格分钟一变，你还用预渲染？生成完页面，数据就过期了。这类页面老老实实用 SSR 或动态渲染，别贪那一时省事。

今天就能执行的 3 个操作步骤

第一步：现在就打开百度搜索资源平台
登录后点「抓取诊断」，输入你最想被搜到的那个页面 URL（比如首页或爆款攻略页），发起一次抓取。盯紧返回的 HTML，找你的核心文字有没有出现。

第二步：根据团队现状选一条路

  • 能排期、有后端配合 → 今天就在 Next.js/Nuxt.js 文档里搜 “getServerSideProps” 或 “asyncData”，抄个最简 SSR 示例跑起来；
  • 暂时没法动架构 → 用 Puppeteer 写个简易渲染中间件，GitHub 上搜 “puppeteer express middleware” 有现成模板；
  • 博客/文档类站点 → 在 vite.config.ts 或 vue.config.js 里加 Prerender SPA Plugin，重新 build 一次。

第三步：改完立刻回平台再点一次「抓取诊断」
别等明天。确认 HTML 里有内容了，再去「索引量」和「抓取异常」里看趋势。接下来一周，每天花 2 分钟扫一眼，有异常马上调。

JS 渲染不是黑盒，百度也没那么难搞。关键是别让它空着手来，也别指望它等你。现在就去资源平台点一下，看看它到底看见了啥。