useSeoMeta

ソース
useSeoMeta composable を使うと、サイトの SEO メタタグを TypeScript の完全なサポートを備えたフラットなオブジェクトとして定義できます。

これにより、property の代わりに name を使用するなどのよくある間違いや、100 を超えるメタタグが完全に型付けされているため、タイプミスを回避できます。

これは XSS に対して安全で、TypeScript の完全なサポートがあるため、サイトにメタタグを追加する推奨される方法です。
Docs > 4 X > Getting Started > Seo Meta で詳細をお読みください。

使用方法

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>

リアクティブなタグを挿入する場合は、計算済みゲッター構文 (() => 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 を超えるパラメーターがあります。詳細は以下を参照してください。ソースコード内のパラメーターの完全なリスト.

Docs > 4 X > Getting Started > Seo Meta で詳細をお読みください。

パフォーマンス

ほとんどの場合、検索エンジンのロボットは主に最初のページロードをスキャンするため、SEO メタタグはリアクティブである必要はありません。

パフォーマンスを向上させるために、メタタグがリアクティブである必要がない場合は、useSeoMeta の呼び出しをサーバーのみの条件で囲むことができます。

app/app.vue
<script setup lang="ts">
if (import.meta.server) {
  // These meta tags will only be added during server-side rendering
  useSeoMeta({
    robots: 'index, follow',
    description: 'Static description that does not need reactivity',
    ogImage: 'https://example.com/image.png',
    // other static meta tags...
  })
}

const dynamicTitle = ref('My title')
// Only use reactive meta tags outside the condition when necessary
useSeoMeta({
  title: () => dynamicTitle.value,
  ogTitle: () => dynamicTitle.value,
})
</script>

以前は useServerSeoMeta composable を使用していましたが、このアプローチが推奨されるようになったため、非推奨となりました。