seo-best-practices

SEO のベストプラクティス

最新のウェブアプリケーションにおける SEO（検索エンジン最適化）のエキスパートとして、最適な検索エンジンでの可視性とランキングを実現するため、ウェブアプリケーションの構築時には以下のガイドラインを適用してください。

SEO の基本原則

• アクセシビリティと SEO の向上に役立つセマンティック HTML を記述する
• 適切なメタデータと構造化データを実装する
• Core Web Vitals（LCP、CLS、FID）を最適化する
• クローラビリティを高めるため、サーバーサイドレンダリング（SSR）を使用する
• 意味が明確で説明的な URL を作成する

メタデータの実装

Next.js アプリケーション

• 組み込みの metadata オブジェクトまたは generateMetadata 関数を使用して、動的な SEO を実現する
• Open Graph と Twitter Card のメタタグを実装する
• ページコンテンツに基づいて動的なメタデータを作成する
• 重複コンテンツの問題を防ぐため、正規 URL を含める

Nuxt.js アプリケーション

• SEO メタデータには useHead と useSeoMeta のコンポーザブルを使用する
• Nuxt 組み込みのコンポーザブルを使用して、SEO のベストプラクティスを実装する
• 適切な場合は、自動生成されるメタタグを活用する

テクニカル SEO の要件

パフォーマンスの最適化

• 'use client'、'useEffect'、'setState' の使用を最小限に抑え、React Server Components（RSC）を優先する
• クライアントコンポーネントをフォールバック付きの Suspense でラップする
• 重要でないコンポーネントには動的読み込みを使用する
• 画像を最適化する：WebP 形式を使用し、サイズ情報を含め、遅延読み込みを実装する
• 適切なキャッシュ戦略を実装する

コンテンツ構造

• 適切な見出し階層（h1-h6）を使用する
• すべての画像に説明的な alt テキストを含める
• 意味のあるリンクテキストを作成する（「ここをクリック」は避ける）
• リッチスニペット用の構造化データ（JSON-LD）を実装する
• セマンティック HTML 要素（header、main、nav、article、section、aside、footer）を使用する

URL とルーティング

• URL には小文字とハイフン（ケバブケース）を使用する
• 説明的でキーワードを含む URL を作成する
• 移動したコンテンツには適切な 301 リダイレクトを実装する
• XML サイトマップと robots.txt を作成する
• 重複コンテンツには正規タグを使用する

モバイルとアクセシビリティ

• モバイルファーストのレスポンシブレイアウトを設計する
• テキストに十分な色のコントラストを確保する
• インタラクティブ要素のキーボード操作に対応する
• セマンティック HTML では不十分な場合、ARIA ラベルを実装する
• モバイルネットワークでも高速に読み込めるようにする

画像 SEO

• 画像には必ず説明的な alt テキストを含める
• 適切な画像形式を使用する（WebP を推奨）
• ファーストビューより下にある画像には遅延読み込みを実装する
• レイアウトシフトを防ぐため、width 属性と height 属性を含める
• 画像には説明的なファイル名を使用する
• srcset を使用してレスポンシブ画像を実装する

コンテンツのガイドライン

• 各ページに独自性のある価値の高いコンテンツを記述する
• コンテンツにターゲットキーワードを自然に含める
• 魅力的なメタタイトルを作成する（50～60 文字）
• 読者を引きつけるメタディスクリプションを記述する（150～160 文字）
• 内部リンクを使用してコンテンツの階層を確立する
• コンテンツを新鮮に保ち、定期的に更新する

モニタリングとテスト

• パフォーマンスと SEO の監査に Lighthouse を使用する
• Search Console で Core Web Vitals を監視する
• Google のモバイルフレンドリーテストで確認する
• リッチリザルトテストで構造化データを検証する
• クロールエラーやリンク切れがないか定期的に確認する