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

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

北京seo 2022-07-29 08:39 seo技术 154次

优化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,从而实现动态数据的静态化。

本文标题:【北京seo网】【技术干货】SEO解决方案

本文地址:http://www.gzxdxh.com/seojs/69728.html

Tags:

网站分类
标签列表