要点
JavaScriptコンテンツもインデックス可能ですが、処理時間と障害点が増えるため重要な公開内容は初期HTMLが堅実です。
Next.jsではServer Componentsと静的生成を基本にし、対話部分だけをクライアント化します。
実践手順
- 応答HTMLとレンダリング後DOMを別々に確認する。
- metadata、canonical、hreflangをURLごとにサーバー生成する。
- 主要ナビゲーションを<a href>にし、正しいHTTP状態を返す。
- 本番buildでJS量、応答時間、実行エラーを測る。
例
計算機だけをクライアント読み込みにし、説明、見出し、関連リンクはサーバーHTMLで届けます。
よくある誤り
- JavaScriptは一切索引されないと思う。
- 重要本文をクリック後だけ表示する。
- 404画面を200で返す。
限界
- Googleのレンダリングは全利用者の端末と同じではありません。
- 一度のテストはフィールド性能やインデックスを保証しません。
情報源
- Understand the JavaScript SEO basics — Google Search Central; 2026-03-04; 2026-08-14.
- generateMetadata — Next.js; 2026-06-09; 2026-08-14.
- sitemap.xml — Next.js; 2026-03-03; 2026-08-14.
- JSON-LD — Next.js; 2026-03-02; 2026-08-14.
関連ガイドとツール
メタデータ・見出し・リンク分析
HTMLからtitle、description、H1–H6、クロール可能な<a href>を抽出します。
メタデータ・見出し・リンク分析 | NAVINES SEO LabSEOとは何か、なぜオーガニック可視性は積み上がるのか
人の課題、役立つ内容、技術品質、事業測定を一つの仕組みにします。
SEOとは何か、なぜオーガニック可視性は積み上がるのか | NAVINES SEO Lab検索エンジンがクロール、インデックス、表示する仕組み
URLの発見、処理、インデックス選択、検索結果表示を分けて診断します。
検索エンジンがクロール、インデックス、表示する仕組み | NAVINES SEO Lab