前言
目前 Vue单页面应用在前端界混的风生水起,它的开发思想使得我们能真正做到前后端分离、解耦。单页面应用使用浏览器动态解析JS,呈现出最终的页面,用户体验比较好,网站性能也提高不少。但网络爬虫并不会动态解析Js,所以访问所有未处理的单页面应用URL得到的只会是项目入口(index.html)文件中的代码,不能得到具体的内容,对Seo的优化极其的不友好。为了优化项目Seo,目前主要有两个方案:服务端渲染(Server Side Rendering)、预渲染(Prerending)。
本文主要介绍预渲染方案中运用prerender服务方式解决Vue单页面Seo问题
预渲染的两种方式
-
这个插件是一个webpack插件,此方式会在项目构建(npm run build)时将项目按路由打包成相对应的html静态文件。因此,仅有如下项目类型适用。
- 路由是静态的,且非海量路由
- 页面内容不需要使用ajax获取并展示内容
-
prerender:此服务在页面渲染的时,将会直接取代网站后端对爬虫请求进行响应,将提前渲染后静态页面直接返回给爬虫,因为此服务作用在页面渲染时,所以不再受
方式1
那些路由限制。
prerender 的使用
1、安装
npm install prerender
2、启动服务 server.js
const prerender = require('prerender');
const server = prerender();
server.start();
3、测试
http://localhost:3000/render?url=https://www.example.com/
此时,你已经启动了一个prerender服务,并返回了https://www.example.com/
的内容,此时页面上所看到的https://www.example.com/
内容是通过prerender服务提前渲染成静态页面后返回的。服务默认运行在3000端口,可以参考prerender文档进行默认修改。
prerender中间件的使用
我们所理想的渲染模式是:当普通用户访问时不需要通过prerender服务提前渲染,而通过js动态渲染;当爬虫访问页面时,通过prerender服务提前将页面渲染为静态页面供爬虫爬取。
那么如何能实现上面的需求呢?
不过还好,对于这样的需求prerender提供了对应的中间件:prerender-node (Express)、prerender_rails(Rails) 、.htaccess(Apache)、nginx.conf等,可参考prerender文档中Middleware模块文档进行了解,笔者使用的是prerender-node (Express)node中间件。具体的配置修改如下:
1、安装
在Express下安装
npm install prerender-node --save
2、修改app.js配置
var prerender = require('prerender-node')
app.use(
prerender
//爬虫访问转发到prerender服务进行预渲染
.set("prerenderServiceUrl", "http://localhost:3000/")
//普通用户访问直接访问项目地址不进行预渲染
.set("host", "wwww.xxxx.com")
);
3、重启Express服务
注意事项:
- 第2步修改配置代码要置于Express路由分发之前;即下列代码之前
app.use("/", indexRouter); app.use("/users", usersRouter);
- 修改app.js配置时候项目地址www.xxxx.com不要带http://
测试
安装好prerender服务以及prerender中间件后prerender预渲染算是大功告成了,下面介绍测试方法。
测试原理: 添加谷歌浏览器Emulated devices模拟爬虫访问,具体实现如下:
1.打开谷歌浏览器开发者工具。
2.点击(进入手机编辑模式)按钮,如图
3.点击选择模拟设备下拉选择,选择最后一个Edit...,将进入如下图。
4.点击Add custom device 按钮5其中User agent string 填写:
Mozilla/5.0 (compatible; Baiduspider/2.0;+http://www.baidu.com/search/spider.html)
其他如图,
6.点击保存。
7.点击选择模拟设备下拉选择,选择新添加的模拟百度爬虫
经过以上7步,你浏览器能模拟爬虫访问,此时打开浏览器控制台network筛选doc类型,刷新页面,能看到页面返回是经过编译后的静态文件。
选择其他非爬虫模式Emulated devices或不打开Emulated device调试模式,刷新页面,能看到页面返回是通过js动态解析的。
总结
配置prerender总体思路:通过prerender中间件判断是否是爬虫访问页面,如果是爬虫访问则转发给prerender服务进行提前编译,否则直接返回js动态渲染页面。
其他Vue单页面seo优化可以参考:Vue单页项目SEO完全指南