v3.16
Nuxt on GitHub

useSeoMeta

源代码
useSeoMeta 组合式 API 允许您以扁平对象的方式定义站点的 SEO 元标签，并提供完整的 TypeScript 支持。

这可以帮助您避免常见错误，例如使用 name 而不是 property，以及拼写错误——支持超过 100 多个元标签的完整类型定义。

这是为您的站点添加元标签的推荐方式，因为它是防 XSS 攻击的，并且具有完整的 TypeScript 支持。
阅读更多 Docs > Getting Started > Seo Meta.

使用方法

app.vue
<script setup lang="ts">
useSeoMeta({
  title: '我的精彩站点',
  ogTitle: '我的精彩站点',
  description: '这是我的精彩站点，让我向您介绍一下。',
  ogDescription: '这是我的精彩站点，让我向您介绍一下。',
  ogImage: 'https://example.com/image.png',
  twitterCard: 'summary_large_image',
})
</script>

当插入响应式的标签时，您应该使用计算属性的 getter 语法（() => value）：

app.vue
<script setup lang="ts">
const title = ref('我的标题')

useSeoMeta({
  title,
  description: () => `这是 ${title.value} 页面的描述`
})
</script>

参数

支持超过 100 个参数。请查看源代码中的完整参数列表。

阅读更多 Docs > Getting Started > Seo Meta.

性能

在大多数情况下，SEO 元标签不需要是响应式的，因为搜索引擎机器人主要扫描初始页面加载。

为了获得更好的性能，当元标签不需要响应式时，您可以将 useSeoMeta 调用包装在仅限服务器的条件中：

app.vue
<script setup lang="ts">
if (import.meta.server) {
  // 这些元标签仅在服务端渲染期间添加
  useSeoMeta({
    robots: 'index, follow',
    description: '无需响应式的静态描述',
    ogImage: 'https://example.com/image.png',
    // 其他静态元标签...
  })
}

const dynamicTitle = ref('我的标题')
// 仅在需要时在条件外使用响应式元标签
useSeoMeta({
  title: () => dynamicTitle.value,
  ogTitle: () => dynamicTitle.value,
})
</script>

之前使用的是 useServerSeoMeta 组合式 API，但它已被弃用，推荐使用上述方法。