v3.16
Nuxt on GitHub

Meta Tags

Manage your meta tags, from Nuxt 2 to Nuxt 3.

Nuxt 3 provides several different ways to manage your meta tags:

  1. Through your nuxt.config.
  2. Through the useHead composable
  3. Through global meta components

You can customize title, titleTemplate, base, script, noscript, style, meta, link, htmlAttrs and bodyAttrs.

Nuxt currently uses Unhead to manage your meta tags, but implementation details may change.
Read more in Docs > Getting Started > Seo Meta.

Migration

  1. In your nuxt.config, rename head to meta. Consider moving this shared meta configuration into your app.vue instead. (Note that objects no longer have a hid key for deduplication.)
  2. If you need to access the component state with head, you should migrate to using useHead . You might also consider using the built-in meta-components.
  3. If you need to use the Options API, there is a head() method you can use when you use defineNuxtComponent.

useHead

<script>
export default {
  data: () => ({
    title: 'My App',
    description: 'My App Description'
  })
  head () {
    return {
      title: this.title,
      meta: [{
        hid: 'description',
        name: 'description',
        content: this.description
      }]
    }
  }
}
</script>

Meta-components

Nuxt 3 also provides meta components that you can use to accomplish the same task. While these components look similar to HTML tags, they are provided by Nuxt and have similar functionality.

<script>
export default {
  head () {
    return {
      title: 'My App',
      meta: [{
        hid: 'description',
        name: 'description',
        content: 'My App Description'
      }]
    }
  }
}
</script>
  1. Make sure you use capital letters for these component names to distinguish them from native HTML elements (<Title> rather than <title>).
  2. You can place these components anywhere in your template for your page.

Options API

Nuxt 3 (Options API)
<script>
// if using options API `head` method you must use `defineNuxtComponent`
export default defineNuxtComponent({
  head (nuxtApp) {
    // `head` receives the nuxt app but cannot access the component instance
    return {
      meta: [{
        name: 'description',
        content: 'This is my page description.'
      }]
    }
  }
})
</script>