Meta Tags

You can customize the meta tags for your site through several different ways:

useMeta Composable

Within your setup() function you can call useMeta with an object of meta properties with keys corresponding to meta tags: title, base, script, style, meta and link, as well as htmlAttrs and bodyAttrs. Alternatively, you can pass a function returning the object for reactive metadata.

For example:

export default {
  setup () {
    useMeta({
      bodyAttrs: {
        class: 'test'
      }
    })
  }
}

head Component Property

If you would prefer to use the options syntax, you can do exactly the same thing within your component options with an object or function called head. For example:

export default {
  head: {
    script: [
      {
        async: true,
        src: 'https://myscript.com/script.js'
      }
    ]
  }
}

Note that head() does not have access to the component instance.

Meta Components

Nuxt provides <Title>, <Base>, <Script>, <Style>, <Meta>, <Link>, <Body> and <Head> components so that you can interact directly with your metadata within your component template.

Because these component names match native HTML elements, it is very important that they are capitalized in the template.

<Head> and <Body> can accept nested meta tags (for aesthetic reasons) but this has no effect on where the nested meta tags are rendered in the final HTML.

For example:

<template>
  <div>
    Hello World
    <Head :lang="dynamic > 50 ? 'en-GB' : 'en-US'">
      <Title>{{ dynamic }} title</Title>
      <Meta name="description" :content="`My page's ${dynamic} description`" />
      <Link rel="preload" href="/test.txt" as="script" />
    </Head>

    <button class="blue" @click="dynamic = Math.random() * 100">
      Click me
    </button>
  </div>
</template>

<script>
export default {
  data: () => ({ dynamic: 49 })
}
</script>
Edit this page on GitHub Updated at Fri, Oct 15, 2021