useSeoMeta
useSeoMeta コンポーザブルを使用すると、サイトの SEO メタタグを、完全な TypeScript サポートを備えたフラットなオブジェクトとして定義できます。
これにより、property の代わりに name を使用したり、タイプミスをしたりするなどの一般的な間違いを回避するのに役立ちます。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>
リアクティブなタグを挿入する場合は、computed ゲッター構文 (() => value) を使用する必要があります。
app.vue
<script setup lang="ts">
const title = ref('My title')
useSeoMeta({
title,
description: () => `description: ${title.value}`
})
</script>
パラメーター
100 以上のパラメーターがあります。ソースコードのパラメーターの完全なリストを参照してください。