「这是我参与2022首次更文挑战的第8天，活动详情查看：2022首次更文挑战」。

Meta标签

上篇文章：“自己的博客搜索引擎不收录？浅谈SEO优化：Meta标签的书写”内介绍了Meta标签的书写，这次填一个小“坑”，说说Vue这样的单页项目，如何写Meta标签。

本次使用vue-meta标签，根据路由或Vue内含水进行Meta标签的生成。

SEO优化，在Vue内，效果可能不是很好，要看搜索引擎是否支持动态爬取了。更好的SEO优化，应该是使用SSR进行DOM操作，或者对路由进行预渲染等等。这些下次再说～～～（又挖了一个坑，“针不戳”。）

Vue-meta

这次说说meta的生成，使用Vue-meta组件：

Vue-meta组件

目前Vue-meta分为两个分支（后续Vue3成为默认版本，next分支应该会合并到主分支）：

master：主分支，十分完善，支持Vue2.x
next：相当于Alpha版本，目前还在测试和完善，支持Vue3.x版本

next版本项目描述

这次讲那个版本呢？Vue3即将成为正式版本，这次当然……

是两个版本的使用都说说啦～～

Vue2.x

Vue2.x使用Vue-meta十分简单，没什么坑（用Vue3.x时候……呜呜呜，全是坑，不过……毕竟还在测试，文档和项目都没定型）。

使用方法很简单，根据官方文档：

<template>
  ...
</template>

<script>
  export default {
    metaInfo: {
      title: 'My Example App',
      titleTemplate: '%s - Yay!',
      htmlAttrs: {
        lang: 'en',
        amp: true
      }
    }
  }
</script>

渲染成页面的效果：

<html lang="en" amp>
<head>
  <title>My Example App - Yay!</title>
  ...
</head>

但是这样的方法有点麻烦，能不能直接在路由内编写呢？

答案是可以的。

项目引入

首先，我们需要引入vue-meta，首先是安装：

npm i vue-meta

VueX和脚手架

使用了VueX，添加一个全局变量进行页面内，动态替换：

export default ({
  namespaced: true,
  state: {
    metaInfo: {
      title: "",
      keywords: "",
      description: ""
    }
  },
  mutations: {
    CHANGE_META_INFO(state, metaInfo) {
      state.metaInfo = metaInfo;
    }
  },
  actions: {},
  modules: {}
})

VueX内使用

同时在脚手架内引入：

脚手架内引入

为了能在页面内，丝滑地更改meta内的description和keywords，我们重写一下函数：

metaInfo() {
    return {
      title: this.$store.state.metaModule.metaInfo.title,
      meta: [
        {
          name: "keywords",
          content: this.$store.state.metaModule.metaInfo.keywords
        }, {
          name: "description",
          content: this.$store.state.metaModule.metaInfo.description
        }
      ]
    }
  },

脚手架的配置文件：

脚手架

路由守卫

最后是在路由内配置前置守卫：

// 全局前置守卫
router.beforeEach((to, from, next) => {
  if (to.meta.metaInfo) {
    store.commit("metaModule/CHANGE_META_INFO", to.meta.metaInfo)
  }
  next()
})

前置守卫

Demo

到此，我们的Vue-meta就使用完成，在路由内添加即可：

Demo

效果验收：

最终效果

OG标签

至于og属性，你可以参考官网进行自定义，比如这里自定义一个og的image：og:url，全局VueX内添加：

之后到修改脚手架内的内容：

修改内容

Vue内直接操作DOM元素，确实不是一个好方法，大家可以试试其他方法优化～～

效果也显而易见：

Vue3.x

Vue3.x的Vue-meta还在Debug，不清楚是设计原因还是全面改制，用Vue2的方法基本不能操作。尤其是description标签，不清楚是否为官方bug，我一直以为是我的代码问题，后来在GitHub的issue内看到有大神提供的解决方案：Vue-meta issue#696

项目引入

思路和刚刚一样。我们先用npm等包管理器安装：

npm install vue-meta@next --save

VueX和脚手架

之后，我们VueX内设置：

export default ({
  namespaced: true,
  state: {
    metaInfo: {
      title: "",
      keywords: "",
      description: ""
    }
  },
  mutations: {
    CHANGE_META_INFO(state, metaInfo) {
      state.metaInfo = metaInfo;
    }
  },
  actions: {},
  modules: {}
})

VueX

我们在脚手架main.js内引用Vue-meta：

// Vue-meta
import {createMetaManager} from "vue-meta";

关键的来了，脚手架哦内重写方法：

const metaManager = createMetaManager(false, {
    meta: { tag: 'meta', nameless: true },
});

这样description标签才能显示正常。

脚手架内效果

路由守卫

最后，和Vue2.x一样，配置前置路由守卫：

// 全局前置守卫
router.beforeEach((to, from, next) => {
  if (to.meta.metaInfo) {
    store.commit("metaModule/CHANGE_META_INFO", to.meta.metaInfo)
  }
  next()
})

在路由内添加meta标签即可： js

  {
    path: '/',
    name: 'Home',
    meta: {
      metaInfo: {
        title: "在线工具箱-By Mintimate",
        description:"Mintimate的在线工具箱，致力于打造便民服务。为开发者、Minecraft游戏爱好者，创建方便的在线工具",
        keywords: "在线工具箱,便民根据,站点根据,开发者,开发者实用工具,IP查询,图片处理,Base64转码,字数统计,字符统计,MC服务器检测,Minecraft服务器检测",
      }
    },
    component: Home
  },

路由内配置

最终效果

当然，设置og标签也一样，Vue2.x演示，这里就不演示了哦。

END

到此，Vue网站vue-meta优化就讲到这里哦。

另外，Vue项目，提交sitemap.xml，也就是站点地图到搜索引擎也很重要哦。有机会试试SSR优化吧～～～

Vue项目如何使用vue-meta组件优化Meta标签

Meta标签

Vue-meta

Vue2.x

项目引入

VueX和脚手架

路由守卫

Demo

OG标签

Vue3.x

项目引入

VueX和脚手架

路由守卫

END