vue使用vue-meta插件动态设置meta和title标签(seo优化)
一文看懂动态设置meta和title标签
- 一、meta标签是什么
- 二、静态设置meta标签属性
-
- ①、首先下载相关包
- ②、在main.js中全局使用
- ③、给每个route赋一个静态属性对象
- ④、在vuex中存储一个空的属性对象和定义方法
- ⑤、最后在main.js中使用路由拦截守卫
- 三、动态设置meta标签属性
-
- ①、修改单个路由
- ②、动态赋值
一、meta标签是什么
在w3cschool中的定义如下所示
元数据（metadata）是关于数据的信息。
标签提供关于 HTML 文档的元数据。元数据不会显示在页面上，但是对于机器是可读的。典型的情况是，meta 元素被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据。
标签始终位于 head 元素中。元数据可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务。
meta标签可以用来描述一个HTML网页文档的属性，例如作者、日期和时间、网页描述、关键词、页面刷新等。
在seo优化中，合理利用 Meta 标签的 Description 和 Keywords属性，加入网站的描述或者网页的关键字，可使网站更加贴近用户体验。
今天我们就要使用的就是关于Meta 标签的 Description 和 Keywords属性
二、静态设置meta标签属性
①、首先下载相关包
npm install vue-meta --save 或 yarn add vue-meta
②、在main.js中全局使用
import Meta from 'vue-meta';
// 使用vue-meta
Vue.use(Meta);
③、给每个route赋一个静态属性对象
const routes = [
{
path: '/',
name: 'website_index',
component: website_index,
children: [
// 官网首页
{
path: '/',
name: '/',
component: home_main,
meta: {
metaInfo: {
title: "首页",
keywords: "资讯,新闻,财经,房产,视频,NBA,科技",
description: "我司从2003年创立至今，已经成为集新闻信息……"
}
}
}, // 解决方案详细信息
{
path: 'solutions_detail',
name: 'solutions_detail',
component: solutions_detail,
meta: {
metaInfo: {
title: "解决方案",
keywords: "资讯,新闻,财经,房产,视频,NBA,科技",
description: "我司从2003年创立至今，已经成为集新闻信息……"
}
}
},
// 关于我们
{
path: 'about_hc',
name: 'about_hc',
component: about_hc,
meta: {
metaInfo: {
title: "关于我们",
keywords: "资讯,新闻,财经,房产,视频,NBA,科技",
description: "我司从2003年创立至今，已经成为集新闻信息……"
}
}
}
]
},
]
④、在vuex中存储一个空的属性对象和定义方法
export default new Vuex.Store({
state: {
baseUrl:'http://192.168.31.39:8060/',
// 默认网站关键词
metaInfo: {
}
},
mutations: {
CAHNGE_META_INFO(state, metaInfo) {
console.log(metaInfo,"metaInfo")
state.metaInfo = metaInfo;
}
},
actions: {
},
modules: {
}
})
⑤、最后在main.js中使用路由拦截守卫
router.beforeEach((to, from, next) => {
if (to.meta.metaInfo){
store.commit("CAHNGE_META_INFO", to.meta.metaInfo)
}
next()
});
new Vue({
router,
store,
metaInfo(){
return {
title: this.$store.state.metaInfo.title,
meta: [
{
name: "keywords",
content: this.$store.state.metaInfo.keywords
}, {
name: "description",
content: this.$store.state.metaInfo.description
}
]
}
},
render: h => h(App)
}).$mount('#app')
这样一个静态的meta标签属性就设置好了
三、动态设置meta标签属性
设置动态的meta标签属性的话，我们可以在静态设置的基础上修改。比如修改某个路由的动态meta标签属性
①、修改单个路由
const routes = [
{
path: '/',
name: 'website_index',
component: website_index,
children: [
// 官网首页
{
path: '/',
name: '/',
component: home_main,
meta: {
metaInfo: {
title: "首页",
keywords: "资讯,新闻,财经,房产,视频,NBA,科技",
description: "我司从2003年创立至今，已经成为集新闻信息……"
}
}
},
// 解决方案详细信息
{
path: 'solutions_detail',
name: 'solutions_detail',
component: solutions_detail,
meta: {
metaInfo: {
title: "解决方案",
keywords: "资讯,新闻,财经,房产,视频,NBA,科技",
description: "我司从2003年创立至今，已经成为集新闻信息……"
}
}
},
// 关于我们
{
path: 'about_hc',
name: 'about_hc',
component: about_hc
}
]
},
]
删除关于我们的路由静态的meta属性
②、动态赋值
用在该路由页面加载时获取到的动态属性赋值给vuex中的对象属性
mounted () {
// 假设这是我们获取到的动态数据
let metaInfo = {
title: "张先生",
keywords: "玉树临风,风流倜傥",
description: "前方路过村庄，记得带一箱土鸡蛋回去~"
}
this.$store.commit("CAHNGE_META_INFO", metaInfo)
}
这样就实现了动态设置meta标签属性~~
有想法的小伙伴下方评论区多多交流噢~~