Nuxt/docs/content/2.guide/2.features/4.head-management.md

# Head Management

Out-of-the-box, Nuxt provides good default values for `charset` and `viewport` meta tags, but you can override these if you need to, as well as customize other meta tags for your site in several different ways.

:ReadMore{link="/api/configuration/nuxt.config#head"}

## `useHead` Composable

Within your `setup` function, you can call `useHead` with an object of meta properties with keys corresponding to meta tags: `title`, `titleTemplate`, `base`, `script`, `style`, `meta` and `link`, as well as `htmlAttrs` and `bodyAttrs`. There are also two shorthand properties, `charset` and `viewport`, which set the corresponding meta tags. Alternatively, you can pass a function returning the object for reactive metadata.

For example:

```vue
<script setup>
useHead({
  titleTemplate: 'My App - %s', // or, title => `My App - ${title}`
  viewport: 'width=device-width, initial-scale=1, maximum-scale=1',
  charset: 'utf-8',
  meta: [
    { name: 'description', content: 'My amazing site.' }
  ],
  bodyAttrs: {
    class: 'test'
  }
})
</script>
```

::ReadMore{link="/api/composables/use-head"}
::

## Meta Components

Nuxt provides `<Title>`, `<Base>`, `<Script>`, `<Style>`, `<Meta>`, `<Link>`, `<Body>`, `<Html>` and `<Head>` components so that you can interact directly with your metadata within your component's 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:

<!-- @case-police-ignore html -->

```vue{}[app.vue]
<script setup>
const title = ref('Hello World')
</script>

<template>
  <div>
    <Head>
      <Title>{{ title }}</Title>
      <Meta name="description" :content="title" />
      <Style type="text/css" children="body { background-color: green; }" />
    </Head>

    <h1>{{ title }}</h1>
  </div>
</template>
```

## Example: usage with definePageMeta

You can use `definePageMeta` along with `useHead` to set metadata based on the current route.

