2022-03-30 17:32:30 +00:00
# Meta Tags
Nuxt 3 provides several different ways to manage your meta tags.
1. Through your `nuxt.config` .
2023-07-07 16:24:09 +00:00
2. Through the [`useHead` ](/docs/api/composables/use-head ) [composable ](/docs/getting-started/seo-meta )
2022-11-16 10:04:28 +00:00
3. Through [global meta components ](/docs/getting-started/seo-meta )
2022-03-30 17:32:30 +00:00
2022-09-08 18:54:02 +00:00
You can customize `title` , `titleTemplate` , `base` , `script` , `noscript` , `style` , `meta` , `link` , `htmlAttrs` and `bodyAttrs` .
2022-03-30 17:32:30 +00:00
::alert{icon=📦}
Nuxt currently uses [`vueuse/head` ](https://github.com/vueuse/head ) to manage your meta tags, but implementation details may change.
::
2022-11-16 10:04:28 +00:00
[Read more about meta tags ](/docs/getting-started/seo-meta ).
2022-03-30 17:32:30 +00:00
## Migration
1. In your `nuxt.config` , rename `head` to `meta` . Consider moving this shared meta configuration into your `app.vue` instead. (Note that objects no longer have a `hid` key for deduplication.)
2023-07-07 16:24:09 +00:00
1. If you need to access the component state with `head` , you should migrate to using [`useHead` ](/docs/api/composables/use-head ) . You might also consider using the built-in meta-components.
2023-02-01 19:12:42 +00:00
1. If you need to use the Options API, there is a `head()` method you can use when you use `defineNuxtComponent` .
2022-03-30 17:32:30 +00:00
2023-07-07 16:24:09 +00:00
### Example: useHead
2022-03-30 17:32:30 +00:00
::code-group
```vue [Nuxt 2]
< script >
export default {
data: () => ({
title: 'My App',
description: 'My App Description'
})
head () {
return {
title: this.title,
meta: [{
hid: 'description',
name: 'description',
content: this.description
}]
}
}
}
< / script >
```
```vue [Nuxt 3]
2023-07-18 10:31:45 +00:00
< script setup lang = "ts" >
2022-03-30 17:32:30 +00:00
const title = ref('My App')
const description = ref('My App Description')
// This will be reactive even you change title/description above
2022-04-05 14:02:29 +00:00
useHead({
2022-03-30 17:32:30 +00:00
title,
meta: [{
name: 'description',
content: description
}]
})
< / script >
```
::
2022-08-13 07:27:04 +00:00
### Example: Built-in Meta-components
2022-03-30 17:32:30 +00:00
Nuxt 3 also provides meta components that you can use to accomplish the same task. While these components look similar to HTML tags, they are provided by Nuxt and have similar functionality.
::code-group
```vue [Nuxt 2]
< script >
export default {
head () {
return {
title: 'My App',
meta: [{
hid: 'description',
name: 'description',
content: 'My App Description'
}]
}
}
}
< / script >
```
```vue [Nuxt 3]
< template >
< div >
< Head >
< Title > My App< / Title >
< Meta name = "description" content = "My app description" / >
< / Head >
<!-- -->
< / div >
2022-04-06 05:56:08 +00:00
< / template >
2022-03-30 17:32:30 +00:00
```
::
::alert{icon=👉}
1. Make sure you use capital letters for these component names to distinguish them from native HTML elements (`< Title > ` rather than `<title>` ).
1. You can place these components anywhere in your template for your page.
::
2023-02-01 19:12:42 +00:00
### Example: Options API
```vue [Nuxt 3 (Options API)]
< script >
// if using options API `head` method you must use `defineNuxtComponent`
export default defineNuxtComponent({
head (nuxtApp) {
// `head` receives the nuxt app but cannot access the component instance
return {
meta: [{
name: 'description',
content: 'This is my page description.'
}]
}
}
})
< / script >
```
