useSeoMeta
该 useSeoMeta 可组合函数允许你以扁平对象定义站点的 SEO 元标签，并提供完整的 TypeScript 支持。
Maschinelle Übersetzung ·0 % geprüft
这可以帮助你避免常见错误，例如使用 name 而不是 property，以及拼写错误 —— 提供对 100+ 元标签的完整类型支持。
这是向站点添加元标签的推荐方式，因为它是 XSS 安全的并且提供完整的 TypeScript 支持。
用法
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>在插入响应式标签时，应使用计算属性的 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 多个参数。请参阅 源代码中的完整参数列表。
性能
在大多数情况下，SEO 元标签不需要是响应式的，因为搜索引擎爬虫主要会扫描初始页面加载内容。
为了获得更好的性能，当元标签不需要是响应式时，你可以在仅服务器端的条件下包裹你的 useSeoMeta 调用：
app/app.vue
<script setup lang="ts">
if (import.meta.server) {
// Diese Meta-Tags werden nur beim serverseitigen Rendering hinzugefügt
useSeoMeta({
robots: 'index, follow',
description: 'Static description that does not need reactivity',
ogImage: 'https://example.com/image.png',
// weitere statische Meta-Tags ...
})
}
const dynamicTitle = ref('My title')
// Verwende reaktive Meta-Tags nur dann außerhalb der Bedingung, wenn es nötig ist
useSeoMeta({
title: () => dynamicTitle.value,
ogTitle: () => dynamicTitle.value,
})
</script>此处之前使用的是 useServerSeoMeta 可组合函数，但它已被弃用，建议改用这种方式。