This is the 8th day of my participation in the First Challenge 2022. For details: First Challenge 2022.

Meta tags

Previous post: “Not included in your blog search engine? How to write Meta tags in a single page project like Vue?

Vue-meta tag is used this time. Meta tag is generated according to the route or the water content in the VUE.

SEO optimization, in Vue, the effect may not be very good, depending on whether the search engine supports dynamic crawling. Better SEO optimization would be to use SSR for DOM manipulation, or pre-render routes, etc. These will be discussed next time ~ ~ ~ (again dug a hole, “needle does not poke”.

Vue-meta

This time about meta generation, using vue-meta components:

Vue-meta is currently split into two branches (later Vue3 will become the default, next branch should be merged into the main branch) :

  • Ve2. X: ve2. X: ve2
  • Next: Equivalent to Alpha, currently being tested and refined to support vue 3.x

Which version do we talk about this time? Vue3 is about to become official, and this time of course…

Is the use of both versions of the talk ~ ~

Vue2.x

Vue2.x using vue-meta is very simple, there are no bugs (when using vue3. x… Boo-hoo, it’s all potholes, but… After all, we are still testing, and the documentation and project are not finalized).

The usage is very simple, according to the official documentation:

<template>
  ...
</template>

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

Render to a page:

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

But this method is a bit troublesome, can not write directly in the route?

The answer is yes.

Project introduction

First, we need to introduce vue-meta, first installing:

npm i vue-meta
Copy the code

VueX and scaffolding

Using VueX, add a global variable for in-page dynamic substitution:

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

At the same time, introduce:

To change the description and keywords in the meta within the page, let’s rewrite the function:

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
        }
      ]
    }
  },
Copy the code

Scaffold configuration file:

Routing guard

Finally, configure the front guard in the route:

// Global front-guard router. BeforeEach ((to, from, next) => {if (to.meta.metaInfo) {
    store.commit("metaModule/CHANGE_META_INFO", to.meta.metaInfo)
  }
  next()
})
Copy the code

Demo

Vue-meta is now used and added to the route:

Effect acceptance:

OG tag

Create an image: og:url from the VueX image: og:url

Then to modify the contents of the scaffold:

It is not a good idea to directly manipulate DOM elements in Vue. You can try other methods to optimize

The effect is also obvious:

Vue3.x

Vue3. X vuE-meta is still being debugged. It is not clear whether it is due to design or overall restructuring. In particular, THE description tag is not clear whether it is an official bug or not. I always thought it was my code, but later I saw a solution provided by Daigod in the issue of GitHub: Vue-meta issue#696

Project introduction

Same idea. Let’s use NPM and other package manager to install:

npm install vue-meta@next --save
Copy the code

VueX and scaffolding

After that, we set in VueX:

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

We refer to vue-meta in scaffolding main.js:

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

The key comes, scaffolding oh rewrite method:

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

Then the description tag will display properly.

Routing guard

Finally, as with vue2.x, configure the front route guard:

// Global front-guard
router.beforeEach((to, from, next) = > {
  if (to.meta.metaInfo) {
    store.commit("metaModule/CHANGE_META_INFO", to.meta.metaInfo)
  }
  next()
})
Copy the code

Add a meta tag to the route: js

{path: '/', name: 'Home', meta: {metaInfo: {title: "online toolkits -By minsyntax ", description:" Minsyntax online toolkits, dedicated to creating convenient services. Create a convenient online tool for developers and Minecraft fans. ", Keywords: "Online toolbox, convenience base, site base, developer, developer utility,IP query, Image processing,Base64 transcoding, Word count, character count,MC server detection,Minecraft server detection ",}}, Component: Home},Copy the code

The final result

The same goes for setting the og tag, as shown in Vue2. X.

END

To this, Vue website VUE-meta optimization here oh.

It is also important for Vue projects to submit sitemap. XML, or sitemap, to search engines. Try SSR optimization sometime