最近希望在现有SPA网站的基础上,对网站进行SEO优化,所以列出了几种方案。
一、Rendertron
Rendertron是一款headless Chrome渲染解决方案,旨在即时渲染和序列化网页,它作为独立的HTTP服务器运行,使用Headless Chrome渲染请求的页面, 在SPA网站完成加载时自动检测并将响应序列化回原始请求。
具体流程:
- 增加代理服务器,用于检测是否需要预渲染;
- 代理服务器返回Rendertron服务器渲染的内容。
Demo:
环境及工具要求:Node、npm
- 下载rendertron
打开cmd命令提示符,输入
npm install rendertron
下载时间较长,需要耐心等待。
- 运行rendertron
rendertron
rendertron服务默认监听的端口是3000
浏览器输入
http://localhost:3000/render/【网站地址】
http://localhost:3000/render/https://www.hongwanyg.com
即可浏览rendertron渲染SPA网站后返回的内容。
更加详细的Demo点这里:https://www.jianshu.com/p/38e6d3bf596d
影响范围:
1、前端
前端路由模式需要启用路由的 history 模式。
需要更改门户内大部分的打开新页面的跳转地址。
2、服务端
服务端增加一个覆盖所有情况的候选资源:如果 URL 匹配不到任何静态资源,则应该返回同一个 index.html
。
优缺点:
优点:影响范围最小,时间成本最低。
缺点:
- rendertron渲染速度较慢(20s+,可以通过配置缓存,降低渲染时间,但首次渲染还是慢)。
- 仅仅供给SEO使用,若想要正常使用该方式渲染出的网站,还需做进一步处理。
二、SSR for VUE
具体操作:
使用Nuxt.js或者vue-server-renderer等服务端渲染应用框架。
影响范围:
前端代码需要改动的地方非常多,大部分组件都要改。
优缺点:
优点:效果最好,基本所有页面都能满足SEO。
缺点:前端改动的成本大,时间成本高。
三、 koa2 + (ejs | pug) 或者Java + thymeleaf 产出需要SEO的页面
具体操作:
- 根据需要SEO的页面,编写对应的html文件,渲染从服务端获取的数据。
- 使用Node作为代理服务器和渲染服务器,检测到需要预渲染,则渲染对应的页面返回(过程与方案一类似)。
影响范围
- 需要新增特定的页面,供给百度蜘蛛之类的程序收集页面数据。
- 若使用koa2 + (ejs | pug) 则需要新增node程序。
优缺点
优点:不影响前端原有代码,是一种扩展式的方法。
缺点:
页面仅供SEO使用;
需要时间成本开发新增页面,或需添加代理服务器;
后期需要新增SEO的页面也需要跟着新增对应的页面文件。