遅延読み込みはAIの可視性に影響する？混在する情報について

各遅延読み込みタイプについて分解します。

1. 画像のネイティブ遅延読み込み（loading=“lazy”):

<img src="image.jpg" loading="lazy" alt="Description">

影響: 基本的にAIクローラーに問題なし。

• 画像URLがHTML内にある
• クローラーが参照を認識できる
• レンダリング不要で存在を把握可能

2. JavaScriptでの画像遅延読み込み:

<img data-src="image.jpg" class="lazy">
// JSがスクロール時にdata-srcをsrcへ置換

影響: 問題が生じる可能性あり。

• JS未実行だとsrcが空
• クローラーが画像を認識できない場合あり
• loading=“lazy"推奨

3. コンテンツのIntersection Observer:

observer.observe(element);
// 要素がビューポートに入ったらコンテンツを読み込む

影響: AIにとって問題あり。

• AIクローラーは「ビューポート」を持たない
• スクロールもインターセクションも実行しない
• コンテンツが読み込まれない可能性

4. 無限スクロール:

影響: 非常に問題あり。

• 初期ページ以外のコンテンツが不可視
• クローラーはスクロールをトリガーしない
• 最初のページのみ可視

一般ルール:

ユーザー操作やビューポート表示が必要なコンテンツは、AIクローラーが認識できない可能性が高いです。

パフォーマンスとAI可視性のトレードオフについて。

遅延読み込みを使う理由:

• 初回読み込みが速い
• Core Web Vitals向上
• ユーザーの帯域節約

ジレンマ:

• パフォーマンスに良いことがAI可視性を損なう場合がある
• 特にJavaScript依存の遅延読み込みで顕著

解決アプローチ:

画像の場合: ネイティブ遅延読み込みなら両方のメリットあり。これを使う。

コンテンツの場合: 重要なものはサーバーレンダリング。遅延読み込みは

• 折りたたみ下の補足
• 推薦等、引用対象でないもの
• インデックスに影響しないUI強化

優先順位:

AIに引用されたいコンテンツ＝初期HTMLに必須。その他はパフォーマンス重視でOK。

実例:

記事ページ：

• 記事本文：常にHTML（引用対象）
• 関連記事：遅延OK（引用対象外）
• コメント：遅延OK（引用対象外）
• シェアボタン：遅延OK（UIのみ）

AIクローラーの挙動について分かっていること。

GPTBot:

• 基本的なHTTPリクエスト
• JavaScript実行は最小限
• HTML内のリンクを辿る

ClaudeBot:

• GPTBotと同様
• HTML中心のクローリング
• 動的コンテンツ対応は限定的

PerplexityBot:

• やや高度
• 一部JavaScript対応
• それでも主にHTML重視

共通点:

• スクロールしない
• ユーザー操作のシミュレーションなし
• 処理時間に制限
• HTMLコンテンツを優先

意味すること:

以下が必要なコンテンツは

• スクロール
• クリック操作
• 長時間のJavaScript実行
• ビューポート表示

…クローラーには見えない可能性大。

テスト戦略:

1. ページソースを表示（検証ではなく）
2. 重要コンテンツがそこにあるか？
3. なければクローラーも見えない

シンプルですが確実です。

実装の推奨事項。

新規実装の場合:

画像:

<img src="image.jpg" loading="lazy" alt="Description">

これで完了。ネイティブが最適。

コンテンツセクション:

<div class="content">
  <!-- 本文をHTMLで -->
  記事テキスト全文
</div>

見た目だけ遅延読み込み、本体はHTMLで。

リスト/グリッド:

<ul class="items">
  <li>アイテム1</li>
  <li>アイテム2</li>
  <!-- 少なくとも10〜20件はHTMLで -->
</ul>
<a href="?page=2">さらに読み込む</a>

初期項目はHTML、追加はページネーション。

既存実装の場合:

JS依存の遅延読み込みがある場合

1. 影響範囲のコンテンツを調査
2. 重要な引用対象を優先
3. それらをサーバーレンダリングへ移行
4. 重要でない部分は遅延OK

チェック方法:

変更後

curl -s https://yoursite.com/page | grep "重要なコンテンツのフレーズ"

出力されればOKです。

モニタリングの観点から。

遅延読み込みで損しているか確認する方法:

1. Am I Citedデータ確認

• 遅延読み込みページの引用数は少ないか？
• 異なる実装の類似ページと比較

2. 手動テスト

• AIに遅延セクションの内容を質問
• その情報を知っているか？
• 知らなければ不可視の可能性

3. サーバーログ

• AIクローラーのアクセス状況は？
• 完全なレスポンスを取得できているか？

実際の傾向:

大規模な遅延読み込み（特に無限スクロール）サイトは

• AIに見えるコンテンツが40〜60％減少
• その分引用率も低下
• SSRやページネーション導入後に改善

画像遅延読み込みのみのサイトは

• 影響ほぼなし
• ネイティブloading=“lazy"は問題なし

推奨:

監査・テスト・モニタリングを実施。実装が問題ないと決めつけず検証を。

明確なアクションプランができました。

継続すること:

• 画像のネイティブ遅延読み込み（問題なし）

変更すること:

Intersection Observerのセクション:

• 重要コンテンツを初期HTMLへ移行
• UI強化のみ遅延

無限スクロールページ:

• ページネーション追加
• 最初の20件はHTML
• 追加は「さらに読み込む」ボタン

テスト方法:

1. 変更後にcurlでページ取得
2. 重要コンテンツがHTMLに含まれるか確認
3. Am I CitedでAI可視性をモニタリング
4. 変更前後で引用率を比較

原則: AIに引用されたいコンテンツ＝常にHTML それ以外＝パフォーマンス最適化OK

技術的な明快さに感謝！