vue项目SEO优化

本篇文章主要讲解vue单页面应用在不使用服务器渲染的情况下，只针对于其中几个固定路由页面来实现SEO优化，且尽量不要选择太多页面，或者页面数据具有实时性。

一.项目使用插件

1. prerender-spa-plugin
2. vue-meta-info

// 安装prerender-spa-plugin
npm install prerender-spa-plugin --save

// 安装vue-meta-info
npm install vue-meta-info --save

注意：prerender-spa-plugin使用npm安装特别容易失败，可以使用cnpm进行安装。

二.插件使用

vue.config.js

const PrerenderSPAPlugin = require('prerender-spa-plugin')
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer
...
chainWebpack(config) {
    // 配置预渲染
    config.when(process.env.NODE_ENV !== 'development', config => {
      config.plugin('prerender-spa-plugin')
        .use(PrerenderSPAPlugin, [{
          // 必须 - app出口，和outputDir一致就好.
          staticDir: resolve('dist'),
          // 必须 - 需要预渲染的路由.
          routes: ['/', '/about'],
          // 必须 - 模拟浏览器渲染
          renderer: new Renderer({
            // 渲染时打开浏览器debug
            headless: true,
            // 渲染时机，正确的时机保证渲染页面的完整性
            renderAfterDocumentEvent: 'render-event'
          })
        }])
    })
}

main.js

mport MetaInfo from "vue-meta-info"; //seo单页面配置插件

Vue.use(MetaInfo)

new Vue({
  router,
  store,
  render: h => h(App),
  mounted() {
    document.dispatchEvent(new Event('render-event'))
  }
}).$mount('#app')

vue页面中加入metaInfo

<template>
  <div class="about">
    <h1>准备做seo优化的页面</h1>
  </div>
</template>
<script>
export default {
  metaInfo: {
    title: '我是SEO的title', 
    meta: [{
      name: 'keyWords',
      content: '我是SEO关键字'
    },
    {
      name: 'description',
      content: '我是SEO描述'
    }]
  }
}
</script>