lazy-loading は Googlebot がスクロール連動方式のみサポートする

なぜこれを学ぶか

lazy-loading は Core Web Vitals 改善 + ページ速度向上の主要手段だが、誤った実装で主要コンテンツが Googlebot に拾われない事故が多発。

メディア・EC・大規模サイトで、画像 / 動画を多く扱うページの実装で必須の知識。

学ばないと起きること

学ぶメリット

• Core Web Vitals 改善の安全な lazy-load 実装ができる
• Googlebot が認識する方式 / 認識しない方式を区別できる
• 商談で「クリック要求 lazy-load は SEO 対象外」を即答できる

仕組み

Googlebot が対応する lazy-load

公式: 「スクロール連動 lazy-load」のみ対応。

HTML native lazy-loading

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

最もシンプル + Googlebot が確実に認識。

IntersectionObserver 実装

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      observer.unobserve(img);
    }
  });
});

document.querySelectorAll('img[data-src]').forEach(img => observer.observe(img));

JS で柔軟に実装できる。Googlebot もスクロール連動として認識。

キー概念

LCP との関係

LCP（Largest Contentful Paint）対象の画像（ATF のヒーロー画像など）は lazy-load しない。

<!-- ヒーロー画像: lazy-load NG -->
<img src="hero.jpg" alt="..." fetchpriority="high">

<!-- スクロール先の画像: lazy-load OK -->
<img src="content.jpg" loading="lazy" alt="...">

ヒーロー画像を lazy-load すると LCP が遅延し、Core Web Vitals が悪化。

fetchpriority 属性

主要画像は優先取得:

<img src="hero.jpg" alt="..." fetchpriority="high">

ATF の主要画像に指定すると Googlebot も最優先で取得。

NG パターン: ユーザーアクション要求

<!-- NG: クリックで初めて読み込み -->
<button onclick="loadImages()">画像を表示</button>
<script>
function loadImages() {
  document.querySelectorAll('img[data-src]').forEach(img => {
    img.src = img.dataset.src;
  });
}
</script>

Googlebot はクリックしないため、画像が永久に読み込まれない → 画像検索 / コンテンツ判定の対象外。

iframe の lazy-loading

YouTube 埋め込みなどの iframe も同様:

<iframe src="https://www.youtube.com/embed/..." loading="lazy"></iframe>

ATF にない iframe（記事下のおすすめ動画など）は積極的に lazy-load 推奨。

構造化データとの整合

lazy-load した画像も構造化データの image プロパティに正しく URL を渡す:

{
  "@type": "Article",
  "image": [
    "https://example.com/hero.jpg",
    "https://example.com/sub-1.jpg",
    "https://example.com/sub-2.jpg"
  ]
}

実際の HTML で lazy-load されていても OK。Googlebot がレンダリング後に取得できれば問題なし。

よくある誤解

実務での適用

EC サイトの実装パターン

<!-- 商品メイン画像（LCP 対象）-->
<img src="product-main.jpg" alt="..." fetchpriority="high">

<!-- 商品サブ画像（lazy-load OK）-->
<img src="product-detail-1.jpg" loading="lazy" alt="...">
<img src="product-detail-2.jpg" loading="lazy" alt="...">

<!-- 関連商品（さらに下、lazy-load）-->
<div class="related-products">
  <img src="related-1.jpg" loading="lazy" alt="...">
  <img src="related-2.jpg" loading="lazy" alt="...">
</div>

Next.js の Image コンポーネント

import Image from "next/image";

// LCP 対象（ヒーロー / メイン画像）
<Image src="/hero.jpg" alt="..." width={1200} height={630} priority />

// 通常画像（lazy-load 自動）
<Image src="/content.jpg" alt="..." width={800} height={450} />

next/image は自動的に lazy-loading + WebP 変換 + サイズ最適化。

YouTube iframe の lazy-load

<iframe
  src="https://www.youtube.com/embed/..."
  title="..."
  loading="lazy"
  allowfullscreen
></iframe>

または Lite YouTube Embed のようなプレースホルダー戦略も有効。

トラブル別の対処

公式ソース

• lazy-loading コンテンツのベスト プラクティス
• Core Web Vitals（LCP）
• Google 画像 SEO
• Loading Lazy Attribute（MDN）

自己テスト

これらの内容を採点付きで挑戦したい場合は、本ドメインのプロ試験で 5 問形式で確認できる。