useSeoMeta
useSeoMeta 组合函数让您可以使用完整的 TypeScript 支持，将网站的 SEO 元标签定义为一个扁平对象。
这可以帮助您避免常见错误，例如使用 name 而不是 property，以及拼写错误——超过 100 个元标签都已完全类型化。
这是向您的网站添加元标签的推荐方法，因为它是 XSS 安全的，并且具有完整的 TypeScript 支持。
用法
app.vue
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',
})当插入具有反应性的标签时，您应该使用计算属性语法 (() => value)：
app.vue
const title = ref('My title')
useSeoMeta({
title,
description: () => `This is a description for the ${title.value} page`
})参数
有超过 100 个参数。请参阅源代码中的完整参数列表。
另请参阅 getting-started > seo-meta性能
在大多数情况下，SEO 元标签不需要是反应性的，因为搜索引擎机器人主要扫描初始页面加载。
为了更好的性能，当元标签不需要反应性时，您可以将 useSeoMeta 调用包装在仅服务器条件中：
app.vue
if (import.meta.server) {
// 这些元标签将仅在服务器端渲染期间添加
useSeoMeta({
robots: 'index, follow',
description: 'Static description that does not need reactivity',
ogImage: 'https://example.com/image.png',
// 其他静态元标签...
})
}
const dynamicTitle = ref('My title')
// 仅在必要时在条件之外使用反应性元标签
useSeoMeta({
title: () => dynamicTitle.value,
ogTitle: () => dynamicTitle.value,
})这以前使用的是 useServerSeoMeta 组合函数，但已被弃用，建议使用这种方法。