---
title: SEO and Meta
description: Improve your Nuxt app's SEO with powerful head config, composables and components.
navigation.icon: i-ph-file-search
---
Nuxt head tag management is powered by [Unhead](https://unhead.unjs.io). It provides sensible defaults, several powerful composables
and numerous configuration options to manage your app's head and SEO meta tags.
## Nuxt Config
Providing an [`app.head`](/docs/api/nuxt-config#head) property in your [`nuxt.config.ts`](/docs/guide/directory-structure/nuxt-config) allows you to statically customize the head for your entire app.
::important
This method does not allow you to provide reactive data. We recommend to use `useHead()` in `app.vue`.
::
It's good practice to set tags here that won't change such as your site title default, language and favicon.
```ts twoslash [nuxt.config.ts]
export default defineNuxtConfig({
app: {
head: {
title: 'Nuxt', // default fallback title
htmlAttrs: {
lang: 'en',
},
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
]
}
}
})
```
You can also provide any of the keys listed below in [Types](#types).
### Defaults Tags
Some tags are provided by Nuxt by default to ensure your website works well out of the box.
- `viewport`: `width=device-width, initial-scale=1`
- `charset`: `utf-8`
While most sites won't need to override these defaults, you can update them using the keyed shortcuts.
```ts twoslash [nuxt.config.ts]
export default defineNuxtConfig({
app: {
head: {
// update Nuxt defaults
charset: 'utf-16',
viewport: 'width=device-width, initial-scale=1, maximum-scale=1',
}
}
})
```
## `useHead`
The [`useHead`](/docs/api/composables/use-head) composable function supports reactive input, allowing you to manage your head tags programmatically.
```vue twoslash [app.vue]
```
We recommend to take a look at the [`useHead`](/docs/api/composables/use-head) and [`useHeadSafe`](/docs/api/composables/use-head-safe) composables.
## `useSeoMeta`
The [`useSeoMeta`](/docs/api/composables/use-seo-meta) composable lets you define your site's SEO meta tags as an object with full type safety.
This helps you avoid typos and common mistakes, such as using `name` instead of `property`.
```vue twoslash [app.vue]
```
:read-more{to="/docs/api/composables/use-seo-meta"}
## Components
While using [`useHead`](/docs/api/composables/use-head) is recommended in all cases, you may have a personal preference for defining your head tags in your template using components.
Nuxt provides the following components for this purpose: `