React百度SEO实战：分步搞定收录难题

用 React 做出来的网站在谷歌上收录正常，一到百度就"查无此站"？这几乎是每个前端做单页应用（SPA）时都会踩的坑。问题往往不在 React 本身，而在于百度蜘蛛的 JavaScript 执行能力有限，抓到的常常是一个空壳页面。下面按实战顺序，把从渲染方案到主动推送的关键环节拆开讲清楚。

先弄明白：React 为什么在百度容易"裸奔"

默认的 React 是客户端渲染（CSR），浏览器拿到的首屏 HTML 里几乎只有一个 <div id="root"></div>，真正的标题、正文和链接都要等 JS 下载并执行后才生成。

谷歌蜘蛛能较好地执行 JS，所以看得到内容；而百度蜘蛛对 JS 的渲染支持一直较弱，抓取时经常只看到空容器，自然无法提取标题和正文，收录与排名都会受影响。想清楚这一点，后面所有动作其实都围绕同一个目标：让蜘蛛在不执行 JS 的情况下，也能拿到完整内容。

第一步：选对渲染方案，这是地基

渲染方案决定了 SEO 的上限，优先级最高，务必先定下来再动手写业务。

• 服务端渲染（SSR）：推荐用 Next.js，首屏 HTML 由服务器直接生成，蜘蛛一进来就能读到完整内容，最适合内容更新频繁的资讯、电商类站点。
• 静态生成（SSG）：博客、文档、产品落地页这类内容相对固定的场景，构建时就把静态 HTML 生成好，打开快、稳定，服务器压力也更小。
• 预渲染（Prerender）：如果是已经上线、不方便重构的老 SPA，可以用 Puppeteer 或预渲染方案，识别到蜘蛛访问时返回渲染好的页面快照，改造成本最低。

第二步：把 TDK 和页面结构做扎实

有了可被抓取的 HTML，还要让蜘蛛读得懂、分得清主次。

• 每个页面都要有独立、准确的标题（title）和描述（description），别整站共用同一套。
• 正文用语义化标签组织：一个页面只放一个 <h1>，层级用 <h2>、<h3> 往下细分，图片补全 alt 说明。
• 路由尽量用简洁的真实路径，避免 # 号锚点式路由，让 URL 干净可读、层级清晰。

如果用 Next.js，可以直接在页面里通过内置的 metadata 或 Head 组件动态写入每一页的 TDK，配合路由自动生成，维护起来并不麻烦。

第三步：主动推送，别只干等蜘蛛来

百度不会主动频繁地爬一个新站，与其被动等待，不如主动把链接送上门。

• 先在百度搜索资源平台完成站点验证，这是后续一切操作的前提。
• 生成并提交 sitemap.xml，把站内重要页面一次性告诉百度。
• 用平台提供的主动推送接口，在内容发布的第一时间把新链接推过去，抢占收录时效。
• 配好 robots.txt，明确哪些目录允许抓取、哪些需要屏蔽，别把后台和无意义页面也放出去。

第四步：性能、移动端与持续观察

收录只是起点，能不能有排名，还要看体验和长期维护。

• 压缩首屏体积，做好代码分割和懒加载，首屏打开越快，蜘蛛和用户都更买账。
• 确保移动端适配到位，百度流量以移动端为主，页面在手机上不能错位或加载缓慢。
• 定期在资源平台查看索引量，并用"抓取诊断"工具模拟蜘蛛访问，直接确认它到底看到了什么。

把这几步按顺序落地，React 站点在百度的收录问题基本就能解决大半。SEO 没有一劳永逸，渲染方案定好之后，剩下的就是围绕内容质量和抓取反馈不断微调。