useSeoMeta
useSeoMeta コンポーザブルを使用すると、サイトの SEO メタタグをフラットなオブジェクトとして定義でき、完全な TypeScript サポートがあります。
これにより、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',
})リアクティブなタグを挿入する場合は、computed getter 構文 (() => 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 コンポーザブルを使用していましたが、このアプローチが推奨されるようになりました。
※このページは Nuxt.js 公式ドキュメントの翻訳ページ（非公式）です。
公式ドキュメントの該当ページはこちら：
https://nuxt.com/docs/3.x/api/composables/use-seo-meta