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

# Head Management

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

## `useHead` Composable

Within your `setup` function, you can call `useHead` 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:

```js
export default {
  setup () {
    useHead({
      meta: [
        { name: 'viewport', content: 'width=device-width, initial-scale=1, maximum-scale=1' }
      ],
      bodyAttrs: {
        class: 'test'
      }
    })
  }
}
```

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

```html{}[app.vue]
<template>
  <div>
    Hello World
    <Html :lang="dynamic > 50 ? 'en-GB' : 'en-US'">
      <Head>
        <Title>{{ dynamic }} title</Title>
        <Meta name="description" :content="`My page's ${dynamic} description`" />
        <Link rel="preload" href="/test.txt" as="script" />
        <Style type="text/css" :children="styleString" />
      </Head>
    </Html>

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

<script>
export default {
  data: () => ({ dynamic: 49, styleString: 'body { background-color: green; }' })
}
</script>
```

## Example: usage with definePageMeta

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

For example, to include the page title alongside your app name, first define your page title:

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

And then in your layout file:

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

useHead({
  title: computed(() => `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
			`You can customize the meta tags for your site through several different ways:`

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
refactor(nuxt3,bridge)!: rename `useMeta` to `useHead` (#4066) 2022-04-05 14:02:29 +00:00			Within your `setup` function, you can call `useHead` 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.
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
			```js
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			`export default {`
			`setup () {`
refactor(nuxt3,bridge)!: rename `useMeta` to `useHead` (#4066) 2022-04-05 14:02:29 +00:00			`useHead({`
docs(meta): add `viewport` example for `useMeta` (#1496) 2021-10-27 08:06:19 +00:00			`meta: [`
			`{ name: 'viewport', content: 'width=device-width, initial-scale=1, maximum-scale=1' }`
			`],`
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			`bodyAttrs: {`
			`class: 'test'`
			`}`
			`})`
			`}`
			`}`
			```

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: update meta-tags example (#1404) 2021-10-24 10:12:19 +00:00			```html{}[app.vue]
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>`
			`Hello World`
feat: add `<Html>` meta component (#1820) Co-authored-by: Sébastien Chopin <seb@nuxtjs.com> Co-authored-by: Pooya Parsa <pyapar@gmail.com> 2021-11-10 20:25:29 +00:00			`<Html :lang="dynamic > 50 ? 'en-GB' : 'en-US'">`
			`<Head>`
			`<Title>{{ dynamic }} title</Title>`
			<Meta name="description" :content="`My page's ${dynamic} description`" />
			`<Link rel="preload" href="/test.txt" as="script" />`
docs: add example of inlined css for `<Style>` component (#2910) 2022-01-26 11:58:51 +00:00			`<Style type="text/css" :children="styleString" />`
feat: add `<Html>` meta component (#1820) Co-authored-by: Sébastien Chopin <seb@nuxtjs.com> Co-authored-by: Pooya Parsa <pyapar@gmail.com> 2021-11-10 20:25:29 +00:00			`</Head>`
			`</Html>`
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
			`<button class="blue" @click="dynamic = Math.random() * 100">`
			`Click me`
			`</button>`
			`</div>`
			`</template>`

			`<script>`
			`export default {`
docs: add example of inlined css for `<Style>` component (#2910) 2022-01-26 11:58:51 +00:00			`data: () => ({ dynamic: 49, styleString: 'body { background-color: green; }' })`
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			`}`
			`</script>`
			```
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
			`For example, to include the page title alongside your app name, first define your page title:`

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

			`And then in your layout file:`

			```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({`
docs: example using `useMeta` with `definePageMeta` (#3552) 2022-03-08 18:02:10 +00:00			title: computed(() => `App Name - ${route.meta.title}`)
			`})`
			`</script>`
			```
docs: add links to examples (#4204) 2022-04-09 09:25:13 +00:00
			`:LinkExample{link="/examples/composables/use-head"}`