Nuxt provides the `useHead` composable to add and customize the head properties of individual pages of your Nuxt app. It uses [@vueuse/head](https://github.com/vueuse/head) under the hood.
Application-wide configuration of the head metadata is possible through [nuxt.config](/api/configuration/nuxt-config#head), or by placing the `useHead` in the `app.vue` file.
The properties of `useHead` can be dynamic, accepting `ref`, `computed` and `reactive` properties. `meta` parameter can also accept a function returning an object to make the entire object reactive.
Configures dynamic template to customize the page title on an individual page.
-`title`
**Type**: `string`
Sets static page title on an individual page.
-`bodyAttrs`
**Type**: `Record<string, any>`
Sets attributes of the `<body>` tag. Each object property is mapped to the corresponding attribute.
-`htmlAttrs`
**Type**: `Record<string, any>`
Sets attributes of the `<html>` tag. Each object property is mapped to the corresponding attribute.
## Examples
### Customize Metadata
The example below changes the website's `title` and `description` using `meta` option of the `useHead` composable:
```vue
<scriptsetup>
const title = ref('My App')
const description = ref('My amazing Nuxt app')
useHead({
title,
meta: [
{
name: 'description',
content: description
}
]
})
</script>
```
### Add Dynamic Title
In the example below, `titleTemplate` is set either as a string with the `%s` placeholder or as a `function`, which allows greater flexibility in setting the page title dynamically for each route of your Nuxt app:
`nuxt.config` is also used as an alternative way of setting the page title. However, `nuxt.config` does not allow the page title to be dynamic. Therefore, it is recommended to use `titleTemplate` in the `app.vue` file to add a dynamic title, which is then applied to all routes of your Nuxt app.
### Add External CSS
The example below inserts Google Fonts using the `link` property of the `useHead` composable:
