1.vue开发存在SEO问题
前端开发采用vue开发后是单页面
单页面里面,前后端分离,渲染过程是js写的,在js调用接口返回数据之前,页面已经被打开了
实际上就是空白页面,这个时候右键点击查看源代码,实际上是都看不到内容的
对SEO不太有好
【最新的谷歌蜘蛛好像可以爬取到这种页面的数据。但是百度还是不行】
2.如何解决SEO问题
SEO主要是三点:
- 多页面
- 可配置title,关键词和描述(这里的title,关键词,描述还可能还动态的)
- 页面要有内容
解决上述单页面SEO存在的问题有几种解决思路:
2.1前后端不分离
前后端不分离 不存在接口调用,一调用就是返回的页面,浏览器直接渲染
一出来就是整个页面一起出来
压力再后端
优点是安全性,不对外暴露接口
2.2前后端分离
这种时候压力都是在前端
2.2.1.预渲染
压力在客户端
现在比较流行的是prerender技术
打包的时候就将数据获取到 。
在html页面加载之前数据过来渲染后才有html的dom结构,这样的话可能会存在页面空白的情况。
缺点就是:
每次都要配置路由,页面多的话,配置麻烦,无法实现动态路由
页面变化都要重新打包
如果title关键词描述等来源于接口,配置到meta-info也无法实现(有其他变通方法,需引入其他技术)
优点:
能解决多页面问题,不像vue只能打包出一个index.html文件
2.2.2.服务端渲染
压力也是在客户端
这里说的“服务端渲染”实际是前端的服务端nodejs
原理相当于是起了2个服务
一个是后端的业务服务,一个是nodejs的服务
这个相当于是重构之前的代码
适用场景是所有页面都要做SEO
采用unxtjs进行改造
这个改造还是挺大的