GoogleはHTMLの最初の2MBしか読まない｜今すぐ確認する手順

HTML 2MB制限とは？Googleはページのどこまで読んでいる？

Googlebotがページをクロールする際、HTMLファイルの最初の2MB（約2,097,152バイト）までしか取得しません。

これはHTMLの「ファイルサイズ」の話です。画像やCSS、JSの外部ファイルは含まれません。あくまでHTMLドキュメント本体のサイズです。

HTMLが2MBを超えるとどうなる？

• 2MBより後ろにあるコンテンツはクロールされない
• レンダリングもされないため、Googleのインデックスに含まれない
• 構造化データが後半にある場合、リッチリザルトに反映されない
• 内部リンクが後半にある場合、リンクジュースが渡らない

つまり、ページの後半に重要なコンテンツを置いている場合、それはGoogleにとって「存在しないもの」です。

HTMLが2MBを超えるのはどんなケース？よくある事故パターン

1. ナビゲーションや装飾でHTMLが肥大化

ヘッダーやフッター、サイドバーに大量のHTMLを使っているサイトは要注意です。本文が始まる前にHTMLの大部分を消費してしまい、肝心の記事コンテンツがGoogleに読まれない可能性があります。

特にWordPressでプラグインを10個以上入れているサイトは、知らない間にHTMLが膨らんでいることがあります。

2. インラインCSS・JSの埋め込み

CSSやJavaScriptをHTMLに直接書き込む（インライン化する）と、HTMLサイズが急激に増えます。特にメール配信用のHTMLをそのままWebに流用しているケースで起きがちです。

3. base64エンコードされた画像

画像をbase64でHTMLに埋め込むと、1枚の画像で数十KB〜数百KB消費します。小さなアイコンなら問題ありませんが、大きな画像をbase64で複数埋め込むとHTMLサイズが一気に膨らみます。

4. SPAでのコンテンツ遅延読み込み

React、Vue、AngularなどのSPA（Single Page Application）で、JavaScriptによってコンテンツを後から読み込む場合、JSも取得された2MBの範囲内でしか実行されません。

画面に表示されていても、Googlebot的には存在しない——これがSPAのSEOリスクです。

5. 構造化データがフッターにある

JSON-LDの構造化データをフッター付近に配置しているサイトは多いですが、HTMLが大きいサイトでは2MBの制限によって構造化データが読み取られない可能性があります。

自分のサイトのHTMLサイズはどう確認する？

HTMLサイズの確認手順

1. ブラウザでページを開く
2. 右クリック →「ページのソースを表示」
3. 表示されたHTMLを全選択してテキストエディタにコピー
4. ファイルサイズを確認

または、ターミナルで以下を実行：

curl -s https://あなたのサイト.com/ | wc -c

目安：500KB以下なら安全。1MB超えたら要注意。1.5MB超えたら対策必須。

Google Search Consoleでの確認

Google Search Consoleの「URL検査」ツールで、ページのHTMLがどこまで取得されているか確認できます。「クロール済みのページを表示」でGooglebotが実際に取得したHTMLを見ることができます。

HTML 2MB制限への対策は？今すぐできる5つの方法

1. 重要なものは「HTMLの上部」に置く

<head>
  <!-- ここに重要なものを集中 -->
  <title>ページタイトル</title>
  <meta name="description" content="...">
  <link rel="canonical" href="...">
  <script type="application/ld+json">構造化データ</script>
</head>

title、meta description、canonical、構造化データは必ず<head>内に配置してください。bodyの後半に置いてはいけません。

2. HTMLを軽量化する

3. SSR・SSGを採用する

SPAの場合、サーバーサイドレンダリング（SSR）または静的サイト生成（SSG）に切り替えることで、初期HTMLにコンテンツを含めることができます。

• Next.js: SSR / SSG両対応
• Nuxt.js: Vue向けのSSR / SSG
• Astro: 静的サイト生成に特化

フリーランスのポートフォリオサイトやLP制作で、見た目は動的だけど実はSSGで生成している、というのがSEO的にはベストです。

4. 遅延読み込みを適切に使う

画像の遅延読み込み（lazy loading）はHTMLサイズに影響しませんが、コンテンツの遅延読み込みはSEOリスクがあります。

• OK: <img loading="lazy"> — HTMLには<img>タグが最初からある
• NG: JSで後からDOMを生成してコンテンツを表示 — HTMLに含まれない

フリーランスのサイトで特に気をつけるべきことは？

フリーランスのポートフォリオサイトやブログで注意すべきは以下です：

• WordPressのプラグイン過多: 各プラグインがHTMLにコードを挿入する。不要なプラグインを削除
• ページビルダーの出力: Elementor等のページビルダーは大量のHTMLを生成する
• アニメーションライブラリ: HTMLに大量のインラインスタイルを追加するものがある
• 埋め込みウィジェット: SNSの埋め込み、地図、カレンダー等はiframeを使い、HTMLサイズへの影響を抑える

案件管理とSEOの関係

Web制作の案件では、SEO対策は納品後に「追加で対応」になりがちです。しかし、HTML構造の最適化は設計段階で決まるもの。後から直すのは工数がかかります。

プロジェクトの初期段階でSEOチェックリストをタスクに組み込んでおくと、納品後の手戻りを防げます。

フリーランスコーダー

SEOチェックって、いつも納品直前にバタバタやってるんですよね…

TASKUL AI

プロジェクト作成時にSEOチェックリストをタスクとして自動生成しておけば、設計段階から漏れなく対応できますよ。

まとめ

SEOは「何を書くか」だけでなく、「どこに置くか」で勝負が決まります。まずは自分のサイトのHTMLサイズを確認するところから始めてみてください。