Documentación offline Nuxt main
/

Meta Tags

main Documentación oficial Licencia MITDescargado el 2026-08-02

En esta página

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.

::tip Nuxt currently uses Unhead to manage your meta tags, but implementation details may change. ::

:read-more{to="/docs/4.x/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#

::code-group

```vue [Nuxt 2]

```vue [Nuxt 3]
<script setup lang="ts">
const title = ref('My App')
const description = ref('My App Description')

// This will be reactive when you change title/description above
useHead({
  title,
  meta: [{
    name: 'description',
    content: 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.

::code-group

```vue [Nuxt 2]

```vue [Nuxt 3]
<template>
  <div>
    <Head>
      <Title>My App</Title>
      <Meta
        name="description"
        content="My app description"
      />
    </Head>
    <!-- -->
  </div>
</template>

::

::important 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#

```vue [Nuxt 3 (Options API)]

```