画像だけのページで構成されたランディングページや詳細ページは、人の目には問題なく見えても、検索エンジンや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をキャプチャした画面です。両方のパネルは同じスクロール比率で連動します。
読み込み中…
デザインを妥協して検索露出を獲得したわけではありません。見た目はそのまま、中身はしっかり読めるHTMLです。
品質レポート
| 指標 | 測定値 | 意味 |
|---|---|---|
| height | ×1.000 | 全体の高さが元画像と完全に一致 |
| rows | 0.998 | 横行単位の輝度分布の相関度 |
| struct | 0.66 | 構造誤差(低いほど元画像に近い) |
| bands | 14/14 | 垂直方向に14分割した区間がすべて許容誤差内 |
| pxdiff | PASS | ピクセル照合ゲート通過 |
副次的なメリット(読み込み速度の向上)
| 区分 | 容量 |
|---|---|
| 元画像(一枚画像) | 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個の見出しのもとに整理されています。どの文章を修正すべきかh2やh3をたどって容易に特定でき、修正したテキストは次回のクロール時から即座に検索対象として反映されます。
画像のままであれば、文言を修正したところで検索エンジンから見れば依然として真っ白なページのままです。せっかく手間をかけて修正しても、検索面での変化は望めません。テキスト化しておけば、修正した分だけ検索エンジンにも正しく評価されます。
まとめ
- 画像だけのページが検索結果に表示されないのは、順位が低いからではなくインデックスすべきテキストが存在しないからです。
- 解決策はデザインを変えることではなく、同じデザインのままクローラーが読めるHTMLへ再構築することです。
- 本事例では、1,561文字・見出し13個・alt13点が新たに生成され、画面の見た目はピクセル照合をパスするほど忠実に再現されています。
- 更新作業も格段にスムーズになります。文言を変更する際に画像を再作成する必要はなく、該当のテキストを修正するだけで完了し、次回のクロール時からそのまま検索結果に反映されます。