For example, you can first set the current page title (this is extracted at build time via a macro, so it can't be set dynamically):

```vue{}[pages/some-page.vue]
<script setup>
definePageMeta({
  title: 'Some Page'
})
</script>
```

And then in your layout file, you might use the route's metadata you have previously set:

```vue{}[layouts/default.vue]
<script setup>
const route = useRoute()

useHead({
  meta: [{ name: 'og:title', content: `App Name - ${route.meta.title}` }]
})
</script>
```

:LinkExample{link="/examples/composables/use-head"}
docs: update sitemap (#4063) Co-authored-by: Sébastien Chopin <seb@nuxtjs.com> Co-authored-by: pooya parsa <pyapar@gmail.com> 2022-04-06 05:56:08 +00:00			`# Head Management`
feat: `@nuxt/meta` module for head rendering (#179) Co-authored-by: Anthony Fu <hi@antfu.me> Co-authored-by: Pooya Parsa <pyapar@gmail.com> 2021-07-15 11:28:04 +00:00
docs: fix and improve multiple sections (#4396) 2022-04-16 13:53:36 +00:00			Out-of-the-box, Nuxt provides good default values for `charset` and `viewport` meta tags, but you can override these if you need to, as well as customize other meta tags for your site in several different ways.
feat(nuxt, bridge): support `titleTemplate`, `viewport` and `charset` for `useHead` (#4221) 2022-04-11 09:03:31 +00:00
			`:ReadMore{link="/api/configuration/nuxt.config#head"}`
feat: `@nuxt/meta` module for head rendering (#179) Co-authored-by: Anthony Fu <hi@antfu.me> Co-authored-by: Pooya Parsa <pyapar@gmail.com> 2021-07-15 11:28:04 +00:00
refactor(nuxt3,bridge)!: rename `useMeta` to `useHead` (#4066) 2022-04-05 14:02:29 +00:00			## `useHead` Composable
feat: `@nuxt/meta` module for head rendering (#179) Co-authored-by: Anthony Fu <hi@antfu.me> Co-authored-by: Pooya Parsa <pyapar@gmail.com> 2021-07-15 11:28:04 +00:00
feat(nuxt, bridge): support `titleTemplate`, `viewport` and `charset` for `useHead` (#4221) 2022-04-11 09:03:31 +00:00			Within your `setup` function, you can call `useHead` with an object of meta properties with keys corresponding to meta tags: `title`, `titleTemplate`, `base`, `script`, `style`, `meta` and `link`, as well as `htmlAttrs` and `bodyAttrs`. There are also two shorthand properties, `charset` and `viewport`, which set the corresponding meta tags. Alternatively, you can pass a function returning the object for reactive metadata.
feat: `@nuxt/meta` module for head rendering (#179) Co-authored-by: Anthony Fu <hi@antfu.me> Co-authored-by: Pooya Parsa <pyapar@gmail.com> 2021-07-15 11:28:04 +00:00
			`For example:`
chore(docs): add code format using markdownlint (#1498) (#1556) 2021-10-29 11:26:01 +00:00
feat(nuxt, bridge): support `titleTemplate`, `viewport` and `charset` for `useHead` (#4221) 2022-04-11 09:03:31 +00:00			```vue
			`<script setup>`
			`useHead({`
			titleTemplate: 'My App - %s', // or, title => `My App - ${title}`
			`viewport: 'width=device-width, initial-scale=1, maximum-scale=1',`
			`charset: 'utf-8',`
			`meta: [`
			`{ name: 'description', content: 'My amazing site.' }`
			`],`
			`bodyAttrs: {`
			`class: 'test'`
feat: `@nuxt/meta` module for head rendering (#179) Co-authored-by: Anthony Fu <hi@antfu.me> Co-authored-by: Pooya Parsa <pyapar@gmail.com> 2021-07-15 11:28:04 +00:00			`}`
feat(nuxt, bridge): support `titleTemplate`, `viewport` and `charset` for `useHead` (#4221) 2022-04-11 09:03:31 +00:00			`})`
			`</script>`
feat: `@nuxt/meta` module for head rendering (#179) Co-authored-by: Anthony Fu <hi@antfu.me> Co-authored-by: Pooya Parsa <pyapar@gmail.com> 2021-07-15 11:28:04 +00:00			```

docs: update sitemap (#4063) Co-authored-by: Sébastien Chopin <seb@nuxtjs.com> Co-authored-by: pooya parsa <pyapar@gmail.com> 2022-04-06 05:56:08 +00:00			`::ReadMore{link="/api/composables/use-head"}`
			`::`

feat: `@nuxt/meta` module for head rendering (#179) Co-authored-by: Anthony Fu <hi@antfu.me> Co-authored-by: Pooya Parsa <pyapar@gmail.com> 2021-07-15 11:28:04 +00:00			`## Meta Components`

docs: improve various sections (#2040) 2021-11-21 12:31:44 +00:00			Nuxt provides `<Title>`, `<Base>`, `<Script>`, `<Style>`, `<Meta>`, `<Link>`, `<Body>`, `<Html>` and `<Head>` components so that you can interact directly with your metadata within your component's template.
feat: `@nuxt/meta` module for head rendering (#179) Co-authored-by: Anthony Fu <hi@antfu.me> Co-authored-by: Pooya Parsa <pyapar@gmail.com> 2021-07-15 11:28:04 +00:00
			`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:`

chore(docs): setup `case-police` guard (#4065) * chore: setup `case-police` guard * chore: fix cases * chore: upgrade deps 2022-04-04 10:56:10 +00:00			`<!-- @case-police-ignore html -->`

docs: simplify example of Head components (#4506) 2022-04-21 14:58:43 +00:00			```vue{}[app.vue]
			`<script setup>`
			`const title = ref('Hello World')`
			`</script>`

feat: `@nuxt/meta` module for head rendering (#179) Co-authored-by: Anthony Fu <hi@antfu.me> Co-authored-by: Pooya Parsa <pyapar@gmail.com> 2021-07-15 11:28:04 +00:00			`<template>`
			`<div>`
docs: simplify example of Head components (#4506) 2022-04-21 14:58:43 +00:00			`<Head>`
			`<Title>{{ title }}</Title>`
			`<Meta name="description" :content="title" />`
			`<Style type="text/css" children="body { background-color: green; }" />`
			`</Head>`

			`<h1>{{ title }}</h1>`
feat: `@nuxt/meta` module for head rendering (#179) Co-authored-by: Anthony Fu <hi@antfu.me> Co-authored-by: Pooya Parsa <pyapar@gmail.com> 2021-07-15 11:28:04 +00:00			`</div>`
			`</template>`
			```
docs: example using `useMeta` with `definePageMeta` (#3552) 2022-03-08 18:02:10 +00:00
			`## Example: usage with definePageMeta`

refactor(nuxt3,bridge)!: rename `useMeta` to `useHead` (#4066) 2022-04-05 14:02:29 +00:00			You can use `definePageMeta` along with `useHead` to set metadata based on the current route.
docs: example using `useMeta` with `definePageMeta` (#3552) 2022-03-08 18:02:10 +00:00
feat(nuxt, bridge): support `titleTemplate`, `viewport` and `charset` for `useHead` (#4221) 2022-04-11 09:03:31 +00:00			`For example, you can first set the current page title (this is extracted at build time via a macro, so it can't be set dynamically):`
docs: example using `useMeta` with `definePageMeta` (#3552) 2022-03-08 18:02:10 +00:00
			```vue{}[pages/some-page.vue]
			`<script setup>`
			`definePageMeta({`
			`title: 'Some Page'`
			`})`
			`</script>`
			```

docs: fix and improve multiple sections (#4396) 2022-04-16 13:53:36 +00:00			`And then in your layout file, you might use the route's metadata you have previously set:`
docs: example using `useMeta` with `definePageMeta` (#3552) 2022-03-08 18:02:10 +00:00
			```vue{}[layouts/default.vue]
			`<script setup>`
			`const route = useRoute()`

refactor(nuxt3,bridge)!: rename `useMeta` to `useHead` (#4066) 2022-04-05 14:02:29 +00:00			`useHead({`
feat(nuxt, bridge): support `titleTemplate`, `viewport` and `charset` for `useHead` (#4221) 2022-04-11 09:03:31 +00:00			meta: [{ name: 'og:title', content: `App Name - ${route.meta.title}` }]
docs: example using `useMeta` with `definePageMeta` (#3552) 2022-03-08 18:02:10 +00:00			`})`
			`</script>`
			```
docs: add links to examples (#4204) 2022-04-09 09:25:13 +00:00
			`:LinkExample{link="/examples/composables/use-head"}`