Nuxt 官网地址：[https://nuxt.com/](https://nuxt.com/) # SEO 和 Meta Nuxt 可以通过 3 种方式提高 Nuxt 应用程序的搜索引擎优化： - 强大的头部配置`nuxt.config` - 组合式函数`useHead` - 组件`Head`、`Title`、`Meta`等 ## 默认值 在开箱即用的情况下，Nuxt 提供了合理的默认值，如： - `charset: utf-8` - `viewport: width=device-width, initial-scale=1` 如果需要，可以覆盖这些默认值，还可以设置 title 和 meta，如下代码示例： ```typescript // nuxt.config.ts export default defineNuxtConfig({ app: { head: { charset: "utf-8", viewport: "width=device-width, initial-scale=1", title: "Nuxt3学习实践", meta: [ name: "description", content: "菜鸟小白nuxt3从入门到精通，边理论边实践", 上面的代码运行结果可以通过在浏览器中查看网页源代码。 在`nuxt.config.ts`中提供`app.head`属性允许自定义整个应用程序的`head`。 > **缺点**：这种方式无法使用响应式数据。 > 如果需要，推荐在 app.vue 或者在页面中使用`useHead`组合式函数。 ## useHead `useHead`组合式函数允许我们通过[Unhead](https://unhead.unjs.io/)以编程和响应式的方式管理页面的`head`标签。 与所有组合式函数一样，它只能用在组件的`setup`函数和生命周期钩子中。 ```vue // app.vue 我们建议您查看[useHead](https://nuxt.com/docs/api/composables/use-head)和[useHeadSafe](https://nuxt.com/docs/api/composables/use-head-safe)组件。 ## useSeoMeta 和 useServerSeoMeta 通过`useSeoMeta`和`useServerSeoMeta`组合式函数，可以将网站的 SEO 元标签定义为一个完全支持 TypeScript 的扁平对象。 这可以帮助您避免错别字和常见错误，例如使用`name`而不是`property`。 ```vue // pages/about.vue 了解更多关于[useSeoMeta](https://nuxt.com/docs/api/composables/use-seo-meta)和[useServerSeoMeta](https://nuxt.com/docs/api/composables/use-server-seo-meta)可组合项的信息。 ## Components Nuxt 提供了` ## Meta 对象数据类型格式 以下是用于`useHead`、`app.head`和组件的非响应式类型。 ```typescript interface MetaObject { title?: string; titleTemplate?: string | ((title?: string) => string); templateParams?: Record>; base?: Base; link?: Link[]; meta?: Meta[]; style?: Style[]; script?: Script[]; noscript?: Noscript[]; htmlAttrs?: HtmlAttributes; bodyAttrs?: BodyAttributes; ## 特性 ### 响应式 Reactivity 所有属性都支持响应式，包括 computed、getters 和 reactive。 > **建议** > computed 建议使用 `getters(() => value)` 而不是`computed(() => value)`。 - useHead 响应式应用 ```vue - useSeoMeta 响应式应用 ```vue - 标签组件响应式应用 ```vue ### 标题模板 Title Template 可以使用`titleTemplate`选项为自定义网站标题提供一个动态模板，例如，在每个页面的标题中添加网站名称。 `titleTemplate`可以是一个字符串（其中`%s`被`title`属性的值替换），也可以是一个函数。 如果使用函数（完全控制），则不能在`nuxt.config`中设置，建议在`app.vue`文件中设置，它将适用于网站的所有页面： ```vue // app.vue 现在，每个页面标题的后面都增加了 ` - www.51blog.xyz`。 ### Body Tags 可以在适用的标记上增加 tagPosition 选项，将它们追加到页面的不同位置。 tagPosition 可选值： - head：将标记添加到页面的 `` 标签内； - bodyOpen：将标记添加到页面的 `` 标签的开始； - bodyClose：将标记添加到页面的 `` 标签的末尾； ```vue ## 示例 Examples ### definePageMeta 在`pages/`目录中，您可以使用`definePageMeta`和`useHead`来设置基于当前路由的元数据。 例如，可以首先设置当前页面的标题（这是在构建时通过宏提取的，因此无法动态设置）： ```vue 然后在布局文件中，您可以使用之前设置的路由元数据（Route Meta）： ```vue ### 动态设置标题 在下面的示例中，`titleTemplate`既可以设置为带有`%s`占位符的字符串，也可以设置为函数，这样就可以为 Nuxt 应用程序的每个路由动态设置页面标题，具有更大的灵活性： ```vue `nuxt.config`也是设置页面标题的另一种方法。但是，`nuxt.config`不允许页面标题是动态的。因此，建议在`app.vue`文件中使用`titleTemplate`添加动态标题，然后将其应用于 Nuxt 应用程序的所有路由。 ### 动态添加外部 CSS - 使用`useHead`组合式函数的 link 属性： ```vue - 使用组件来启用谷歌字体 ```vue