useSeoMeta
useSeoMeta 组合式函数允许您使用完整的 TypeScript 支持将您网站的 SEO 元标签定义为一个扁平对象。
这可以帮助您避免常见的错误,例如使用 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 多个参数。请参阅源代码中的完整参数列表。