vue使用prerender-spa-plugin预渲染进行seo优化

前言

单页应用(SPA)是最近流行的一种应用模式,它支持在同一页面下通过哈希(hash)或html5的history api实现不刷新式切换视图,既实现了动态路由的变化,也实现了历史记录的保持,然而,相比于静态页面和动态页面(ASP/PHP/JSP)而言,缺点也是显而易见的,那就是对SEO不友好。

不管是Vue、React还是angular等实现路由的框架,无一不是加载原始html代码,再通过JavaScript动态渲染页面,但对于爬虫而已,JavaScript代码是不会执行的,从而导致爬取不到合适的内容。

解决方案

vue使用prerender-spa-plugin预渲染进行seo优化_第1张图片
爬虫

搜索爬虫不会去执行js代码,只会从原有的html中读取相关信息,所以总的解决方案是尽可能保证原始html代码包含希望被收录的信息,有下面几种方案:

1、页面中使用隐藏式元素
在html源码上写入希望被收录的静态信息,但不显示出来,仅为爬虫服务。

2、专门为爬虫开一个服务
在后端做http拦截,检查请求代理User-Agent是不是爬虫,如果检测到是爬虫类型,动态生产html片段,仅为爬虫服务。

3、使用预渲染(preredner)
在构建项目的同时,自动在浏览器中渲染一遍页面,然后生成相应路由下的静态html,这些路由只有在不执行javascript时才会显示(正是爬虫的情况),如果执行了js,将触发常规逻辑。

4、使用服务端渲染(SSR)
并非动态页面,而是在node端执行vue代码,翻译转换得出相应的html片段/全文,最后在响应体中返回信息(后续文章介绍)。

综合考虑后,方式一适合简单修改,方式二修改难度高,方式三和方式四最为合适。从简易难度而已,预渲染是最简单最快捷的,所以这里先介绍预渲染的seo优化方式。

使用

先安装prerender-spa-plugin模块,然后修改路由为 history 模式,紧接着在打包配置中(webpack.prod.config.js或vue.config.js)添加PrerenderSPAPlugin插件,最后在入口文件中触发相关事件即可。

$ npm install prerender-spa-plugin -S
// build/webpack.prod.conf.js 或 vue.config.js
const PrerenderSPAPlugin = require('prerender-spa-plugin'); // 预渲染
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer;

// plugins中配置PrerenderSPAPlugin
new PrerenderSPAPlugin({
  staticDir: path.join(__dirname, '../dist'),
  // 对应自己的路由文件,比如index有参数,就需要写成 /index/param1。
  routes: ['/'], // 因为该系统操作都是基于登录后的,所以只做登录页面的预渲染就行了
  renderer: new Renderer({
    inject: {
      foo: 'bar',
    },
    headless: false,
    // 在 main.js 中 document.dispatchEvent(new Event('render-event')),两者的事件名称要对应上。
    renderAfterDocumentEvent: 'render-event',
  }),
})

由于该插件需要电脑上已安装浏览器软件才可以运行,如果需要在没有浏览器的linux上运行打包,需要先检查电脑版本再添加插件,判断方式如下:

// build/webpack.prod.conf.js 或 vue.config.js
const os = require('os');
// 预渲染操作判断,仅当当前运行系统为window或mac才执行预渲染打包
if (['Windows_NT', 'Darwin'].includes(os.type())) {
  console.log( '将自动打开浏览器进行预渲染操作');
  // 插入前面的插件配置
}else{
   console.log( '非window或mac系统,不存在浏览器,取消预渲染操作');
}

main.js入口文件在 vue 实例完成后执行

// main.js
document.dispatchEvent(new Event('render-event')); // 预渲染

最后因为我们修改了路由模式为history,普通情况下对于浏览器而言‘/list/detail’实际上是要去请求‘/list/detail/index.html’页面,这显然不存在,会报404异常。所以我们需要对nginx服务器进行代理转发,设置如下:

# ect/nginx/nginx.conf
# vue最小管理系统配置(后台服务3000端口)
server {
        listen       8080; # 监听8080端口
        root         /www/vue-base-demo/dist/; // 静态资源目录
        index        index.html; // 首页
        location / {
                try_files $uri $uri/ /index.html; # 当找不到文件404的时候,转发的index.html上
        }
}

当然其他服务器也可以实现,只要思路一样就行。


打包

npm run build

打包后将在dist文件夹下生成相应的html文件。

预渲染注意事项
· vue-cli 2.x 和 vue-cli 3.x 配置差不多
· 路由需要使用 history 模式
· 预渲染配置 routes 属性可以填写路由对应的 url,如果需要参数需要配置合适的参数
· renderAfterDocumentEvent 需要对应
· 预渲染打包前会自动打开浏览器从而获取到相关 dom,如果没有浏览器软件将打包失败(建议· 把 dist 包括在 git 项目内)
· nginx 需要相应的修改,避免 404

你可能感兴趣的:(vue使用prerender-spa-plugin预渲染进行seo优化)