Nuxt 中 useSeoMeta 与 useHead 的区别

在 Nuxt 3 中，页面标题和 SEO 元信息可以通过 useSeoMeta() 或 useHead() 设置。两者功能有重叠，但定位不同：useSeoMeta() 专注于 SEO 元标签，useHead() 则用于管理整个 HTML <head>。

useHead 可以设置页面标题吗？

可以。useHead() 能设置 title、meta、link、script 等内容：

useHead({
  title: '手冲咖啡指南',
  meta: [
    {
      name: 'description',
      content: '介绍手冲咖啡的器具与冲煮方法。',
    },
  ],
  link: [
    {
      rel: 'canonical',
      href: 'https://example.com/coffee',
    },
  ],
})

Nuxt 会根据配置生成对应的 <head> 内容。

useSeoMeta 是什么？

useSeoMeta() 是专门设置 SEO 和社交分享元信息的接口。它使用更直观的字段名，也提供类型提示：

useSeoMeta({
  title: '手冲咖啡指南',
  description: '介绍手冲咖啡的器具与冲煮方法。',
  ogTitle: '手冲咖啡指南',
  ogDescription: '新手也能看懂的冲煮指南。',
  ogType: 'article',
  twitterCard: 'summary',
})

例如，description 对应普通描述元标签，ogTitle 对应 Open Graph 标题，twitterCard 对应 Twitter/X 卡片类型。

两者的主要区别

对比项	useSeoMeta()	useHead()
主要用途	设置 SEO、社交分享元信息	管理整个 <head>
页面标题	支持	支持
Meta 标签	SEO 常用字段	可以设置任意 meta 标签
Canonical 链接	不适合直接管理	支持
JSON-LD 脚本	不适合直接管理	支持
使用特点	字段语义明确，适合常见 SEO 配置	灵活，适合通用 head 配置

实际项目中怎么选？

简单页面可以只用 useSeoMeta()：

useSeoMeta({
  title: '产品介绍',
  description: '了解产品功能与使用方式。',
})

如果还需要设置 canonical、图标、JSON-LD 或其他 <head> 内容，可以配合 useHead()：

<script setup lang="ts">
const title = '手冲咖啡指南'
const description = '介绍手冲咖啡的器具与冲煮方法。'
const url = 'https://example.com/coffee'

useSeoMeta({
  title,
  description,
  ogTitle: title,
  ogDescription: description,
  ogUrl: url,
  ogType: 'article',
})

useHead({
  link: [{ rel: 'canonical', href: url }],
  script: [
    {
      type: 'application/ld+json',
      innerHTML: JSON.stringify({
        '@context': 'https://schema.org',
        '@type': 'Article',
        headline: title,
        description,
        mainEntityOfPage: url,
      }),
    },
  ],
})
</script>

总结

useHead() 当然可以设置 title ，也能设置 SEO 元信息；useSeoMeta() 则是为 SEO 字段设计的便捷接口。常见做法是用 useSeoMeta() 设置标题、描述和社交分享信息，用 useHead() 设置 canonical、JSON-LD 等通用内容。两者可以在同一页面配合使用。