处理 Vue 单页面 SEO 的另外一种思路

时间 2019-11-08

原文原文链接

vue-meta-info 官方地址： https://github.com/monkeyWang...javascript

（设置vue 单页面meta info信息，若是须要单页面SEO，能够和 prerender-spa-plugin造成更优的配合）html

单页面应用在前端正大放光彩。三大框架 Angular、Vue、React，可谓妇孺皆知。随着单页面应用的普及，人们在感觉其带来的完美的用户体验，极强的开发效率的同时，也彷佛不可避免的要去处理 SEO 的需求。前端

本文主要针对 vue 2.0 单页面 Meta SEO 优化展开介绍：vue

其实解决SEO问题不必定非得用服务端渲染来处理，服务端渲染对于刚接触 vue 的新手来讲，并非那么友好，虽然已有官方 SSR 中文文档。可是对于一个已经开发完毕的 vue 项目去接 SSR 不管是从工做量仍是技术角度来讲，都是一种挑战。不过这些怎么能可贵到伟大的前端程序员！java

若是您调研服务器端渲染(SSR)只是用来改善少数营销页面（例如 /, /about, /contact 等）的 SEO，那么您可能须要预渲染。无需使用 web 服务器实时动态编译 HTML，而是使用预渲染方式，在构建时 (build time) 简单地生成针对特定路由的静态 HTML 文件。优势是设置预渲染更简单，并能够将您的前端做为一个彻底静态的站点。
若是您使用 webpack，您可使用 prerender-spa-plugin 轻松地添加预渲染。它已经被 Vue 应用程序普遍测试。webpack

预渲染为SEO提供了另外一种可能，简单的来讲，预渲染就是当vue-cli构建的项目进行npm run build 的时候，会按照路由的层级进行动态渲染出对应的html文件。git

// webpack.conf.js
var path = require('path')
var PrerenderSpaPlugin = require('prerender-spa-plugin')

module.exports = {
  // ...
  plugins: [
    new PrerenderSpaPlugin(
      // 编译后的html须要存放的路径
      path.join(__dirname, '../dist'),
      // 列出哪些路由须要预渲染
      [ '/', '/about', '/contact' ]
    )
  ]
}

最终会生成相似于这样的目录结构程序员

而里面的内容都会被渲染成了静态的 html 文件github

<html>
  <head>
    <meta charset="utf-8">
    <title>tangeche-pc</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  <script type="text/javascript" src="/app.js"></script></body>
</html>

能够直观的发现，预渲染的做用。web

有了预渲染，咱们能够解决不少方面的SEO的问题，可是有时候咱们也会须要Meta信息的变化，好比 title 好比 Meta keyWords 或者是 link...

这里安利一下 vue-meta-info 一个能够动态设置meta 信息的vue插件若是须要单页面SEO，能够和 prerender-spa-plugin造成更优的配合。

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

1.安装

yarn:

yarn add vue-meta-info

npm:

npm install vue-meta-info --save

2.全局引入 vue-meta-info

import Vue from 'vue'
import MetaInfo from 'vue-meta-info'

Vue.use(MetaInfo)

3.组件内静态使用 metaInfo

<template>
  ...
</template>

<script>
  export default {
    metaInfo: {
      title: 'My Example App', // set a title
      meta: [{                 // set meta
        name: 'keyWords',
        content: 'My Example App'
      }]
      link: [{                 // set link
        rel: 'asstes',
        href: 'https://assets-cdn.github.com/'
      }]
    }
  }
</script>

4.若是你的 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>

写到这里，你们应该都明白了我所说的 SEO 的另外一种思路是什么了，preRender + metaInfo

能够才必定层次上去解决 SEO 问题，这种方式优势就是代码侵入性最低，开发成本最少。可是也是有弊端的：

不能很好地处理用户独特性路由: 好比有个路由是 /my-profile, 预渲染可能不会很好用,
由于这个内容页是根据用户信息变化的，因此页面内容也不是惟一肯定的. 你可能会使用相似于这样的路由路径

/users/:username/profile,可是这样也是不合适的.

常常变更的文件
须要预渲染成千上万的路由文件: 这个可能会致使你编译时间.....额，可能你会编译很长时间