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。检查是否添加成功

vue-cli2.0的SEO优化_第1张图片此时我们会发现我们刚才添加的信息已经成功渲染表示添加成功

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/#/'
        }]
      }
    },

vue-cli2.0的SEO优化_第2张图片

你可能感兴趣的:(vue,vue.js)