基于单页面应用的风靡，如何让如百度等传统的搜索引擎都能“看见”动态渲染的内容就成为了开发者们头疼的一个问题。借助将其它的SPA都以预渲染的形式提前生成静态的HTML，既能保留了SPA的用户体验的优势，又能一举解决了SPA的SEO的核心的痛点。依托于对从原理的百度蜘蛛抓取规则的深入剖析，再将其落地到实战的5个必备的工具的辅助下,我们就可以手把手地将百度的收录率从0到1,为你的网站的百度的收录率做出最大的帮助.。

一、为什么SPA需要预渲染？

而随之带来的就是一系列的用户体验问题：每当我们在Vue或React中开发的应用中，第一次访问某个页面时，都会伴随着一系列的等待，浏览器都要先执行一大片的JavaScript代码才能将页面的内容渲染的完整。但令人遗憾的是，即便将精心编写的页面的HTML内容通过JS的方式再加一层处理，也终究无法完全绕过百度的蜘蛛对初始HTML的抓取，只能等到蜘蛛对初始的HTML的爬取的速度快了起来了，才能够通过JS的方式动态的将内容填充出来给蜘蛛。由此可见，对动态生成的关键内容的索引的忽视就使得这一部分的页面在搜索引擎的结果中都成了一张“空白的名片”。通过对某电商站点的实践证明，若不对SPA的产品页做相应的优化，其百度的收录率都还不足15%，但经过我们对其预渲染后的优化后，其百度的收录率都能直接提升至78%。

二、预渲染的三种实现方案对比

采用像Next.js这样的服务端渲染的框架就可以在服务器端实时生成对应的HTML手段，从而更好的适应了内容的频繁的更新的场景，但也会对服务器造成较大的压力。基于对该新闻站点的SSR的优化，初步的数据统计表明了明显的性能的提升，相较于之前的3.2秒的首屏加载时间，现已降至1.4秒，极大的提高了用户的浏览体验。

通过如Nuxt.js这样的前端构建工具，可将在构建时就将页面的HTML等静态资源都预先生成出来,对内容相对稳定的企业官网等就十分合适.。借助对百度的B2B优化实践中将SSG的巧妙运用，百度的收录页面数也从原来的200一下子就飚升至了5000+。

依托于对关键的路径如首页的SSR的同时对非关键的页面的SSG的巧妙的混合利用，既能保证了对用户的首屏的快速的加载，又能充分的利用了服务器的静态化的能力提高了网站的整体的访问速度。凭借对该SaaS平台的这一关键的优化方案的落地，相较前期的数据，我们惊喜的发现其带来的SEO的自然流量的增长竟达到了217%之巨的爆发！。

三、五分钟快速配置实战

以Vue项目为例，通过vue-prerender-spa插件实现：

安装依赖：npm install prerender-spa-plugin -D

在vue.config.js中添加：

const PrerenderSPAPlugin = require('prerender-spa-plugin')

module.exports = {

plugins: [

new PrerenderSPAPlugin({

staticDir: path.join(__dirname, 'dist'),

routes: ['/', '/about', '/product'],

renderer: new PrerenderSPAPlugin.PuppeteerRenderer({

inject: { foo: 'bar' },

headless: true

})

})

]

}

测试效果：运行npm run build后，检查dist文件夹是否生成about/index.html等静态文件。

四、百度蜘蛛识别关键技巧

尽量将#哈希的路由都改成正常的路由，才能让我们的URL能被正常的被爬虫抓取到。随后将该旅游站点的#/tours的url直接改为/tours后，接连的几个月里该站的访问量都能保持在每天的3万+的访问量中前三名，甚至曾经达到一天5万+的访问量的辉煌，初期的流量就为我们日后的业务打下了良好的基础。

‌meta强化‌：在预渲染的HTML中动态插入<meta name="keywords">，某工具站通过此方法使核心词排名上升8位。

凭借对死链的及时清理，如对404的页面的及时的去除，对网站的收录率都有着较为明显的提升达到了40%的百分比之分。同时也可将死链的列表通过百度的搜索资源平台的提交的方式将其对外的做了一个明了的表述。

五、必备工具清单

通过SEOmatic的免费版我们就可以自动化的生成网站的meta标签了

通过将爬虫的抓取检查的功能扩展至了预渲染的效果的判断Screaming Frog也算是对SEO的工具的进一步的完善了

通过对比百度统计的PV数据不难发现其真实的用户访问路径与蜘蛛的访问路径都有着明显的差异

依托于对WebPageTest的深入的检测，我们不难发现其对不同地区的网页加载速度的调研与对比的极大价值.

采用Ahrefs的实时关键词排名监控手段，我们就可以第一时间的发现自己的网站或竞争对手的网站的关键词的排名变化从而及时的对网站的内容、外链等方面的优化

但如果你就此止步，就会把一路的努力都白费了：常见的几个误区都要注意一下才是

由某论坛站点的过度的预渲染10万+的页面的直接体现就是其构建的时间从2分钟一下子就暴增至2个小时，最后不得不采用按需渲染的方案才算暂时的缓解了这个问题。

但由电商站点未对类似/product?id=123的动态参数的URL进行有效的处理，使得同一类的海量重复的页面都被降权了。

由于未对预渲染的内容设置合适的Cache-Control导致了对该内容的蜘蛛频繁的抓取 ultimately 给服务器带来了致命的崩溃的结果。

尽管预渲染并不能被视为一枚“银弹”，但却已经成为目前SPASEO的最优的解决方案之一。通过对20个核心的页面的小规模的试验性地推广一番观察一下百度的收录周期和对我们的网站的排名的变化趋势再逐步地对其余的页面的推广也将事半功倍.。只有当你的内容能真正地解决用户的真实问题时，它的价值才会被广大网民所认可，自然就能引来不少的流量敲门而来。