處理 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 問題，這種方式優勢就是代碼侵入性最低，開發成本最少。可是也是有弊端的：