---
head.title: 'Nuxt 2 to Nuxt 3: Meta Tags'
head.titleTemplate: ''
---
# Meta Tags
Nuxt 3 provides several different ways to manage your meta tags.
1. Through your `nuxt.config`.
2. Through the `useHead` [composable](/guide/features/head-management)
3. Through [global meta components](/guide/features/head-management)
You can customize `title`, `titleTemplate`, `base`, `script`, `style`, `meta`, `link`, `htmlAttrs` and `bodyAttrs`.
::alert{icon=📦}
Nuxt currently uses [`vueuse/head`](https://github.com/vueuse/head) to manage your meta tags, but implementation details may change.
::
[Read more about meta tags](/guide/features/head-management).
## 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.)
1. If you need to access the component state with `head`, you should migrate to using `useHead`. You might also consider using the built-in meta-components.
### Example: `useHead`
::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]
<script setup>
const title = ref('My App')
const description = ref('My App Description')
// This will be reactive even you change title/description above
useHead({
title,
meta: [{
name: 'description',
content: description
}]
})
</script>
```
::
### Example: Built-in Meta-components
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>
</template>
```
::
::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.
::