useSeoMeta
useSeoMeta composable 让您能够以扁平对象的形式定义站点的 SEO 元标签，并提供完整的 TypeScript 支持。
这有助于您避免常见的错误，例如使用 name 而不是 property，以及拼写错误 - 超过 100 多个元标签已完全类型化。
这是向您的站点添加元标签的推荐方式，因为它具有 XSS 安全性并提供完整的 TypeScript 支持。
用法
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>
当插入响应式标签时，您应该使用计算 getter 语法 (() => value)
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 个参数。请参阅源代码中的完整参数列表。
性能
在大多数情况下，SEO 元标签不需要是响应式的，因为搜索引擎机器人主要扫描初始页面加载。
为了获得更好的性能，当元标签不需要是响应式时，您可以将 useSeoMeta 调用包装在仅服务器条件下
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，但为了支持这种方法，它已被弃用。