ヒント · 2026-07-08

画像だけの商品詳細ページが検索やAI検索から消える理由

検索エンジンは画面ではなくHTMLを読みます。1920×4,731pxの一枚画像を再構成し、1,561文字・見出し9個・alt 13個を蘇らせた実例。

画像だけのページで構成されたランディングページや詳細ページは、人の目には問題なく見えても、検索エンジンやAI回答エンジンにとっては実質的に真っ白なページです。クローラーが読み取るのは画面の見た目ではなくHTMLであり、一枚画像だけのHTMLには読み取るべき情報がほとんど存在しないためです。

言葉で説明する代わりに、実際に変換したページを一つご紹介します。以下の数値はすべて、本件において直接測定した実測値です。

対象:美容外科クリニック紹介ページ

  • 参照キャンバス:1920 × 4,731 px
  • 画像ファイル:1点、1,158 KB
  • クリニック名、診療理念、5つの約束、カウンセリング手順 — ページ内のすべての文字がピクセル(画像)でした。

変換前、クローラーが読み取っていた情報

検索エンジンが探す要素画像だけのページ
本文テキスト0文字
<title>なし
<meta name="description">なし
見出し階層 (h1~h3)なし
画像の代替テキスト (alt)なし

OCRを試みるクローラーも一部存在しますが、画像から抽出されたテキストは信頼性が低いため、掲載順位の判断にはほとんど使われません。AI回答エンジンに至っては、回答の根拠として引用するための文章自体を見つけ出すことすらできません。

変換後、クローラーが読み取る情報

項目結果
本文テキスト68ブロック・1,561文字を実際のテキストとして復元
<title>エイペックス美容外科 — 正しい信念のもと、適切な美容整形の原則を守り続けるクリニック
<meta name="description">ページの第1段落から抽出して自動生成
見出し階層h1:1個・h2:3個・h3:5個
画像の代替テキスト画像13点すべてにaltを付与 (13/13)
構造section:5個・リスト:1個(項目6点)
文書言語<html lang="ko">

画像の中に閉じ込められていた1,561文字が、そのままインデックス対象となります。見出し階層が生成されたことで、どの文章がページの主題でどれがサブ項目であるかも明確に区別されます。つまり、AI回答エンジンが引用できる構造になったということです。

元画像 ↔ 再現結果

ここまでの構造改革を行いながらも、見た目の画面はそのまま維持されています。左側が元の一枚画像、右側が再構成されたHTMLをキャプチャした画面です。両方のパネルは同じスクロール比率で連動します。

別ウィンドウで開く ↗ 右パネルのテキストは選択・コピーが可能です
元画像(一枚画像) 1,920×4,731
エイペックス美容外科 元画像(一枚画像)紹介ページ
再現結果(ライブHTML) テキスト選択・コピー可能

デザインを妥協して検索露出を獲得したわけではありません。見た目はそのまま、中身はしっかり読めるHTMLです。

品質レポート

指標測定値意味
height×1.000全体の高さが元画像と完全に一致
rows0.998横行単位の輝度分布の相関度
struct0.66構造誤差(低いほど元画像に近い)
bands14/14垂直方向に14分割した区間がすべて許容誤差内
pxdiffPASSピクセル照合ゲート通過

副次的なメリット(読み込み速度の向上)

区分容量
元画像(一枚画像)1,158 KB
再現HTMLドキュメント29 KB
分離された画像13点348 KB
再構成後の合計376 KB(約68%削減)

ページ読み込み速度は、検索順位に直接影響を与える重要な要素です。一枚画像の場合は1,158 KBを一括でダウンロードしないと最初の画面が表示されませんが、再構成されたページならわずか29 KBのドキュメントが先行して描画され、画像は画面内にスクロールされたタイミングで1点ずつ読み込まれます。

内容修正時 — メンテナンス性が劇的に変わります

クリニックの紹介ページも、一度作ったら終わりではありません。診療項目、医療陣、カウンセリング案内、認可・資格情報など、時間が経てば必ず手を加える必要が出てきます。しかし一枚画像の場合、テキスト1行を直すだけでも画像を丸ごと作り直さなければなりません

テキスト1行を修正する場合一枚画像再構成されたHTML
デザイン原本ファイルPSD・AIファイルを探す必要あり(紛失時は最初から作り直し)不要
作業担当者デザイナーまたは外注業者運用担当者自身で完結
作業フロー修正 → 再書き出し → 再アップロード該当の文章を打ち替えるだけ
検索への反映画像が変わるだけで、インデックスされるテキストは依然としてゼロ修正したテキストがそのままインデックス対象に
変更・通信範囲画像ファイル全体(1,158 KB)テキスト数行分

このページでは、1,561文字が68個のブロックに分割され、9個の見出しのもとに整理されています。どの文章を修正すべきかh2h3をたどって容易に特定でき、修正したテキストは次回のクロール時から即座に検索対象として反映されます。

画像のままであれば、文言を修正したところで検索エンジンから見れば依然として真っ白なページのままです。せっかく手間をかけて修正しても、検索面での変化は望めません。テキスト化しておけば、修正した分だけ検索エンジンにも正しく評価されます。

まとめ

  • 画像だけのページが検索結果に表示されないのは、順位が低いからではなくインデックスすべきテキストが存在しないからです。
  • 解決策はデザインを変えることではなく、同じデザインのままクローラーが読めるHTMLへ再構築することです。
  • 本事例では、1,561文字・見出し13個・alt13点が新たに生成され、画面の見た目はピクセル照合をパスするほど忠実に再現されています。
  • 更新作業も格段にスムーズになります。文言を変更する際に画像を再作成する必要はなく、該当のテキストを修正するだけで完了し、次回のクロール時からそのまま検索結果に反映されます。

元画像 ↔ 再現結果を並べて比較 ↗

再構成されたHTMLページのみを開く ↗

閲覧数 6
Reclaim the web

画像に閉じ込められたウェブを、今取り戻しましょう

ご登録と同時に無料クレジットを差し上げます。クレジットカードは不要です。

ニュースレターを購読

新機能・連携・変換のコツを、いち早くお届けします。

変換 問い合わせ