八、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页面。

相关推荐
腾讯TNTWeb前端团队4 小时前
helux v5 发布了,像pinia一样优雅地管理你的react状态吧
前端·javascript·react.js
范文杰7 小时前
AI 时代如何更高效开发前端组件?21st.dev 给了一种答案
前端·ai编程
拉不动的猪7 小时前
刷刷题50(常见的js数据通信与渲染问题)
前端·javascript·面试
拉不动的猪7 小时前
JS多线程Webworks中的几种实战场景演示
前端·javascript·面试
FreeCultureBoy8 小时前
macOS 命令行 原生挂载 webdav 方法
前端
uhakadotcom9 小时前
Astro 框架:快速构建内容驱动型网站的利器
前端·javascript·面试
uhakadotcom9 小时前
了解Nest.js和Next.js:如何选择合适的框架
前端·javascript·面试
uhakadotcom9 小时前
React与Next.js:基础知识及应用场景
前端·面试·github
uhakadotcom9 小时前
Remix 框架:性能与易用性的完美结合
前端·javascript·面试
uhakadotcom9 小时前
Node.js 包管理器:npm vs pnpm
前端·javascript·面试