2021-vue项目SEO优化->vue-meta插件动态设置meta和title标签

前言

不想用了ssr 技术，我就是想要优化，这个方法是最好的
如何去使用md来写文章

功能快捷键

撤销：Ctrl/Command + Z
重做：Ctrl/Command + Y
加粗：Ctrl/Command + B
斜体：Ctrl/Command + I
标题：Ctrl/Command + Shift + H
无序列表：Ctrl/Command + Shift + U
有序列表：Ctrl/Command + Shift + O
检查列表：Ctrl/Command + Shift + C
插入代码：Ctrl/Command + Shift + K
插入链接：Ctrl/Command + Shift + L
插入图片：Ctrl/Command + Shift + G
查找：Ctrl/Command + F
替换：Ctrl/Command + G

一、meta标签是什么

数据（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标签属性

①、修改单个路由

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)
}