vue-cli3单页面项目SEO优化

vue对SEO很不友好，现在网上已经给出了四种解决方案，主要说预渲染prerender-spa-plugin咋用，其他的学习成本较大，项目如果对SEO要求很多，不如不使用vue写了

1.SSR服务器渲染：关于服务器渲染：Vue官网介绍，对Vue版本有要求，对服务器也有一定要求，需要支持nodejs环境。

2.静态化

静态化是Nuxt.js打包的另一种方式，算是 Nuxt.js 的一个创新点，页面加载速度很快。

在 Nuxt.js 执行 generate 静态化打包时，动态路由会被忽略。

3.使用Phantomjs针对爬虫做处理

Phantomjs是一个基于webkit内核的无头浏览器，即没有UI界面，即它就是一个浏览器，只是其内的点击、翻页等人为相关操作需要程序设计实现。

虽然“PhantomJS宣布终止开发”，但是已经满足对Vue的SEO处理。

这种解决方案其实是一种旁路机制，原理就是通过Nginx配置，判断访问的来源UA是否是爬虫访问，如果是则将搜索引擎的爬虫请求转发到一个node server，再通过PhantomJS来解析完整的HTML，返回给爬虫。

4.预渲染prerender-spa-plugin

这种方法比前几种要简单许多，就是使用两个插件的事，但是如果很多路由的话编译要很久

如果你只是用来改善少数营销页面（例如 /, /about, /contact 等）的 SEO，那么你可能需要预渲染。无需使用 web 服务器实时动态编译 HTML，而是使用预渲染方式，在构建时 (build time) 简单地生成针对特定路由的静态 HTML 文件。优点是设置预渲染更简单，并可以将你的前端作为一个完全静态的站点。

npm install prerender-spa-plugin --save

vue cli 3 vue.config.js配置：

const PrerenderSPAPlugin = require('prerender-spa-plugin');
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer;
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'),
                    // 对应自己的路由文件，比如a有参数，就需要写成 /a/param1。
                    routes: ['/', '/product','/about'],
                    // 这个很重要，如果没有配置这段，也不会进行预编译
                    renderer: new Renderer({
                        inject: {
                            foo: 'bar'
                        },
                        headless: false,
                        // 在 main.js 中 document.dispatchEvent(new Event('render-event'))，两者的事件名称要对应上。
                        renderAfterDocumentEvent: 'render-event'
                    })
                }),
            ],
        };
    }
}

main.js加入

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

注意：router中必须设置 mode: “history

npm install vue-meta-info --save

main.js

import MetaInfo from "vue-meta-info"; //seo优化
Vue.use(MetaInfo);

vue文件中写入

export default {
  name: "home",
  metaInfo: {
    title:
      "标题",
    meta: [
      {
        name: "keywords",
        content:
          "keywords"
      },
      {
        name: "description",
        content:
          "description"
      }
    ]
  }
}

动态使用

这种方式可以动态生成META标签的内容，一般META标签的内容需要根据变量去变化的时候，可以选用这种方式：

image

最后 npm run build ，打包出来可以看见文件，打包出文件夹/index.html，例如：about => about/index.html，里面有html内容。