はじめに：useSeoMeta がもたらすメリットと解決できる課題

Nuxt での SEO 対策は、検索エンジンに正しくページ情報を伝えるために不可欠です。useSeoMeta は、SEO に必要なメタタグを簡潔かつ型安全に管理できるコンポーザブルであり、これにより以下のような課題を解決します。

• 複雑なメタタグの記述ミスやタイプミスを防止
• TypeScript による補完と型チェックで開発効率向上
• SSR（サーバーサイドレンダリング）と CSR（クライアントサイドレンダリング）両対応のメタタグ管理
• 動的なタイトルや説明文のリアクティブな更新を容易に実装

これらにより、SEO の基本要件を満たしつつ、保守性の高いコードを書くことが可能になります。

まず結論：useSeoMeta の要点まとめ

• 型安全で豊富なメタタグ対応：100以上のメタタグが型定義されており、name と property の混同などを防げる
• リアクティブ対応：ref や computed を使った動的なメタタグ設定が可能
• SSR と CSR の両方に対応：サーバー専用の静的メタタグとクライアントで動的に変わるメタタグを分けて管理できる
• パフォーマンス最適化が可能：不要なリアクティブ処理を避けるためにサーバー側のみで設定することも推奨される
• XSS 対策済み：安全にメタタグを挿入できるためセキュリティ面でも安心

いつ使うべきか？使わない方がよいケースは？

使うべきケース

• ページごとに異なるタイトルや説明文を設定したいとき
• SNS シェア用の Open Graph や Twitter Card のメタタグを管理したいとき
• TypeScript を活用して安全にメタタグを扱いたいとき
• SSR で初期 HTML に正しいメタ情報を埋め込みたいとき
• 動的に変わるページ情報に応じてメタタグを更新したいとき

使わない方がよいケース

• SEO メタタグが完全に静的で、変更の必要がない場合（単純な静的サイトなど）
• メタタグの管理を外部サービスや CMS に完全に任せている場合
• クライアントサイドでのみ動的にメタタグを操作したいが、SSR は不要な場合（ただし推奨はされない）

実務でよくあるユースケースとサンプルコード

1. ページごとに異なるタイトルと説明文を設定する

import { ref } from 'vue'

const pageTitle = ref('トップページ')
const pageDescription = ref('Nuxt で作る最高のサイトへようこそ')

useSeoMeta({
  title: pageTitle,
  description: pageDescription,
  ogTitle: pageTitle,
  ogDescription: pageDescription,
  twitterCard: 'summary_large_image',
})

動的に変わるタイトルや説明文を ref で管理し、リアクティブにメタタグを更新しています。

2. SSR 時のみ静的なメタタグを設定し、CSR で動的更新を分離する

if (import.meta.server) {
  useSeoMeta({
    robots: 'index, follow',
    description: '静的な説明文（SSR 時のみ）',
    ogImage: 'https://example.com/static-image.png',
  })
}

const dynamicTitle = ref('動的タイトル')
useSeoMeta({
  title: () => dynamicTitle.value,
  ogTitle: () => dynamicTitle.value,
})

パフォーマンス向上のため、静的なメタタグは SSR 時のみ設定し、動的なものはクライアント側でも更新可能にしています。

3. SNS シェア用の Open Graph と Twitter Card を充実させる

useSeoMeta({
  title: 'Nuxt 公式サイト',
  description: 'Nuxt の公式ドキュメントと最新情報',
  ogTitle: 'Nuxt 公式サイト',
  ogDescription: 'Nuxt の公式ドキュメントと最新情報をお届けします。',
  ogImage: 'https://nuxtjs.org/og-image.png',
  twitterCard: 'summary_large_image',
  twitterSite: '@nuxt_js',
})

SNS での見栄えを良くするために、Open Graph と Twitter Card のメタタグを適切に設定しています。

よくある落とし穴・注意点

1. SSR と CSR のメタタグの同期問題

useSeoMeta は SSR で初期メタタグを生成し、CSR でリアクティブに更新できますが、サーバーとクライアントで異なるメタタグが生成されると Hydration エラーや SEO に悪影響を及ぼすことがあります。
対策：可能な限り SSR での初期値と CSR での初期値を一致させるか、SSR のみで静的メタタグを設定し、CSR での動的更新は必要最低限に留める。

2. 不必要なリアクティブ処理によるパフォーマンス低下

SEO メタタグは基本的に初回ロード時に検索エンジンが読み取るため、頻繁に変わる必要はありません。リアクティブにしすぎると無駄な再レンダリングが発生します。
対策：静的なメタタグは SSR のみで設定し、動的に変わるものだけリアクティブに管理する。

3. 型定義にないカスタムメタタグの扱い

useSeoMeta は多くのメタタグを型定義していますが、特殊なカスタムタグは型に含まれない場合があります。
対策：型エラーが出る場合は型アサーションを使うか、公式の型定義の更新を待つ。

まとめ

useSeoMeta は Nuxt で SEO メタタグを安全かつ効率的に管理するための強力なツールです。型安全で豊富なメタタグ対応、SSR と CSR の両対応、パフォーマンス最適化の工夫が可能であり、実務での SEO 対策に欠かせません。
ただし、SSR と CSR の同期やリアクティブの使い過ぎには注意が必要です。この記事のポイントを押さえて、より良い SEO 対策を実現してください。