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

·  阅读 13717

目的

由于基于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 SPA
      path.join(__dirname, '../dist'),
      // List of routes to prerender
      [ '/', '/about', '/contact' ]
    )
  ]
}
复制代码
  • 打包完成后,你会发现原来的dist目录下,多出来about,contact这样的目录,这个目录下会有对应的index.html文件;这份文件是对应路由生产后的静态页面,便于SEO
curl xxxx.com
// 会发现会讲渲染后的页面返回,而不是刚开始的之后简单的js引用的初始页面
复制代码
  • 如果需要配置路由的访问, 还需要配置ApacheNginx等访问,匹配相应的路由访问导指定目录下index.html文件,即可。
// 配置完成后,可以查看效果,每个页面返回的都是编译后的静态文件
curl xxxx.com/about
curl xxx.com/contact
复制代码

遇到的几个问题:

  • 项目中使用的版本为2.1.0版本,@3.0.0版本的没有安装成功,在安装过程中会卡住,导致一直下载不下来,如果直接终止的话,会导致后续在build的过程中会报错
  • 如果没有对应路由或者拼写错误的话,build也会报错
  • webpack中配置的route需要与router一直,注意/符号
  • 需要注意Apache等配置,如果访问static的静态文件,都是统一访问到dist/static/目录下的,而不是dist/about/static这种
分类:
前端
收藏成功!
已添加到「」, 点击更改