---
title: "元标签"
description: "管理你的元标签，从 Nuxt 2 到 Nuxt 3。"
canonical_url: "https://nuxt.zhcndoc.com/docs/4.x/migration/meta"
---
# 元标签
> 管理你的元标签，从 Nuxt 2 到 Nuxt 3。
Nuxt 3 提供了几种不同的方式来管理你的元标签：
1. 通过你的 `nuxt.config`。
2. 通过 [`useHead`](https://nuxt.zhcndoc.com/docs/4.x/api/composables/use-head) [组合式函数](https://nuxt.zhcndoc.com/docs/4.x/getting-started/seo-meta)
3. 通过[全局元组件](https://nuxt.zhcndoc.com/docs/4.x/getting-started/seo-meta)
你可以自定义 `title`、`titleTemplate`、`base`、`script`、`noscript`、`style`、`meta`、`link`、`htmlAttrs` 和 `bodyAttrs`。
::tip
Nuxt 当前使用 [`Unhead`](https://github.com/unjs/unhead) 来管理你的元标签，但实现细节可能会改变。
::
::read-more{to="https://nuxt.zhcndoc.com/docs/4.x/getting-started/seo-meta"}
::
## 迁移
1. 在你的 `nuxt.config` 中，将 `head` 重命名为 `meta`。可以考虑将这个共享的元配置移到 `app.vue` 中。（请注意，对象不再有用于去重的 `hid` 键。）
2. 如果你需要通过 `head` 访问组件状态，则应迁移到使用 [`useHead`](https://nuxt.zhcndoc.com/docs/4.x/api/composables/use-head)。你也可以考虑使用内置的元组件。
3. 如果你需要使用选项式 API，可以在使用 `defineNuxtComponent` 时使用 `head()` 方法。
### useHead
::code-group
```vue [Nuxt 2]
```
```vue [Nuxt 3]
```
::
### 元组件
Nuxt 3 还提供了一些元组件，你可以使用它们来完成相同的任务。虽然这些组件看起来类似于 HTML 标签，但它们由 Nuxt 提供并具有相似的功能。
::code-group
```vue [Nuxt 2]
```
```vue [Nuxt 3]
My App
```
::
::important
1. 确保你对这些组件名称使用大写字母以将它们与原生 HTML 元素区分开（使用 `` 而不是 `<title>`）。
2. 你可以将这些组件放在页面模板中的任何位置。
::
### 选项式 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>
```
## Sitemap
See the full [sitemap](https://nuxt.zhcndoc.com/sitemap.md) for all pages.