Next.js SEO チェッカー

Next.js サイトを監査して、SSR、レンダリング、メタデータ、およびクロール可能性の問題がないか確認します。 7 つのカテゴリにわたる 20 以上のチェック。

Next.js SEO の最大の課題

「use client」ディレクティブを過度に使用すると、コンテンツがブラウザーでのみ表示されます。検索エンジンと AI クローラー (ChatGPT、Claude、Perplexity) には、コンテンツではなく空の HTML シェルが表示される場合があります。

  • SSR と CSR の問題を検出する
  • メタデータの利用可能性を確認する
  • コアウェブバイタルを分析する

Next.js サイトで最適に動作しますが、あらゆる Web サイトを分析できます

よくある質問

このツールは何をチェックするのでしょうか?

このツールは、7 つのカテゴリにわたって 20 以上の SEO チェックを実行します。

  • レンダリングとSSR: 空の HTML シェル、クライアントのみのレンダリング、ハイドレーションの問題を検出します。
  • メタデータと Head: タイトル、説明、Open Graph、正規、ビューポート
  • パフォーマンス: Core Web Vitals (FCP、LCP、TTFB)、レンダリング ブロック リソース
  • 画像: 代替テキスト、次へ/画像の使用、遅延読み込み
  • 構造化データ: JSON-LD スキーマ マークアップの検証
  • クローラビリティ: ロボットメタ、内部リンク、hreflang
  • セマンティックHTML: 見出し、ランドマーク、ARIA 属性

SSR/SSG が SEO にとって重要なのはなぜですか?

検索エンジンと AI クローラーは、最初はサーバーからの生の HTML のみを認識します。コンテンツが JavaScript (クライアント側) 経由でのみレンダリングされる場合、クローラーには空のページが表示される可能性があります。サーバーサイド レンダリング (SSR) または静的サイト生成 (SSG) により、コンテンツが最初の HTML 応答に含まれることが保証されます。

「空の HTML シェル」問題とは何ですか?

これは、Next.js アプリが JavaScript 経由で読み込まれたコンテンツを含む最小限の HTML を返す場合に発生します。一般的な原因:

  • 「use client」ディレクティブの過剰な使用
  • getServerSideProps または getStaticProps を使用しない
  • useEffect フックでのみデータを取得する

レンダリングの問題を解決するにはどうすればよいですか?

クローラーがコンテンツを利用できるようにするには:

  • ページルーター: getServerSideProps または getStaticProps を使用する
  • アプリルーター: デフォルトではコンポーネントをサーバーコンポーネントとして保持し、必要な場合にのみ「クライアントを使用」を追加します
  • データの取得: 重要なデータはサーバー側で取得され、使用されません効果
  • メタデータ: next/head またはメタデータ API を使用する