八、SPA单页面实现SEO优化之预渲染prerender-spa-plugin

文章目录

一、前言

关于SPA和SEO优化、SSR服务器渲染的介绍可以参考这里:
六、什么是SEO优化(搜索引擎优化)?SPA单页面应用如何实现SEO优化?

通过上一篇文章我们介绍了服务端渲染的方式来实现单页面应用的SEO优化。但是,服务端渲染的方式对开发并不友好,它需要约定各种规范,比较适合开发大型网站。

对于一些微型网站,比如个人博客,或者公司的小型应用网站,路由数量,页面数量并不多,我们可以使用prerender-spa-plugin预渲染来实现SPA单页面的SEO优化。

它的优点是简单方便,不需要改动太多原来的项目内容。

二、prerender-spa-plugin预渲染方式实现SEO

插件介绍

这里要介绍的是基于prerender-spa-plugin与vue-meta-info的一套官网前端SEO预渲染方案。

prerender-spa-plugin

prerender-spa-plugin是一个webpack插件,其作用是将渲染的页面固化成HTML文件。原理是利用无头浏览器(puppeteer)遍历配置中的路由,在收到结束的事件时,将当时的页面数据输出成HTML文件。

vue-meta-info

vue-meta-info是一个能在vue中使用的工具,能在vue文件中动态更改当前页面的meta中的信息(例如title,description等)。

将二者结合,就可以做到动态渲染页面内容,并输出html文件。

实现步骤

我们先看一下未预渲染之前,我们的Vue项目打包后的内容:

可以发现,我们的网站应用只有一个html页面,而且网站的主要组件内容都没有在这个html页面上显示,都需要运行里面的js文件,才能够渲染出具体的网站内容。

而搜索引擎的爬虫,是不会运行这些js文件的,因而我们网站的关键字信息会非常少,外界几乎不可能根据这点信息搜索到我们的网站。

下面我们开始使用prerender-spa-plugin和vue-meta-info来做SEO优化把!

1.安装prerender-spa-plugin

复制代码
cnpm i @dreysolano/prerender-spa-plugin

这里要注意啦,不是 官方的cnpm install prerender-spa-plugin 这个库,这个库有些插件没更新,因此后面打包会报错的,我也是踩坑查资料才解决的。

2.在vue.config.js里加入插件的配置信息

该配置直接加到

复制代码
configureWebpack: config => {
    if (process.env.NODE_ENV !== 'production') return
    // const PrerenderSPAPlugin = require('prerender-spa-plugin')
    const PrerenderSPAPlugin = require('@dreysolano/prerender-spa-plugin')
    const Renderer = PrerenderSPAPlugin.PuppeteerRenderer;
    const path = require('path');
    return {
      plugins: [
        new PrerenderSPAPlugin({
          // 生成文件的路径,也可以与webpakc打包的一致。     
          // 这个目录只能有一级,如果目录层次大于一级,在生成的时候不会有任何错误提示,在预渲染的时候只会卡着不动。
              staticDir: path.join(__dirname,'dist'),
              // 对应自己的路由文件,比如a有参数,就需要写成 /a/param1。
              routes: ['/','/home','/user'],
              // 这个很重要,如果没有配置这段,也不会进行预编译
              renderer: new Renderer({
                  inject: {
                      foo: 'bar'
                  },
                  headless: false,
                  // 在 main.js 中 document.dispatchEvent(new Event('render-event')),两者的事件名称要对应上。
                  renderAfterDocumentEvent: 'render-event',
                  renderAfterTime:5000
                  
              })
          })
      ]
    }
  }

2.router.js配置

项目中的路由必须配置成history模式

复制代码
const router = new VueRouter({
  mode: 'history',
  base: process.env.NODE_ENV === 'development' ? '' : '/',
  scrollBehavior: () => ({
    y: 0
  }),
  routes
})


3.main.js配置预渲染启动

复制代码
/* 这句非常重要,否则预渲染将不会启动 */
  mounted () {
    document.dispatchEvent(new Event('render-event')) // 触发
  }

4.vue-meta-info安装

复制代码
cnpm i vue-meta-info --save

5.main.js引入vue-meta-info

找到main.js文件加入以下代码

复制代码
import MetaInfo from 'vue-meta-info'
Vue.use(MetaInfo)

6.可以在各个vue页面里面配置属于自己的meta标签

如下

复制代码
<script>
export default {
  // 配置title和meta数据
  metaInfo: {
    title: 'title',
    meta: [
      {
        name: 'keywords',
        content: '关键字'
      },
      {
        name: 'description',
        content: '描述'
      }
    ]
  },
  data () {
    return {}
  }
}
</script>

7.打包

复制代码
npm run build

打包的过程中,google浏览器会自动弹出打包的测试页面,因而电脑上要安装goole浏览器哦!

打包成功后,我们发现打包文件夹已经发生变化,在我们配置的路由下会生成对应的html页面。

相关推荐
brzhang5 分钟前
代码即图表:dbdiagram.io让数据库建模变得简单高效
前端·后端·架构
SummerGao.17 分钟前
【解决】layui layer的提示框,弹出框一闪而过的问题
前端·layui
天天扭码1 小时前
从数组到对象:JavaScript 遍历语法全解析(ES5 到 ES6 + 超详细指南)
前端·javascript·面试
拉不动的猪1 小时前
前端开发中常见的数据结构优化问题
前端·javascript·面试
街尾杂货店&1 小时前
css word
前端·css
Мартин.1 小时前
[Meachines] [Hard] CrimeStoppers LFI+ZIP-Shell+Firefox-Dec+DLINK+rootme-0.5
前端·firefox
冰镇生鲜1 小时前
快速静态界面 MDC规则约束 示范
前端
技术与健康1 小时前
【解读】Chrome 浏览器实验性功能全景
前端·chrome
Bald Monkey1 小时前
【Element Plus】解决移动设备使用 el-menu 和 el-sub-menu 时,子菜单需要点击两次才会隐藏的问题
前端·elementui·vue·element plus
苍煜1 小时前
Elasticsearch(ES)中的脚本(Script)
大数据·elasticsearch·搜索引擎