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

- 日理万妓 2022-10-30 14:23 15阅读 0赞

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