Vue框架的SEO优化之 vue-meta-info & prerender-spa-plugin

Vue框架的SEO优化之旅

前言
事情起因
解决方案
方案选择
安装插件
配置文件
开始优化
最终结果

前言

SEO（Search Engine Optimization）：汉译为搜索引擎优化。是一种方式：利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名。目的是：为网站提供生态式的自我营销解决方案，让其在行业内占据领先地位，获得品牌收益；SEO包含站外SEO和站内SEO两方面；为了从搜索引擎中获得更多的免费流量，从网站结构、内容建设方案、用户互动传播、页面等角度进行合理规划，还会使搜索引擎中显示的网站相关信息对用户来说更具有吸引力。

事情起因

近期由于公司官网需要进行SEO优化，但是官网的前端架松是以VUE为主的，对SEO的支持并不友好。遂寻找对VUE进行SEO优化的方案。收寻的解决方案如下

解决方案

1.SSR 官方提供的服务器端渲染
2.Nuxt.js 第三方提供的服务器端渲染
3.vue-meta-info & prerender-spa-plugin

方案选择

SSR 官方提供的VUE服务器端渲染解决方案，由于网站SEO的需求并不需要实时的获取信息，而且对项目的改动成本也比较高，所以pass了。Nuxt.js是第三方的服务端渲染解决方案。比SSR略简单，但比第三种方案（vue-meta-info & prerender-spa-plugin）还是要对更重一些。所以最后选择了对项目改动最小，并能满足SEO的基本需求的第三种方案。

安装插件

好了，方案选定。接下来就先做好项目改动的准备工作：
1.安装vue-meta-info

npm install  -save-dev vue-meta-info

2.安装 prerender-spa-plugin

npm install -save-dev prerender-spa-plugin

安装过程中遇到了一些问题， prerender-spa-plugin插件是依赖于puppeteer库。在安装的过程中，puppeteer会自动下载chromium（模拟浏览器环境），但在国内的网络环境会下载失败，从而导致安装失败。

ERROR: Failed to download Chromium r637110! Set "PUPPETEER_SKIP_CHROMIUM_DOWNLOA
D" env variable to skip download.

在查阅了相关资料后，找到解决办法：
跳过自动下载chromium，我们可以执行 —ignore-scripts 忽略这个js执行。也可以通过设置环境变量set PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=1跳过下载步骤。

npm i --save puppeteer --ignore-scripts

或者

set PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=1

然后手动下载chromium，可以架梯子下google的chromium，也可以从taobao镜像地址：https://npm.taobao.org/mirrors/chromium-browser-snapshots/ 下载，但一定要选择好安装失败时提示的 r637110 同版本下载。解压后把文件夹复制到

node_modules/puppeteer/.local-chromium/win64-r637110/

目录下，如果没有.local-chromium目录，在puppeteer目录里，执行一下

node install.js

就会生成.local-chromium目录。把下载好的chromium复制进去就可以了。
到现在，需要的插件就安装好了。

配置文件

下面来进行必要的配置，首先是webpack的配置，webpack.prod.conf.js文件的修改，在plugins里加下如下代码


const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const baseWebpackConfig = require('./webpack.base.conf')
const PrerenderSPAPlugin = require('prerender-spa-plugin')  // 引入prerender-spa-plugin
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer
 
const webpackConfig = merge(baseWebpackConfig, {
    plugins: [
        new HtmlWebpackPlugin({
            filename: config.build.index,
            template: 'index.html',
            inject: true,
            minify: {
                removeComments: true,
                collapseWhitespace: true,
                removeAttributeQuotes: true
            },
            chunksSortMode: 'dependency'
        }),
        
        new PrerenderSPAPlugin({
            staticDir: path.join(__dirname, '../dist'),
            
            // 需要进行预渲染的路由，build后会生成对应的目录及index.html静态页面。
            routes: ['/', '/index', '/about'],
            
            // 这个很重要，如果没有配置这段，也不会进行预渲染
            renderer: new Renderer({
                inject: {
                  foo: 'bar'
                },
                headless: false,
                // 在 main.js 中 document.dispatchEvent(new Event('render-event'))，两者的事件名称要对应上。
                renderAfterDocumentEvent: 'render-event'
            })
        })
    ]

然后是main.js

new Vue({
    el: '#app',
    router,
    store,
    render: h => h(App),
    
    // 这句非常重要，否则预渲染将不会启动 
    mounted () {
        document.dispatchEvent(new Event('render-event'))
    }
})

及router/index.js的修改，路由必为 history 模式。因为prerender-spa-plugin目前只支持history模式。

const router = new Router({
  mode: 'history', // 改为 history 模式
  routes: [
    {
      path: '/',
      redirect:'/index',
      name: 'index',
      component: Index
    },
    {
      path: '/index',
      name: 'index',
      component: Index
    },
    {
      path: '/case',
      name: 'case',
      component: Case
    },
    {
      path: '/service',
      name: 'service',
      component: Service
    },
    {
      path: '/about',
      name: 'about',
      component: About
    }
  ]
})

更详细的配置，请参考 https://www.npmjs.com/package/prerender-spa-plugin
到目前为止准备工作就算是做完了。

开始优化

vue-meta-info插件的调用。我们可以在需要meta信息的组件内加入如下代码

<template>
  ...
</template>
 
<script>
  export default {
   metaInfo: {
      title: '测试的SEO',  
      meta: [
        {
          name: 'keywords',
          content: '关键字1,关键字2,关键字3'  
        },
        {
          name: 'description',
          content: '这是一段网页的描述'
        }
      ]
    }
  }
</script>

如果你的title或者meta是异步加载的，那么你可能需要这样使用

<template>
  ...
</template>
 
<script>
  export default {
    name: 'async',
    metaInfo () {
      return {
        title: this.pageName
      }
    },
    data () {
      return {
        pageName: 'loading'
      }
    },
    mounted () {
      setTimeout(() => {
        this.pageName = 'async'
      }, 2000)
    }
  }
</script>

更多vue-meta-info详情，请移步 https://www.npmjs.com/package/vue-meta-info 官方文档

最终结果

现在我们把项目打包，看看优化后的效果如何：

npm run build

这是项目打包后的目录结构
meta标签的内容及keywords
可以看到，在浏览器里查看源码后，可以看到meta里的keywords和description都是可以直接看到的，非常有利于搜索引擎的检索。
最后结论：通过vue-meta-info和prerender-spa-plugin插件的组合，基本上可以实现网页meta标签的seo优化。