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>

动态使用 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>

vue-meta-info动态设置meta标签相关推荐

vue修改meta值_vue中动态设置meta标签和title标签的方法
vue中动态设置meta标签和title标签的方法因为和原生的交互是需要h5这边来提供meta标签的来是来判断要不要显示分享按钮,所有就需要手动设置meta标签,标题和内容 //router内的设置 ...
Vue项目如何动态设置路由meta信息中的title属性值
场景:编辑.新建页面配置为同一个路由信息,期望不同页面的文档title展示不一样. 目前的配置如下,不能实现需求. 因此,我们需要动态的去设置meta的值.思路:借助Vue Router的路由独享守卫 ...
通过JS动态设置meta标签，根据手机屏幕分辨率自动缩放适配各手机（包括适配华为、oppo大屏幕手机、钉钉、微信）
JS动态添加meta标签,根据手机屏幕分辨率自动缩放适配各手机(包括适配华为.oppo大屏幕手机.钉钉.微信进入) 5月28晚上周四下班接了一个急活,一个面向国外的国际官方网站,三方适配+兼容.说是月 ...
动态设置meta标签
亲测可用,若有疑问请私信有时候在项目中打开别的网页,需要给网页设置meta,如缩放禁止等.这时候在index.html中设置失效需要额外设置. 可以使用插件vue-meta: 文档:https:/ ...
vue seo管理 vue-meta-info 动态设置meta和title
使用 vue-meta-info 配置title和meta按照以下步骤 1.安装 yarn: yarn add vue-meta-info npm: npm install vue-meta-info ...
vue 开发：动态设置html的title
技术干货当页面跳转(路由发生变化)时,操作title即可~ // 路由 router.js {path: '/index',component: resolve => require(['** ...
Vue动态设置路由title
{ path: '/videoCover', component: () => import ('./view/videoCover.vue'), meta: {title: ''}, }, 需 ...
vue 项目中，动态修改浏览器标签页的图标
vue 项目中,动态修改浏览器标签页的图标需求: 项目中有一个入口可以修改平台的名称和图标,图标同步展示为浏览器页签的图标实现: 1.找到项目中的app.vue 文件,动态创建link标签,调用后 ...
jsp select初始化赋值_分别在javascript和JSP中动态设置下拉列表默认值
一.JavaScript中动态设置select标签中选项的默认值: 比如,要完成下边这个下拉列表的动态显示,并且当进行前后翻页时,下拉列表中的值自动更新为当前页码: 图1 jsp部分代码如下: 图2 ...

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

1，安装vue-meta-info

2、在main.js文件中引入vue-meta-info

3、使用

vue-meta-info动态设置meta标签相关推荐

最新文章

热门文章

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

1，安装vue-meta-info

2、 在main.js文件中引入vue-meta-info

3、 使用

vue-meta-info动态设置meta标签相关推荐

最新文章

热门文章

2、在main.js文件中引入vue-meta-info

3、使用