【北京seo网】【技术干货】SEO解决方案

优化SEO将改善网站在搜索引擎结果中的排名，吸引更多的用户访问网站，提高网站的访问量，从而提升品牌效应。

搜索引擎并不会执行JavaScript文件，因此只有将数据在html文件中静态化才会被搜索引擎检索到。

主流SEO解决方案

1. SSR服务端渲染

如VUE-SSR，页面在服务端渲染完成后返回给客户端。

- 优点：SEO效果好，首屏渲染快。

- 缺点：开发成本高，SPA应用无法快速迁移为SSR。页面由服务端渲染，服务器开销大。

2. Nuxt

结合了SPA和SSR，Nuxt在服务端运行一个Nuxt服务，客户端发起请求后，会先在服务端运行页面的Nuxt的asyncData和fetch钩子，通常在这两个钩子里初始化页面数据请求，Nuxt会在钩子执行完毕并渲染完数据后返回页面。相比SSR，Nuxt的开发方式和SPA大部分都相同，并且开发会更加方便，例如路由会直接按照层级结构自动生成，不需要自己写路由，开发成本相比SSR低了很多，迁移成本也相对较低。

- 优点：开发成本和SPA相似，SPA应用迁移成本较低，SEO效果好，可以选择打包成SPA还是SSR，拥有SSR的大部分优点。

- 缺点：服务器开销大，依然是在服务端进行页面渲染，并且因为Nuxt服务可能与后端服务不在一起，有可能因为请求网络延迟导致首屏速度变慢。目前的坑也比较多，踩坑也是个不轻松的过程。

3. 静态 html

最原始的方法，对于静态数据来说，SEO不是问题。

- 优点：页面小，不会引入 vue/react/angular 等框架，大幅减少js的体积，静态数据SEO效果好，首屏渲染快。

- 缺点：开发成本高，维护成本高，并且接口数据是无法静态化的，只对无接口数据需求的纯静态站点有优势。

4. 预渲染

可直接在SPA应用基础上增加预渲染插件即可实现预渲染,例如：prerender-spa-plugin。预渲染是在本地构建时，将指定路由的页面全部渲染出一份html，在客户端请求页面时先请求这份html。

- 优点：SPA应用成本最低的优化SEO方案，只需要添加插件和配置，首屏渲染速度快，SEO效果好。

- 缺点：因为构建渲染页面时，本地环境为localhost，所有与window.location相关代码都可能会出问题，这会导致很多链接错误问题，seo案例分析，虽然可以注入变量来解决，但是多环境构建依然可能遇到问题，并且要做很多额外的处理。prerender-spa-plugin是基于puppeteer的，支持接口拉取，但是渲染发生在构建阶段，并且是本地环境，会有很多其他问题，例如每次接口数据修改还需要重新构建，并且渲染页面时一旦有接口报错导致页面渲染失败，也将会是个麻烦的事。我个人认为预渲染还是更适合纯静态类spa站点的静态化。

离线预渲染

离线预渲染与预渲染类似，但是解决了预渲染的一些问题，离线预渲染的使用场景仍具有很大的局限性，但是在特定的场景下，却是非常合适的方案。

LStack的官网就使用了离线预渲染作为SEO解决方案，我们先看一下对于官网的需求：

1. SEO优化要好

2. 数据要使用接口数据

3. 不能使用服务端渲染（页面很少变化，使用服务端渲染浪费服务器资源）

SEO的要求，首先就可以排除SPA了，数据要使用接口数据，那原生html这种无法静态化接口数据的方案也无法满足这个要求，不能使用服务端渲染，又再次排除了服务端渲染和Nuxt。而预渲染又存在诸多问题，事实上LStack官网重构前正是使用的预渲染方案，只对静态数据做了静态化，但是仍对代码有侵入性，并且遇到了一些本地环境渲染页面而导致的问题，处理这些问题，需要在写代码时考虑这种情况的处理。在这种情况下，离线预渲染就是最合适的解决方案了。

优点

- 改造简单，对源代码0侵入，不需要任何改造，spa不需要任何修改就可以仅搭建一个爬虫服务来实现SEO优化。

- 可以对接口数据静态化。

- 不占用服务器资源，渲染一次，便可以重复使用，直到下次数据变化重新渲染。

- 加速首屏渲染，首屏效果和服务端渲染一致。

- 可以部署到cdn/oss。

缺点

- 仅适用于数据改变频率低，时效性低的站点，例如官网，文案也许一个月变更一次。

- 开发成本虽然低，但是搭建维护坑比较多，需要考虑的点较多。

- 和预渲染一样，因为js拉取完毕后会以spa模式渲染页面，因此js加载完成后页面会闪动一次，替换掉静态html内的内容。

原理

离线预渲染使用爬虫爬取页面，生成静态html，从而实现动态数据的静态化。