Vue.js单页面SEO优化

SEO优化

**SEO（Search Engine Optimization）：汉译为搜索引擎优化。是一种方式：利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名。目的是让其在行业内占据领先地位，获得品牌收益。很大程度上是网站经营者的一种商业行为，将自己或自己公司的排名前移。
搜索引擎优化的技术手段主要有黑帽（black hat）、白帽（white hat）两大类。通过作弊手法欺骗搜索引擎和访问者，最终将遭到搜索引擎惩罚的手段被称为黑帽，比如隐藏关键字、制造大量的meta字、alt标签等。而通过正规技术和方式，且被搜索引擎所接受的SEO技术，称为白帽。
**

prerender-spa-plugin 插件

网址：https://www.npmjs.com/package/prerender-spa-plugin

该插件的目的是提供一个简单的预渲染解决方案，该解决方案可轻松扩展并适用于任何使用webpack构建的网站或单页面应用程序。

1、安装

cnpm install --save prerender-spa-plugin

2、在根目录新建webpack.prod.conf.js文件

const path = require('path')
const PrerenderSPAPlugin = require('prerender-spa-plugin')   //引用插件
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer
const webpackConfig = merge(baseWebpackConfig, {
    plugins: [
        // vue-cli生成的配置中就已有这个了，不要动
        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'),
            routes: ['/','/product','/about','/contact','/join','/jzjh'],
           
            // 这个很重要，如果没有配置这段，也不会进行预编译
            renderer: new Renderer({
                inject: {
                  foo: 'bar'
                },
                headless: false,
                // 在 main.js 中 document.dispatchEvent(new Event('render-event'))，两者的事件名称要对应上。
                renderAfterDocumentEvent: 'render-event'
            })
        })
    ]
})

3、在main.js文件中配置

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

vue-meta-info

网址：https://www.npmjs.com/package/vue-meta-info

vue-meta-info 是一个基于vue 2.0的插件，它会让你更好的管理你的 app 里面的 meta 信息。你可以直接 在组件内设置 metaInfo 便可以自动挂载到你的页面中。如果你需要随着数据的变化，自动更新你的title、meta等信息，那么用此 插件也是再合适不过了。 当然，有时候我们也可能会遇到让人头疼的SEO问题，那么使用此插件配合 prerender-spa-plugin 也是再合适不过了

1、安装

cnpm install --save vue-meta-info

2、在main.js中配置

import MetaInfo from 'vue-meta-info'
Vue.use(MetaInfo)

3、在需要SEO优化的组件进行配置

<script>
export default {
 metaInfo: {
    title: "网页标题",
    meta: [
      {
        name: "keywords",
        content:"关键字",
      },
      {
        name: "description",
        content:"网页描述",
      },
    ],
  },
  data() {
    return {};
  },
};
</script>