vue 通过prerender-spa-plugin实现SEO优化(转)

什么是SEO？

SEO是由英文Search Engine Optimization缩写而来， 中文意译为“搜索引擎优化”。SEO是指通过对网站进行站内优化和修复(网站Web结构调整、网站内容建设、网站代码优化和编码等)和站外优化，从而提高网站的网站关键词排名以及公司产品的曝光度。通过搜索引擎查找信息是当今网民们寻找网上信息和资源的主要手段。

搜索引擎原理？

1. 从 meta 标签中读取 keywords 、 description 的内容。
2. 根据语义化的 html 的标签爬取和分析内容。一个整体都是用 div 标签的网站和正确使用了 html5 标签的效果是不一样的。
3. 读取 a 标签里的链接，通过 a 标签的链接可以跳转到别的网站。（爬虫是先跳转，还是继续爬内容再跳转，就看算法是广度优先还是深度优先了）
4. 像 h1 - h6 标签是具有不同程度的强调意义的。
5. 一般将 h1 视为重要内容。同样有强调内容还有 strong 、 em 标签。

优化方法

vue的ssr渲染(配置参考)和prerender-spa-plugin插件实现(配置参考)。SSR比较复杂，所以选了prerender-spa-plugin来尝试。

1. 安装

npm i prerender-spa-plugin --save -dev

2. 路由模式

mode : 'history',

3. vue.config.js配置

const PrerenderSPAPlugin = require('prerender-spa-plugin')
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer
// eslint-disable-next-line no-unused-vars
const path = require('path')

module.exports = {
  configureWebpack: config => {
    if (process.env.NODE_ENV !== 'production') return
    return {
      plugins: [
        new PrerenderSPAPlugin({
          // 生成文件的路径，也可以与webpakc打包的一致。
          // 这个目录只能有一级，如果目录层次大于一级，在生成的时候不会有任何错误提示，在预渲染的时候只会卡着不动。
          staticDir: path.join(__dirname, 'dist'),
          // outputDir: path.join(__dirname, './'),
          // 对应自己的路由文件，比如a有参数，就需要写成 /a/param1。
          routes: ['/home',  '/'],
          // 这个很重要，如果没有配置这段，也不会进行预编译，替换成你自己的路由
          renderer: new Renderer({
              inject: { //默认挂在window.__PRERENDER_INJECTED对象上，可以通过window.__PRERENDER_INJECTED.foo在预渲染页面取值
              foo: 'bar'
            },
            headless: false,
            // 在 main.js 中 document.dispatchEvent(new Event('render-event'))，两者的事件名称要对应上。
            renderAfterDocumentEvent: 'render-event'//等到事件触发去渲染，此处我理解为是Puppeteer获取页面的时机
          })
        })
      ]
    }
  },
}

4. main.js

new Vue({
  router,
  store,
  render: h => h(App),
//添加到这里,这里的render-event和vue.config.js里面的renderAfterDocumentEvent配置名称一致
  mounted () {
    document.dispatchEvent(new Event('render-event'))
  }
}).$mount('#app')

5. 使用vue-meta-info插件，改变link、title、meta等

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

main.js中添加
import MetaInfo from 'vue-meta-info'
Vue.use(MetaInfo)

这样在组件页面中就可以使用了假设你要给home.vue添加title，meta标签

<template>
...
</template>

<script>
export default {
  metaInfo: {
    title: '我是home头', // set a title
    meta: [{             // set meta
      name: 'keyWords',
      content: '我是home关键字'
    },
    {
      name: 'description',
      content: '我是home描述'
    }],
    link: [{ // set link
      rel: 'asstes',
      href: 'https://assets-cdn.github.com/'
    }]
  }
}
</script> 

这样再结合prerender-spa-plugin，打包之后，在dist文件夹找到contact文件夹下的index.html 打开你会发现就有title和meta的关键字和描述标签了。
本地起服务或者发布到线上运行项目，在页面右键—查看源代码—就可以看到页面的title和meta标签了。