Vue Prerender.io 预渲染seo优化
前言
目前 Vue单页面应用在前端界混的风生水起,它的开发思想使得我们能真正做到前后端分离、解耦。单页面应用使用浏览器动态解析JS,呈现出最终的页面,用户体验比较好,网站性能也提高不少。但网络爬虫并不会动态解析Js,所以访问所有未处理的单页面应用URL得到的只会是项目入口(index.html)文件中的代码,不能得到具体的内容,对Seo的优化极其的不友好。为了优化项目Seo,目前主要有两个方案:服务端渲染(Server Side Rendering)、预渲染(Prerending)。
预渲染的两种方式
-
这个插件是一个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.百度.com/search/spider.html)
其他如图,
6.点击保存。
7.点击选择模拟设备下拉选择,选择新添加的模拟百度爬虫
经过以上7步,你浏览器能模拟爬虫访问,此时打开浏览器控制台network筛选doc类型,刷新页面,能看到页面返回是经过编译后的静态文件。
选择其他非爬虫模式Emulated devices或不打开Emulated device调试模式,刷新页面,能看到页面返回是通过js动态解析的。
总结
配置prerender总体思路:通过prerender中间件判断是否是爬虫访问页面,如果是爬虫访问则转发给prerender服务进行提前编译,否则直接返回js动态渲染页面。
其他Vue单页面SEO((Search Engine Optimization))优化可以参考:Vue单页项目SEO完全指南
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhbcfggg
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
excel下划线不显示怎么办
PHP中文网 06-23 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
photoshop蒙版画笔没反应怎么办
PHP中文网 06-24