vue-meta-info动态设置meta标签

网站的访问流量中，有相当一部分都是来自于搜索引擎，而来自于搜索引擎的流量又全部是免费的，所以网站的SEO(Search Engine Optimization 搜索引擎优化)是实现自我营销的一种最直接且最有效的手段。而SEO往往又都是从优化meta标签开始的！

title如下图：

keywords和description如下图：

1，安装vue-meta-info

npm i vue-meta-info --save

2、 在main.js文件中引入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: '标题-显示在浏览器title', // set a title
    meta: [{
           name: "keywords",
           content: "关键字"
          },{
            name: "description",
            content: "描述"
         }]
  }
}
</script>

or

动态使用 metaInfo

<template>
...
</template>
 
<script>
export default {
  data () {
    return {
      pageName: 'loading',
      keywords：'标题-显示在浏览器title',
      description: '关键字',
      title:'描述'
    }
  },
  mounted () {
    setTimeout(() => {
      this.pageName = 'async'
    }, 2000)
  }
  metaInfo: {
    title: this.title, 
    meta: [{
           name: "keywords",
           content: this.keywords
          },{
            name: "description",
            content: this.description
         }]
  }
}
</script>