metainfo可以设置说明_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

...

export default {

metaInfo: {

title: '标题-显示在浏览器title', // set a title

meta: [{

name: "keywords",

content: "关键字"

},{

name: "description",

content: "描述"

}]

}

}

or

动态使用 metaInfo

...

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

}]

}

}