---
title: "元标签"
description: "管理你的元标签，从 Nuxt 2 到 Nuxt 3。"
canonical_url: "https://nuxt.zhcndoc.com/docs/3.x/migration/meta"
---
# 元标签
> 管理你的元标签，从 Nuxt 2 到 Nuxt 3。
Nuxt 3 提供了几种管理元标签的方式：
1. 通过你的 `nuxt.config`。
2. 通过 [`useHead`](https://nuxt.zhcndoc.com/docs/3.x/api/composables/use-head) [组合式函数](https://nuxt.zhcndoc.com/docs/3.x/getting-started/seo-meta)
3. 通过[全局元组件](https://nuxt.zhcndoc.com/docs/3.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/3.x/getting-started/seo-meta"}
::
## 迁移
1. 在你的 `nuxt.config` 中，将 `head` 重命名为 `meta`。可以考虑将这个共享的元数据配置移到 `app.vue` 中。（请注意，对象不再有用于去重的 `hid` 键。）
2. 如果你需要通过 `head` 访问组件状态，则应迁移到使用 [`useHead`](https://nuxt.zhcndoc.com/docs/3.x/api/composables/use-head)。你也可以考虑使用内置的元组件。
3. 如果你需要使用 Options 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. 你可以将这些组件放置在页面模板中的任意位置。
::
### Options API
```vue [Nuxt 3 (Options API)]
<script>
// 如果使用 Options API 的 `head` 方法，必须使用 `defineNuxtComponent`
export default defineNuxtComponent({
head (nuxtApp) {
// `head` 接收 nuxt 应用实例，但无法访问组件实例
return {
meta: [{
name: 'description',
content: '这是我的页面描述。'
}],
}
},
})
</script>
```
## Sitemap
See the full [sitemap](https://nuxt.zhcndoc.com/sitemap.md) for all pages.