Vue项目做百度SEO，踩过的坑和实用方案

为什么Vue写的站，百度总收录得慢半拍

前段时间帮朋友看一个用Vue做的企业官网，页面挺漂亮，产品介绍、案例、博客一应俱全。可他愁得不行：网站上线快三个月，搜品牌词能出来首页，但那些辛辛苦苦写的文章，一篇都没被收录。这事其实特别典型，几乎每个用Vue、React做单页应用的团队都会撞上一次。

根子在哪？传统HTML页面，服务器直接把带内容的完整代码吐给浏览器，蜘蛛一抓就是现成的文字。而Vue默认是"客户端渲染"，服务器先给一个几乎空的骨架，剩下的内容全靠浏览器执行JavaScript再填进去。人看着没问题，可搜索引擎的蜘蛛不一定愿意等你的脚本跑完。

先搞清楚百度蜘蛛到底看到了什么

动手优化之前，我建议先做个特别简单的动作：把页面地址拿去检验一下。方法有两个，一是在百度搜索资源平台里用抓取诊断工具，看返回内容里到底有没有正文；二是更土但更直观的办法——右键"查看网页源代码"，注意不是"检查元素"。如果源代码里只有一个空div和一堆script标签，正文一个字都找不到，那基本就能确定问题所在了。

这里有个常被误解的点。谷歌这些年对JavaScript的执行能力确实进步很大，很多人就以为百度也一样。实际体验下来，百度对纯客户端渲染内容的抓取和收录，仍然要保守、迟缓不少。所以别拿谷歌的经验直接套百度，国内做站还是得踏实一点。

三种主流方案，按团队情况选

把内容"提前变成HTML"是核心思路，具体落地有三条路，各有各的适用场景。

服务端渲染（SSR）

让Node服务在返回页面时就把内容渲染成完整HTML，蜘蛛一抓就有货。Vue生态里对应的就是Nuxt。它对SEO最友好，动态内容多、更新频繁的站（比如资讯、电商）特别合适。代价是要维护一个Node服务，部署和调优的门槛会高一些。

预渲染（Prerender）

如果站点页面数量不多、内容也不怎么变，比如公司官网、落地页，那用预渲染就够了。构建时借助插件把每个路由跑一遍，生成对应的静态HTML文件。它不需要额外服务器，改动小、见效快，是性价比很高的折中方案。

静态站点生成（SSG）

博客、文档这类内容型站点，可以考虑VitePress、Nuxt静态导出这类工具，直接把整站生成一堆HTML。加载快、天然对搜索引擎友好，托管成本也低。

比换渲染方式更容易被忽略的细节

渲染方式只是地基，真正决定收录质量的，往往是这些琐碎但关键的地方：

• 每个页面都要有独立、准确的title和description，别整站共用一套，这是最基础也最容易偷懒的地方；
• 认真写sitemap并提交到搜索资源平台，同时用robots文件把蜘蛛该走的路指清楚；
• 路由尽量用简洁的路径形式，少用带井号的哈希路由，那种链接对收录不太友好；
• 做好内链，新文章别成孤岛，让它能从首页或栏目页点几下就到达；
• 页面打开速度要盯紧，图片压缩、懒加载、首屏体积控制，蜘蛛和用户都没耐心等。

回到那个朋友的站

后来他的方案其实不复杂：官网页面不多，直接上了预渲染，把博客文章挨个生成静态页，再把每篇的标题、描述补全，规规矩矩做了sitemap提交上去。大概过了两三周，文章开始陆续出现在收录里，又过了一阵，一些长尾词也能带来零星流量了。

所以百度SEO和Vue并不冲突。Vue负责把体验做好，SEO负责让内容被看见，两件事各司其职。关键是别默认"框架会帮我搞定一切"，先确认蜘蛛能读到你的内容，剩下的就是耐心打磨细节、等时间发酵。技术选型没有标准答案，适合自己团队的，才是最好的。