Vue SPA项目SEO优化之预渲染Prerender-spa-plugin

目的

由于基于Vue的SPA项目普通的爬虫无法爬取项目的静态文本的内容，通过预渲染插件prerender-spa-plugin解决vue的SPA项目的SEO问题。

可以看到项目编译后的index.html中只有一些HTML和js，css文件的引用，而无关于内容的静态文本。当然你也可以添加meta的keyword和descrption,去简答的描述一些关于网站的内容。

curl xxxx.com
// 返回的结果发现只有简单的HTML和js引用，无相关的静态文本

使用过程

Vue预渲染插件Prerender-spa-plugin GitHub地址

能够解决的问题

SEO
Slow Client
OpenGraph/Social Metadata

不能解决

User-specific content、
- 不同的用户看都会不同的页面，这种类型的页面不适用预渲染
Frequently changing Content
- 对于一些经常发生变化的页面，如体育比赛等，会导致编译后的数据不是实时更新的
Thousands of routers
- 不适用与路由太多的页面，会导致构建build的过程，等待的时间是超长

实现

主要通过Webpack插件的方式，控制编译出来的静态文件的方式。

npm install prerender-spa-plugin@2.1.0 --save

Webpack简单配置

// webpack.conf.js
var path = require('path')
var PrerenderSpaPlugin = require('prerender-spa-plugin')module.exports = {// ...plugins: [new PrerenderSpaPlugin(// Absolute path to compiled SPApath.join(__dirname, '../dist'),// List of routes to prerender[ '/', '/about', '/contact' ])]
}

打包完成后，你会发现原来的dist目录下，多出来about,contact这样的目录，这个目录下会有对应的index.html文件；这份文件是对应路由生产后的静态页面，便于SEO

curl xxxx.com
// 会发现会讲渲染后的页面返回，而不是刚开始的之后简单的js引用的初始页面

如果需要配置路由的访问，还需要配置Apache或Nginx等访问，匹配相应的路由访问导指定目录下index.html文件，即可。

// 配置完成后，可以查看效果,每个页面返回的都是编译后的静态文件
curl xxxx.com/about
curl xxx.com/contact

图片来源：http://www.coubai.com/ 网络游戏

Vue SPA项目SEO优化之预渲染Prerender-spa-plugin相关推荐

Vue项目SEO优化之预渲染--prerender-spa-plugin 搭配vue-meta-info
Vue项目SEO优化之预渲染–prerender-spa-plugin 搭配vue-meta-info prerender-spa-plugin配置安装执行npm i prerender-spa- ...
关于前端spa项目seo优化改造方案(预渲染，ssr，nuxt比较）
目前的的前端项目为基于vuecli3搭建的spa项目,由于需求提出需要对首页,部分内容页面做seo优化,涉及到前端项目的框架和部分页面的改造. 目录 SEO简介关于收录关于链接一.预渲染二.s ...
prerender html5,HTML5 VUE单页应用 SEO 优化之预渲染（prerender-spa-plugin）
前言:当前 SPA 架构流行的趋势如日中天,前后端分离的业务模式已经成为互联网开发的主流方式,但是单页面应用始终存在一个痛点,那就是 SEO, 对于那些需要推广,希望能在百度搜索时排名靠前的网站而 ...
Vue-cli3项目seo优化--静态化打包（动态改变页面Titl、keyWords、description）
Vue-cli3项目seo优化,静态化打包(动态改变页面Titl.keyWords.description) 文章目录 Vue-cli3项目seo优化,静态化打包(动态改变页面Titl.keyWord ...
vue项目seo优化-预渲染prerender-spa-plugin配置
文章目录前言一.prerender-spa-plugin是什么? 1.优点 2.缺点二.使用步骤 1.安装 prerender-spa-plugin 2.配置 prerender-spa-plu ...
Vue项目SEO优化解决方案
目录前言一. Vue 项目进行 SEO 优化 1. SSR服务器渲染 2. 静态化 (博客, 介绍性官网) 3. 预渲染 prerender-spa-plugin (插件) 4. 使用Phanto ...
vue项目SEO优化以及生成sitemap.xml
众所周知vue项目本质是单页面项目,对SEO优化十分不好,找起资料来更是麻烦.闲话不多说,分享一下我对自己项目进行的SEO方案及生成sitemap.xml. 需要的库 npm install site ...
前端性能和加载体验优化实践（附：PWA、离线包、内存优化、预渲染）
一.背景:页面为何会卡? 1.1 等待时间长(性能) 项目本身包/第三方脚本比较大. JavaScript 执行阻塞页面加载. 图片体积大且多. 特别是对于首屏资源加载中的白屏时间,用户等待的时间就越 ...
记一次SPA项目打包优化的过程
前言在完成spa 项目打包上线后,最让人困扰的一个spa的缺点就是首屏加载事件过长,在之前的解决方案中我们通常是添加一个loading页面来减少用户等待所带来的焦虑感,但是这样的解决方案治标不治本, ...

Vue SPA项目SEO优化之预渲染Prerender-spa-plugin

Vue SPA项目SEO优化之预渲染Prerender-spa-plugin相关推荐

最新文章

热门文章