1. 配置与默认值
    2. 组合式API useHead
    3. 组合式API useSeoMeta
    4. 组件
    5. 实践

可以通过配置(head)，组合式API和组件这三种方式来提升Nuxt应用的SEO效果。

所谓SEO，一般是通过修改网页的Meta信息，比如标题、描述等，让搜索引擎能够精准了解网页内容，从而提升其索引质量。

配置与默认值

Nuxt默认设置了以下Meta信息

相当于nuxt.config.ts中的以下配置是默认的：

export default defineNuxtConfig({
  app: {
    head: {
      charset: 'utf-8',
      viewport: 'width=device-width, initial-scale=1',
    }
  }
})

也就是说，通过配置app.head，可以实现对Meta信息的修改。

app.head支持以下Meta字段：

interface MetaObject {
  title?: string
  titleTemplate?: string | ((title?: string) => string)
  templateParams?: Record<string, string | Record<string, string>>
  base?: Base
  link?: Link[]
  meta?: Meta[]
  style?: Style[]
  script?: Script[]
  noscript?: Noscript[];
  htmlAttrs?: HtmlAttributes;
  bodyAttrs?: BodyAttributes;
}

组合式API useHead

使用useHead组合式API，可以让你用编程和响应式的方式支持Meta信息的修改。

和其他所有组合式API一样，useHead只能在setup代码块和生命周期勾子（lifecycle hooks)中使用。

<script setup lang="ts">
useHead({
  title: 'My App',
  meta: [
    { name: 'description', content: 'My amazing site.' }
  ],
  bodyAttrs: {
    class: 'test'
  },
  script: [ { innerHTML: 'console.log(\'Hello world\')' } ]
})
</script>

如果属性值是动态的，推荐用useHeadSafe代替useHead来移除xss代码。

组合式API useSeoMeta

useSeoMeta主要用来设置社交Meta信息。这些信息，也可以在app.head.meta中配置。不过，使用useSeoMeta可以避免一些常见的拼写错误(支持Typescript类型检测）。

比如，在app.head.meta中这样配置：

export default defineNuxtConfig({
  app: {
    head: {
      meta: {
        property: 'og:title', content: '蜻蜓Nuxt3中文社区'
      }
    }
  }
})

等同于用useSeoMeta这样写：

<script setup lang="ts">
useSeoMeta({
  ogTitle: '蜻蜓Nuxt3中文社区'
})
</script>

大多数情况下，社交Meta信息并不需要在客户端变化。搜索引擎只会抓取服务端渲染时的Meta信息。所以，一般使用useServerSeoMeta来替代useSeoMeta。

组件

Nuxt也提供了Meta相关的组件，可以在模板中使用。比如<Title>, <Meta>, <Head>,<Body>, <Link>, <Style>等。

<Head>和<Body>可以嵌套其他组件。

<script setup>
const title = ref('Hello World')
</script>

<template>
  <div>
    <Head>
      <Title>{{ title }}</Title>
      <Meta name="description" :content="title" />
      <Style type="text/css" children="body { background-color: green; }" />
    </Head>

    <h1>{{ title }}</h1>
  </div>
</template>

实践

app.head比较适合全局的，静态不变的Meta信息配置。

useHead和useHeadSafe适合在每个页面单独使用。

useSeoMeta和useServerSeoMeta适合在入口文件app.vue中使用以全局地修改整个应用的社交Meta信息。

组件方式看个人爱好，一般不推荐使用。