Easy Vue.js SEO: How to Change Metadata with Vue-Meta

Struggling with SEO in your Vue.js single-page application (SPA)? The vue-meta library makes it easy to control your app's metadata dynamically. You can manage your web app's <head> content at the component level, which is important for search engine optimization (SEO). This article will explore using vue-meta for concise and logical metadata management.

What is Vue-Meta?

vue-meta is a Vue plugin that lets you manage your application's <head> metadata from individual components. This is super useful for SPAs, where dynamic metadata updates are crucial for SEO. Using vue-meta, you can change the <title>, <meta> tags, and even attributes of the <html> tag on the fly.

Prerequisites to Changing Metadata

Before diving in, make sure you have a basic understanding of HTML <head>, <title>, and <meta> tags. You should also know how to set up a Vue.js project using Vue CLI. This tutorial uses Node v15.8.0, npm v7.5.4, Vue v12.6.11, and vue-meta v2.4.0.

Step-by-Step: Using Vue-Meta for Dynamic SEO

Here's how to integrate vue-meta into your Vue.js project:

Install vue-meta: Open your terminal, navigate to your Vue project, and run:

npm install [email protected]

Bootstrap the Plugin: In your main.js file, import VueMeta and tell Vue to use it:

import Vue from 'vue'
import VueMeta from 'vue-meta'
import App from './App.vue'

Vue.use(VueMeta)

new Vue({
  render: h => h(App),
}).$mount('#app')

Integration with Vue Router: If you use vue-router, integrate vue-meta in router/index.js:

import Vue from 'vue'
import Router from 'vue-router'
import VueMeta from 'vue-meta'

Vue.use(Router)
Vue.use(VueMeta)

export default new Router({})

With these steps, dynamic vue meta title changes in your Vue apps become a breeze.

Customizing Vue-Meta Options

You can customize vue-meta's behavior. For example, NuxtJS renames the metaInfo property to head. Here's how to change the keyName in main.js:

import Vue from 'vue'
import VueMeta from 'vue-meta'
import App from './App.vue'

Vue.use(VueMeta, {
  keyName: 'head'
})

new Vue({
  render: h => h(App),
}).$mount('#app')

Check the vue-meta documentation for all available customization options.

Using MetaInfo to Populate Metadata

vue-meta lets you update the <head> tag in both parent and child components. Set a default title in your root component, and use titleTemplate to format titles from child components.

// src/App.vue
export default {
  name: 'App',
  metaInfo: {
    title: 'Default App Title',
    titleTemplate: '%s | vue-meta Example App'
  },
  // ...
}

This titleTemplate will generate:

<title>Default App Title | vue-meta Example App</title>

You can include other meta information such as charset, description, and viewport.


