useSeoMeta

源文件
useSeoMeta composable 允许您以具有完全 TypeScript 支持的扁平对象形式定义网站的 SEO meta 标签。

这有助于您避免常见的错误，例如使用 name 而不是 property，以及拼写错误 - 超过 100 多个 meta 标签完全被类型化。

这是向您的网站添加 meta 标签的推荐方法，因为它对 XSS 安全并且具有完整的 TypeScript 支持。
在文档 > 4 X > 入门 > Seo Meta中阅读更多内容。

使用

app/app.vue
<script setup lang="ts">
useSeoMeta({
  title: 'My Amazing Site',
  ogTitle: 'My Amazing Site',
  description: 'This is my amazing site, let me tell you all about it.',
  ogDescription: 'This is my amazing site, let me tell you all about it.',
  ogImage: 'https://example.com/image.png',
  twitterCard: 'summary_large_image',
})
</script>

当插入响应式标签时，您应该使用 computed getter 语法 (() => value)

app/app.vue
<script setup lang="ts">
const title = ref('My title')

useSeoMeta({
  title,
  description: () => `This is a description for the ${title.value} page`,
})
</script>

参数

有超过 100 个参数。请参阅源代码中完整的参数列表.

在文档 > 4 X > 入门 > Seo Meta中阅读更多内容。

性能

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

为了获得更好的性能，您可以将您的 useSeoMeta 调用包装在仅服务器条件中，前提是 meta 标签不需要是响应式的

app/app.vue
<script setup lang="ts">
if (import.meta.server) {
  // These meta tags will only be added during server-side rendering
  useSeoMeta({
    robots: 'index, follow',
    description: 'Static description that does not need reactivity',
    ogImage: 'https://example.com/image.png',
    // other static meta tags...
  })
}

const dynamicTitle = ref('My title')
// Only use reactive meta tags outside the condition when necessary
useSeoMeta({
  title: () => dynamicTitle.value,
  ogTitle: () => dynamicTitle.value,
})
</script>

这之前使用了 useServerSeoMeta composable，但它已被弃用，推荐使用此方法。