vue-cli2.0的SEO優化

當前單頁應用無論在開發效率和用戶體驗上都有良好的表現。 隨之產生的問題就是單頁應用在SEO方面表現不是不好。 該篇文章提供了四種解決方法。各有千秋 https://segmentfault.com/a/1190000019623624 ，本文着重介紹 prerender-spa-plugin + vue-meta-info 的SEO優化。

1 vue-meta-info介紹

vue-meta-info 是一個基於vue 2.0的插件，它會讓你更好的管理你的 app 裏面的 meta 信息。你可以直接 在組件內設置 metaInfo 便可以自動掛載到你的頁面中。如果你需要隨着數據的變化，自動更新你的title、meta等信息，那麼用此 插件也是再合適不過了。 當然，有時候我們也可能會遇到讓人頭疼的SEO問題，那麼使用此插件配合 prerender-spa-plugin 也是再合適不過了，更多資料請參考，https://github.com/muwoo/vue-meta-info。 https://zhuanlan.zhihu.com/p/29148760group_id=890298677627879424

2 安裝

# yarn安裝
yarn add vue-meta-info

# npm安裝
npm install vue-meta-info --save

在package.json中的dependencies選項中出現"vue-meta-info": "^0.1.7",( 版本號忽略)表示安裝成功

3 全局導入

在main.js中全局導入

import metaInfo from 'vue-meta-info'
Vue.use(metaInfo)
let bus = new Vue()

4 在組件中使用

 export default{
     metaInfo: {
      title: '凡狼網-文化共建&教育共享', // set a title
      meta: [{                 // set meta
        name: 'keyWords',
        content: '教育,PPT,黨建,元旦,總結,新春,展板,亭子,長廊,櫥窗,課件,卡通,吉祥物,文化牆,文化牌,語文課件,名師講座,學校文化,教室打造,廉政文化,舞臺背景,文明城市,學校環境,樓道文化,浮雕,化學,安全提示牌,特級教師課件,教師培訓'
      },{
        name:"name",
        content:"上傳/下載文化作品與教育資源"
      },{
        name:'description',
        content:"凡狼網搭建了一個集教育者、設計師、攝影師等在凡狼網開店上傳優秀作品和教育資源的平臺，可獲得長久的收益。"
      },{
        name:"image",
        content:"https://flang-icon.oss-cn-zhangjiakou.aliyuncs.com/smallicons/fanlang-show.png"
      }],
      link: [{                 // set link
        rel: 'asstes',
        href: 'https://www.fanlang.cn/#/'
      }]


}

5。檢查是否添加成功

此時我們會發現我們剛纔添加的信息已經成功渲染表示添加成功

6. 如果是動態加載

  metaInfo () {
      return {
        title: `凡狼網-${this.shappingdata.name}`, // set a title
        meta: [{                 // set meta
          name: 'keyWords',
          content: `${this.shappingdata.description},${this.shappingdata.name}`
        },{
          name:"name",
          content:"上傳/下載文化作品與教育資源"
        },{
          name:'description',
          content:"凡狼網搭建了一個集教育者、設計師、攝影師等在凡狼網開店上傳優秀作品和教育資源的平臺，可獲得長久的收益。"
        },{
          name:"image",
          content:"https://flang-icon.oss-cn-zhangjiakou.aliyuncs.com/smallicons/fanlang-show.png"
        }],
        link: [{                 // set link
          rel: 'asstes',
          href: 'https://www.fanlang.cn/#/'
        }]
      }
    },