Vue百度SEO实战：破解SPA收录难题的5个关键

把一个 Vue 项目做出来不难，难的是让它在百度里搜得到。不少团队上线后看到谷歌能收录就以为万事大吉，结果几个月过去，百度里除了首页几乎搜不到任何内页。问题往往不在内容质量，而在于 Vue 单页应用的渲染方式和百度爬虫之间存在天然的错位。

为什么 Vue 项目在百度天生"吃亏"

默认的 Vue 项目是客户端渲染（CSR）。浏览器拿到的第一份 HTML 几乎是空的，只有一个 <div id="app"></div> 和一堆 JS 文件引用，真正的内容要等 JS 下载、执行完才被塞进页面。

谷歌爬虫这些年对 JS 执行已经比较友好，但百度蜘蛛（Baiduspider）在 JS 渲染上一直偏保守。当它抓到一份空壳 HTML，看不到标题、正文和内链，自然无从判断这个页面讲了什么，更谈不上给排名。

• 首屏内容为空，爬虫抓取到的正文严重缺失；
• 路由用 hash 模式（带 # 号）时，百度往往把 # 后面不同的地址当成同一个页面；
• title、description 这些关键标签是 JS 动态改的，爬虫抓取的瞬间可能还没生效。

三种渲染方案，按项目阶段来选

解决思路只有一个核心：在爬虫拿到 HTML 的那一刻，内容就已经在里面。落地方式主要有三种，别盲目上最重的那一个。

服务端渲染（SSR）

用 Nuxt 或 Vue 官方的 SSR 能力，让服务器先把页面渲染成完整 HTML 再返回。适合内容量大、更新频繁、对收录要求高的站点，比如资讯、电商、社区。代价是需要 Node 服务常驻，运维和缓存策略都得跟上，否则高并发下服务器压力会明显上升。

预渲染（Prerender）

如果页面数量有限、内容变动不频繁，比如企业官网、活动落地页，用 prerender-spa-plugin 这类工具在打包时就把每个路由生成好静态 HTML。几乎没有额外运维成本，收录效果却和 SSR 接近，是中小项目性价比最高的选择。

静态站点生成（SSG）

博客、文档这类内容天然适合 SSG。VitePress、Nuxt 的静态生成会把 Markdown 或数据源提前编译成一整套静态页面，配合 CDN 加载飞快，百度对这种"打开就有内容"的静态页也最友好。

别忽略百度自己的规则

渲染问题解决了，只是让百度"看得懂"，接下来要主动让它"来得勤"。这一步，做惯了谷歌 SEO 的人常常会漏掉。

• 先在百度搜索资源平台完成站点验证，这是后续所有操作的前提；
• 用链接提交里的主动推送接口，文章一发布就把 URL 推给百度，比干等它自己爬要快得多；
• 老老实实提交并定期更新 sitemap，把站内所有可收录的 URL 列清楚；
• 路由务必改成 history 模式，去掉 URL 里的 #，让每个内页都是独立、干净的地址；
• 用抓取诊断工具看看百度实际抓到的 HTML 长什么样，这是验证渲染方案是否生效最直接的办法。

一个真实项目的优化路径

之前经手过一个用 Vue 做的行业工具站，最初是纯客户端渲染，上线三个月百度只收录了首页一条，用 site 指令一查，内页全是空白。我们没有直接推倒重构成 SSR，而是分三步走。

第一步，先把路由从 hash 模式切到 history 模式，服务端配好对应的 fallback 规则，让每个页面地址独立且能直接访问。第二步，针对几十个核心工具页用预渲染打包出静态 HTML，保证首屏就带着完整标题和正文。第三步，接入主动推送，每次更新内容都自动把 URL 推给百度，同时补齐 sitemap。

调整之后大约两周，抓取诊断里终于能看到完整正文；一个月左右，索引量从个位数涨到几百条，几个核心关键词也开始出现在搜索结果里。整个过程没有换框架，成本主要花在渲染方式和提交流程上。这也说明，大多数 Vue 站的收录问题，靠改造而不是重写就能解决。

容易翻车的细节清单

• 每个页面的 title、description 要用 @vueuse/head、unhead 这类库单独设置，别所有页面共用一套；
• 预渲染或 SSR 之后，务必确认动态数据也被写进了静态 HTML，而不是留着接口占位符；
• 控制首屏体积，JS 拆包、图片懒加载都要做，加载太慢同样会拖累抓取和排名；
• 内链结构要清晰，让爬虫能顺着链接把内页都爬到，别让某些页面变成没人链接的"孤岛"；
• 上线后定期用 site 指令和资源平台数据观察收录变化，SEO 是持续调整的活，不是上线一次就完事。

说到底，Vue 和百度 SEO 并不矛盾。只要在渲染环节让内容"提前到位"，再顺着百度的规则主动提交，单页应用照样能获得稳定的自然流量。方案不必一步到位，从最轻的预渲染开始试，往往就能看到明显变化。