export default {
  name: 'App',
  metaInfo: {
    title: 'Default App Title',
    titleTemplate: '%s | vue-meta Example App',
    htmlAttrs: {
      lang: 'en-US'
    },
    meta: [
      { charset: 'utf-8' },
      { name: 'description', content: 'An example Vue application with vue-meta.' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' }
    ]
  },
  // ...
}

This will output:

<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="description" content="An example Vue application with vue-meta.">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Default App Title | vue-meta Example App</title>
  </head>
</html>

See the vue-meta API documentation for all the metaInfo properties you can use.

MetaInfo Behavior in Vue Components

Child components automatically merge their metadata with their parents. This lets you update the page's <head> information based on which components are active. The child component's title will override the parent's. You can disable the titleTemplate from a child component if desired.

If multiple child components are active, the last one mounted determines the page's metadata. Only duplicate metadata is overwritten by the child.

Enforcing MetaInfo Using VMID

The vmid property lets you control how metadata is resolved in your component tree. If two sets of metadata share the same vmid, the child component overrides the parent.

Here is how a parent component might look:

// Parent Component
{
  metaInfo: {
    meta: [
      { charset: 'utf-8' },
      {
        vmid: 'description',
        name: 'description',
        content: 'Parent description.'
      }
    ]
  }
}

And here is how a child component might look:

// Child Component
{
  metaInfo: {
    meta: [
      {
        vmid: 'description',
        name: 'description',
        content: 'Child description.'
      }
    ]
  }
}

This structure will generate the following output:

<meta name="description" content="Child description.">

Using a vmid, you can selectively overwrite parent meta tags from a child.

Conclusion

If you want simple control and dynamic updates for your Vue app's metadata, vue-meta is a great solution. Check out the official vue-meta documentation for more information on vue-meta SEO. If you want to learn more about Vue.js, check out the Vue.js topic page for more education.

Easy Vue.js SEO: How to Change Metadata with Vue-Meta

What is Vue-Meta?

Prerequisites to Changing Metadata

Step-by-Step: Using Vue-Meta for Dynamic SEO

Here's how to integrate vue-meta into your Vue.js project:

Install vue-meta: Open your terminal, navigate to your Vue project, and run:

npm install [email protected]

Bootstrap the Plugin: In your main.js file, import VueMeta and tell Vue to use it:

import Vue from 'vue'
import VueMeta from 'vue-meta'
import App from './App.vue'

Vue.use(VueMeta)

new Vue({
  render: h => h(App),
}).$mount('#app')

Integration with Vue Router: If you use vue-router, integrate vue-meta in router/index.js:

import Vue from 'vue'
import Router from 'vue-router'
import VueMeta from 'vue-meta'

Vue.use(Router)
Vue.use(VueMeta)

export default new Router({})

With these steps, dynamic vue meta title changes in your Vue apps become a breeze.

Customizing Vue-Meta Options

You can customize vue-meta's behavior. For example, NuxtJS renames the metaInfo property to head. Here's how to change the keyName in main.js:

import Vue from 'vue'
import VueMeta from 'vue-meta'
import App from './App.vue'

Vue.use(VueMeta, {
  keyName: 'head'
})

new Vue({
  render: h => h(App),
}).$mount('#app')

Check the vue-meta documentation for all available customization options.

Using MetaInfo to Populate Metadata

vue-meta lets you update the <head> tag in both parent and child components. Set a default title in your root component, and use titleTemplate to format titles from child components.

// src/App.vue
export default {
  name: 'App',
  metaInfo: {
    title: 'Default App Title',
    titleTemplate: '%s | vue-meta Example App'
  },
  // ...
}

This titleTemplate will generate:

<title>Default App Title | vue-meta Example App</title>

You can include other meta information such as charset, description, and viewport.


export default {
  name: 'App',
  metaInfo: {
    title: 'Default App Title',
    titleTemplate: '%s | vue-meta Example App',
    htmlAttrs: {
      lang: 'en-US'
    },
    meta: [
      { charset: 'utf-8' },
      { name: 'description', content: 'An example Vue application with vue-meta.' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' }
    ]
  },
  // ...
}

This will output:

<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="description" content="An example Vue application with vue-meta.">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Default App Title | vue-meta Example App</title>
  </head>
</html>

See the vue-meta API documentation for all the metaInfo properties you can use.

MetaInfo Behavior in Vue Components

If multiple child components are active, the last one mounted determines the page's metadata. Only duplicate metadata is overwritten by the child.

Enforcing MetaInfo Using VMID

The vmid property lets you control how metadata is resolved in your component tree. If two sets of metadata share the same vmid, the child component overrides the parent.

Here is how a parent component might look:

// Parent Component
{
  metaInfo: {
    meta: [
      { charset: 'utf-8' },
      {
        vmid: 'description',
        name: 'description',
        content: 'Parent description.'
      }
    ]
  }
}

And here is how a child component might look:

// Child Component
{
  metaInfo: {
    meta: [
      {
        vmid: 'description',
        name: 'description',
        content: 'Child description.'
      }
    ]
  }
}

This structure will generate the following output:

<meta name="description" content="Child description.">

Using a vmid, you can selectively overwrite parent meta tags from a child.

Easy Vue.js SEO: How to Change Metadata with Vue-Meta

What is Vue-Meta?

Prerequisites to Changing Metadata

Step-by-Step: Using Vue-Meta for Dynamic SEO

Customizing Vue-Meta Options

Using MetaInfo to Populate Metadata

MetaInfo Behavior in Vue Components

Enforcing MetaInfo Using VMID

Conclusion

Easy Vue.js SEO: How to Change Metadata with Vue-Meta

What is Vue-Meta?

Prerequisites to Changing Metadata

Step-by-Step: Using Vue-Meta for Dynamic SEO

Customizing Vue-Meta Options

Using MetaInfo to Populate Metadata

MetaInfo Behavior in Vue Components

Enforcing MetaInfo Using VMID

Conclusion

Related Posts