nuxt-seo-best-practices

Nuxt SEO のベストプラクティス

Cloudflare Pages/Workers にデプロイする Nuxt 4 アプリケーション向けの包括的な SEO 最適化ガイドです。4 つのカテゴリにわたる 11 のルールを収録し、影響度の高い順に優先順位を付けて、自動リファクタリングとコード生成を支援します。

Nuxt 4.5 に関する注意： ヘッド管理は unhead v3 で実行されるようになりました。useHead の型チェックはより厳格になっており、アップグレード後に発生する型エラーは通常、回帰ではなく正当な厳格化によるものです。また、Promise の入力はサポートされなくなりました。このスキルに記載されているすべての useHead／useSeoMeta の例は、同期値のみを使用し、v3 に対応しています。

適用するタイミング

以下の場合に、このガイドラインを参照してください。

• Cloudflare Workers で動的な OG 画像を生成する
• ページ単位の SEO メタタグとコンポーザブルを設定する
• JSON-LD 構造化データを追加する
• Cloudflare Pages へのデプロイ用に Nitro を設定する
• SSR に対応していないクライアント専用ライブラリを扱う
• ソーシャル共有用メタデータ（Open Graph、Twitter Cards）を設定する
• Satori を使った画像生成を行う（React は絶対に使用しないでください）

優先度別ルールカテゴリ

優先度	カテゴリ	影響度	プレフィックス
1	OG 画像の生成	CRITICAL	og-
2	ページ SEO とメタデータ	HIGH	meta-
3	構造化データ	MEDIUM	schema-
4	Cloudflare と Nitro の設定	HIGH	cf-

クイックリファレンス

1. OG 画像の生成（CRITICAL）

• og-cf-workers - @cf-wasm/og を使用して Cloudflare Workers で動的な OG 画像を生成する
• og-no-react - Satori 要素にはプレーンな JS オブジェクトを使用し、React は絶対に使用しない
• og-cache-headers - CDN 向けに immutable ヘッダーを設定して OG 画像をキャッシュする
• og-corp-cross-origin - CORP の cross-origin を設定して OG 画像を配信する。設定しないと、すべてのソーシャルカードが気付かないうちに動作しなくなります

2. ページ SEO とメタデータ（HIGH）

• meta-use-page-seo - ページ単位の SEO を一貫させるための再利用可能なコンポーザブル
• meta-social-tags - 適切な Open Graph と Twitter Card のメタタグ
• meta-canonical-url - すべてのページに canonical URL と og:url を設定する

3. 構造化データ（MEDIUM）

• schema-json-ld - Google リッチリザルト向けの JSON-LD 構造化データを app.vue に設定する

4. Cloudflare と Nitro の設定（HIGH）

• cf-compatibility-date - compatibilityDate を固定し、'latest' は絶対に使用しない
• cf-nitro-config - CF Pages 向けの Nitro 設定（nodeCompat、process.stdout、WASM）
• cf-ssr-externals - クライアント専用ライブラリ向けの SSR external 設定
• cf-wasm-import - Cloudflare Workers 向けの WASM モジュール設定

使用方法

詳しい説明とコード例については、個別のルールファイルを参照してください。

rules/og-cf-workers.md
rules/meta-use-page-seo.md
rules/_sections.md

各ルールファイルには、以下の内容が含まれています。

• 重要である理由の簡潔な説明
• 解説付きの誤ったコード例
• 解説付きの正しいコード例
• Nuxt／Cloudflare 固有の補足情報と注意事項

完全版ドキュメント

すべてのルールを詳しく記載した完全なガイドについては、AGENTS.md を参照してください。