AIクローラーはインフィニットスクロールをどう処理する？当社のコンテンツがインデックスされない問題

AIクローラーがJavaScriptをどう処理するか分解します：

AIクローラーのJavaScript対応状況:

根本的な問題:

インフィニットスクロールには、

1. JavaScriptの実行
2. スクロールイベントのトリガー
3. 追加HTTPリクエスト
4. 新規コンテンツのレンダリング が必要です。

ほとんどのAIクローラーは1か2で失敗します。

SSRだけでは不十分な理由:

SSRは初回ページしか返しません。インフィニットスクロールのコンテンツは「初期」ではなく、操作時にロードされます。SSRだけでは操作依存を解消できません。

根本的な課題:

インフィニットスクロールは現状のAIクローラーの能力とは根本的に相容れません。別のアプローチが必要です。

まったく同じ課題に直面しました。私たちの解決策はこれです：

ハイブリッド方式の実装例:

// URL構造
/blog              // インフィニットスクロール（ユーザー向けデフォルト）
/blog/archive/1    // ページ分割（クローラー用アクセス可能）
/blog/archive/2

実装のポイント:

1. サイトマップにはページネーションURLのみ記載

   • AIクローラーは /blog/archive/* ページを発見
   • これらはサーバーサイドで全コンテンツをレンダリング

2. インフィニットスクロールページも同じAPIでデータ取得

   • 裏側はページネーションAPI
   • 人間にとってUXが向上

3. 内部リンクは各記事個別URLに誘導

   • インフィニットスクロールの位置ではなく
   • 各記事に固有URL

4. robots.txtの指示例:

# クローラーには個別記事を優先して発見させる
# インフィニットスクロールのコンテナページは対象外
Sitemap: /sitemap.xml

結果:

• ヒューマン向けUXはそのまま（インフィニットスクロール）
• AIクローラーはアーカイブページ経由ですべてのコンテンツにアクセス
• 記事単体も全てインデックス
• 実装後、引用率は4倍に向上

Next.jsでのアプローチ：

getStaticPaths + getStaticPropsを使用:

// pages/blog/page/[page].js
export async function getStaticPaths() {
  const totalPages = await getTotalPages();
  const paths = Array.from({ length: totalPages }, (_, i) => ({
    params: { page: String(i + 1) }
  }));
  return { paths, fallback: false };
}

export async function getStaticProps({ params }) {
  const posts = await getPostsForPage(params.page);
  return { props: { posts, page: params.page } };
}

利点:

• ページごとに静的ページ生成
• HTMLに全コンテンツがビルド時点で含まれる
• AIクローラーにも完全な内容を提供
• 高速（静的）

インフィニットスクロールは強化として追加:

• クライアント側は同じAPIで無限スクロール
• プログレッシブエンハンスメント
• JSなしでも動作

これで両立可能です。

プリレンダー方式も一つです：

AIクローラー向けプリレンダーサービス:

AIクローラーのユーザーエージェント検出→プリレンダー版コンテンツの配信が可能です。

// ミドルウェア例
if (isAICrawler(req.headers['user-agent'])) {
  return servePrerenderedVersion(req.url);
}

AIクローラー検出例:

const aiCrawlers = [
  'GPTBot',
  'ChatGPT-User',
  'Google-Extended',
  'ClaudeBot',
  'PerplexityBot',
  'anthropic-ai'
];

function isAICrawler(userAgent) {
  return aiCrawlers.some(crawler =>
    userAgent.includes(crawler)
  );
}

プリレンダーの選択肢:

• Prerender.io
• Rendertron
• Puppeteerベースのカスタム
• ビルド時プリレンダー

注意:

全てのAIクローラーが明確なユーザーエージェントを名乗るとは限りません。一部は見逃されるので、補助策として考え、本命は正規のページネーションです。

AIクローラーアクセシビリティのテスト手法：

手動テスト:

1. JavaScript無効テスト:

   • ブラウザでブログを開く
   • JavaScriptを無効化
   • どこまで表示されるか確認
   • JS非対応クローラーの見え方に近い

2. ソース表示テスト:

   • ページのソース（要素の検証ではなく）を確認
   • HTML内にコンテンツは含まれているか？
   • それともJSのプレースホルダーだけか？

3. curlテスト:

   curl -A "GPTBot/1.0" https://yoursite.com/blog/
   

   • 実際のコンテンツがレスポンスに含まれるか？

自動テスト:

4. Google Search Console:

   • URL検査ツール
   • 「レンダリングされたページ」を確認
   • （AIクローラーではないが、JSレンダリング挙動は近い）

5. Lighthouse監査:

   • 「SEO」カテゴリをチェック
   • クロール可能性の問題を検出

理想の状態:

• 初回HTMLレスポンスにコンテンツが含まれる
• すべてのページへのリンクが発見できる
• コンテンツの可視化にJS不要

ECサイトの観点：

当社は1万点以上の商品で「もっと見る」機能を使っています。以下が私たちの解決事例です：

カテゴリーページ構成:

/category/shoes                    # 最初の24商品＋もっと見る
/category/shoes?page=2            # 25-48商品
/category/shoes?page=3            # 49-72商品

実装のポイント:

1. 初回ページにも必ずページネーションリンク

   • インフィニットスクロール使用時でも
   • フッターに1,2,3…のリンク

2. ?page=パラメータはcanonical

   • 各ページは固有のコンテンツ
   • メインページの重複ではない

3. サイトマップに全ページネーションURLを記載

   • インフィニットスクロールのベースURLだけでなく

4. 商品は個別URL

   • カテゴリページは発見用
   • 商品ページが本来のコンテンツ

結果:

AIプラットフォームはページネーション構造経由で個別商品ページを発見・引用しています。

非常に参考になりました。私の実装計画は以下です：

ハイブリッドページネーション方式

フェーズ1: ページネーションルート追加（1～2週目）

• /blog/archive/[page]ルート作成
• SSRでHTMLに全コンテンツ含む
• ページネーションナビゲーション追加
• サイトマップも対応

フェーズ2: 既存インフィニットスクロール更新（3週目）

• /blogはインフィニットスクロール維持
• アーカイブページをデータソース化
• /blogから/blog/archive/1へcanonical

フェーズ3: テストと検証（4週目）

• JS無効でテスト
• AIユーザーエージェントでcurlテスト
• AIへの引用率を監視

技術的構成:

/blog                 → インフィニットスクロール（人間用、canonicalはarchive/1）
/blog/archive/1       → ページ分割（クローラー用、canonicalはself）
/blog/archive/2       → ページ分割（クローラー用）
/blog/[slug]          → 各記事（本来のコンテンツ）

重要な原則:

• JSなしでコンテンツにアクセスできること
• すべてのコンテンツが固有URLを持つこと
• サイトマップに全ページを記載
• インフィニットスクロールはあくまでエンハンスメント

皆さま、詳細な技術アドバイスをありがとうございました。