请选择 进入手机版 | 继续访问电脑版

vue使用vue-meta插件动态设置meta和title标签(seo优化)

[复制链接]
大胆 发表于 2020-12-31 18:15:13 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
一文看懂动态设置meta和title标签



一、meta标签是什么

w3cschool中的界说如下所示
  元数据(metadata)是关于数据的信息。
标签提供关于 HTML 文档的元数据。元数据不会显示在页面上,但是对于呆板是可读的。  典范的情况是,meta 元素被用于规定页面的形貌、关键词、文档的作者、最后修改时间以及其他元数据。
标签始终位于 head 元素中。  元数据可用于欣赏器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他 web 服务。
meta标签可以用来形貌一个HTML网页文档的属性,比方作者、日期和时间、网页形貌、关键词、页面刷新等。
在seo优化中,公道使用 Meta 标签的 Description 和 Keywords属性,到场网站的形貌大概网页的关键字,可使网站更加贴近用户体验。
本日我们就要使用的就是关于Meta 标签的 Description 和 Keywords属性
二、静态设置meta标签属性

①、首先下载相关包

  1. npm install vue-meta --save  或 yarn add vue-meta
复制代码
②、在main.js中全局使用

  1. import Meta from 'vue-meta';// 使用vue-metaVue.use(Meta);
复制代码
③、给每个route赋一个静态属性对象

  1. 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中存储一个空的属性对象和界说方法

  1. 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中使用路由拦截守卫

  1. 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标签属性
①、修改单个路由

  1. 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中的对象属性
  1. mounted () {        // 假设这是我们获取到的动态数据    let metaInfo = {        title: "张先生",        keywords: "玉树临风,风流倜傥",        description: "前方途经乡村,记得带一箱土鸡蛋归去~"    }    this.$store.commit("CAHNGE_META_INFO", metaInfo)}
复制代码
这样就实现了动态设置meta标签属性~~
有想法的小同伴下方评论区多多互换噢~~

来源:https://blog.csdn.net/qq_43958325/article/details/111996015
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

发布主题

专注素材教程免费分享
全国免费热线电话

18768367769

周一至周日9:00-23:00

反馈建议

27428564@qq.com 在线QQ咨询

扫描二维码关注我们

Powered by Discuz! X3.4© 2001-2013 Comsenz Inc.( 蜀ICP备2021001884号-1 )