1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > vue-meta-info动态设置meta标签

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

时间:2020-08-06 17:18:11

相关推荐

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 titlemeta: [{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>

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。