画像が検索に出てこない原因｜遅延読み込みの落とし穴

製品の写真をたくさん載せた記事があります。本文は検索に出ています。ところが、画像で検索したときだけ自社の写真が見当たりません。表示を速くするために入れた仕組みが、原因になっていることがあります。見た目には何も問題がないため、気づくまでに時間がかかります。原因の切り分けから順に整理します。

記事は出ているのに画像だけ出てこない

最初に、症状を正しく見分けます。ページ自体が登録されているかどうかが分かれ目です。本文が検索に出ているなら、ページは読み込まれています。つまり、到達の問題ではありません。残るのは、画像の扱いだけです。

画像の扱いには、いくつかの段階があります。読み込まれる、内容が理解される、検索に出る、という順です。どこで止まっているかを見分けないと、直す場所を間違えます。写真の質を上げても、読み込まれていなければ変わりません。順番に確かめる必要があります。

よくある誤解も先に外しておきます。写真の枚数を増やせば出るようになる、というものです。枚数と登録のされやすさは、直接つながりません。拾われない実装のまま増やしても、同じ結果になります。むしろページが重くなり、別の問題を招きます。

気づく場面も限られています。画像で検索する人は、記事を読む人ほど多くありません。そのため、流入の数字を見ていても変化が小さく映ります。型番や部材の写真を扱う会社ほど、この入口を落としています。見落とされやすい理由が、ここにあります。

扱う商材によって、損の大きさは変わります。現物の見た目が判断を左右する商材ほど、影響が大きくなります。設備、部品、包材、什器などが当てはまります。文章では伝わりにくいものほど、写真から探されます。その入口を、実装の都合で閉じている状態です。

この記事では、原因を3つに分けて扱います。読み込み方の問題、置き方の問題、指定の問題です。順に確かめれば、どれに当たるかは判別できます。特別な道具は要りません。検索の管理画面と、ページの中身を見るだけで足ります。

遅延読み込みは何をしている仕組みか

原因を理解するために、仕組みを押さえます。遅延読み込みは、画面に入ったときに初めて読み込む方法です。最初の表示に必要なものだけを先に読みます。下のほうにある写真は、後回しになります。その分、最初の表示が軽くなります。

導入の目的は、ほとんどが表示速度です。写真の多いページほど、効果が大きく出ます。計測の道具でも、改善の候補として示されます。指摘に従って入れた、という会社が多いはずです。目的そのものは正しいものです。

実装の方法は、大きく2通りに分かれます。1つは、ブラウザに組み込まれた指定を使う方法です。もう1つは、自分で仕組みを作る方法です。後者は、写真の場所を別の場所に控えておき、表示のときに差し替えるという作りになります。

この差し替えが、後で問題になります。最初の状態では、本物の写真の場所が入っていません。差し替えが起きなければ、仮の画像だけが残ります。人が見れば、スクロールした時点で差し替わります。しかし、そうでない読み手もいます。

導入の経緯も、原因を見えにくくします。多くの場合、拡張の機能として入っています。設定を1つ有効にするだけで動きます。中で何が起きているかを、担当者が把握していません。問題が起きても、疑う対象になりません。

公式の説明では、推奨の形がはっきり示されています。画面に入ったタイミングで読み込むこと、が推奨されています。重要なのは、利用者の操作を必要としない実装であることです。この条件を満たしているかどうかが、分かれ目になります。次の節で、その理由を見ます。

検索は画面の操作をしない

公式の文書には、理由が明記されています。検索はページ上での操作を行わない、と説明されています。クリックもしませんし、意図的に画面を動かすこともありません。人が見るときの動きを、そのまま再現するわけではありません。この前提が、実装の条件を決めています。

そのため、操作を待つ作りは届きません。「もっと見る」を押すと写真が出る、という作りが典型です。押されなければ読み込まれない画像は、拾われないままです。一覧の続きも、同じ理由で読まれません。人にとっては自然でも、機械には届きません。

初期表示の範囲についても、注意が示されています。最初に見える範囲には、遅延読み込みを適用しないことが求められます。適用すると、体験に影響する可能性があるためです。見出しのすぐ下にある写真が、遅れて出ることになります。速くするつもりが、遅く見えるという逆転が起きます。

この線引きは、実務でも判断しやすいものです。画面を開いた瞬間に見える範囲かどうかで分けます。そこに入る写真は、通常の読み込みにします。それより下は、遅延読み込みで構いません。迷ったら、上のほうは外すという判断で足ります。

ここまでを、実装の条件としてまとめます。操作を必要としないこと。画面に入ったら自動で読み込まれること。最初に見える範囲には適用しないこと。この3つを満たしていれば、多くの事故は防げます。

• 「もっと見る」を押さないと写真が出ない作りにしている
• 一覧の2ページ目以降を、スクロールでしか読み込めなくしている
• 最初に見える範囲の写真まで、遅延読み込みの対象にしている

逆に、これらに当てはまるなら見直しが要ります。利用者の使い勝手を損なわずに直せる場合がほとんどです。指定の書き方を変えるだけで済むこともあります。作り直しが必要になるのは、まれです。先に、どの型になっているかを確かめます。

見た目では気づけないことが問題を長引かせる

この不具合は、目視では見つかりません。人が開けば、写真は正しく表示されます。スクロールすれば差し替えが起きるためです。確認の担当者も、問題なしと判断します。そのまま何か月も続くことになります。

気づく手がかりは、数字の側にあります。画像での検索から来ている数が、ほとんど伸びません。他の入口が伸びていても、そこだけが動きません。写真を増やした時期と比べても、変化がありません。この形が出ていたら、疑う価値があります。

もう1つの手がかりは、仮の画像です。差し替えが起きない場合、仮の画像が登録されます。灰色の四角や、薄いぼかしの画像です。自社の名前で画像を探したときに、それが並びます。本来の写真が、どこにも出てきません。

報告の場でも、話題になりにくい指標です。多くの会社では、検索の入口をひとまとめで見ています。画像からの流入だけを分けて見る習慣がありません。小さい数字のため、埋もれてしまいます。分けて見る仕組みを持つと、早く気づけます。

見つけたときの心構えも書いておきます。この問題は、担当者の不注意ではありません。仕組みの初期設定が、そのまま残っているだけです。誰かを責める場面ではありません。確認の手順に組み込むほうが、効果があります。

次からは、実際の確かめ方に入ります。確かめる場所は3つです。指定の書き方、置き方、そして代わりの読み込み先です。順に見ていけば、原因は特定できます。特別な知識は要りません。

まず確かめる3つの場所

最初に、確認の対象を絞ります。闇雲にページを見ても、判断できません。見るべきは、写真を置いている指定そのものです。ページの中身を表示すれば、誰でも確認できます。3つの型に当てはめて見分けます。

確かめる場所	問題がある状態	望ましい状態
写真の置き方	背景として指定している	画像として置き、説明の文を添えている
読み込み先	仮の場所しか入っていない	本物の場所が最初から入っている
読み込みの指定	操作を待つ作りになっている	画面に入った時点で読み込まれる

表の1行目が、もっとも多い誤りです。見栄えを整えるために、背景として置いている場合があります。この置き方では、そもそも登録の対象になりません。公式にも、背景の画像は登録しないと明記されています。商品の写真を背景で置いていないか、確かめます。

2行目は、自作の遅延読み込みで起きます。本物の場所を、別の名前の場所に控えている状態です。最初に読まれるのは、仮の場所だけです。差し替えの処理が動かなければ、そのままになります。この形になっていないかを見ます。

3行目は、一覧のページで起きやすい形です。続きを読むために操作が要る作りです。この場合、続きの写真は届きません。一覧の作りそのものを見直す必要があります。後の節で、対処を扱います。

3つとも問題がなければ、別の原因を探します。写真の内容が薄い、説明の文がない、といった場合です。その場合は、拾われてはいるが選ばれていない状態です。対処の方向が変わります。切り分けを先に済ませる理由が、ここにあります。

検索の道具で実際の状態を確かめる

目で見て分からない以上、道具で確かめます。公式が示している方法は、管理画面での確認です。対象のページの状態を、その場で取得できます。無料で使えるため、費用の心配は要りません。手順は次のとおりです。

この確認で、ほとんどの原因は特定できます。読み込み後の中身に本物が入っていれば、実装は正しい状態です。入っていなければ、差し替えが届いていません。判断に迷う余地がありません。証拠として、社内の説明にも使えます。

注意点も1つあります。取得の結果は、その時点のものです。直した直後に見ても、反映されるまで時間がかかります。変更の直後は、公開されているページの状態を見ます。登録の状態は、後日あらためて確かめます。

確認の頻度も決めておきます。毎日見る必要はありません。サイトの作りを変えたときが、確認の機会です。拡張の機能を追加したとき、見た目を変えたときが該当します。その都度、代表的なページを1つ見れば足ります。

記録の残し方も決めます。確認した日、対象のページ、結果の3つを書きます。次に問題が起きたとき、いつから変わったかを追えます。担当が替わっても引き継げます。手間は数分で済みます。

ブラウザに組み込まれた指定を使う

直し方の第一候補は、標準の指定です。画像の指定に読み込みの方法を1つ書き足すだけで動きます。自分で仕組みを作る必要がありません。差し替えが起きないという事故も、原理的に発生しません。選べるなら、これがもっとも安全です。

書き方も単純です。画像の指定に loading という項目を加えます。後回しにしてよい写真には lazy を指定します。最初に見える範囲の写真には eager を指定するか、何も書きません。この2種類の使い分けだけで足ります。

この方法の利点は、本物の場所が最初から入っている点です。読み込みを遅らせるだけで、指定そのものは変わりません。そのため、読み込み後の中身にも本物が残ります。確認したときに、すぐ判断できます。運用の負担も小さくなります。

移行の順序も決めておきます。まず、自作の仕組みを止めます。次に、標準の指定に置き換えます。最後に、最初に見える範囲だけ対象から外します。この順で進めれば、途中で表示が崩れません。

拡張の機能を使っている場合も同じです。多くの機能には、標準の指定に切り替える設定があります。自作の差し替えを使わない設定を選びます。設定の名前は道具ごとに違います。説明の文書で、標準の指定に触れている箇所を探します。

それでも自作が必要な場合があります。背景の写真を切り替える、といった特殊な要件です。その場合は、次の節の方法を使います。ただし、要件を満たす別の方法がないかを先に検討します。標準で足りるなら、そちらを選びます。

表示領域を監視する仕組みを使う

自作が避けられない場合の方法です。公式が挙げている選択肢の1つが、表示領域を監視する仕組みです。画面に入ったことを検知して、読み込みを始めます。操作を必要としないため、条件を満たします。古い環境向けの補助と組み合わせて使うよう示されています。

もう1つの選択肢も示されています。表示領域の検出を備えた、既存のライブラリを使う方法です。自分で書くより、事故が起きにくくなります。採用の実績があるものを選びます。更新が止まっているものは避けます。

実装のときの確認点は1つです。読み込み後の中身に、本物の場所が入るかどうかです。この1点だけを見れば、条件を満たしているか判断できます。画面の見た目は、判断の材料になりません。確認は、前の節の手順で行います。

外注している場合の伝え方も決めます。「表示を速くしてほしい」だけでは、条件が伝わりません。操作を必要としない実装にすること、を条件に加えます。検収のときに、読み込み後の中身を確認することも伝えます。先に決めておけば、やり直しを防げます。

費用の目安も持っておきます。標準の指定への置き換えは、数時間で終わる規模です。自作の仕組みを入れる場合は、それより時間がかかります。作る前に、標準で足りるかを確認する価値があります。同じ結果なら、簡単なほうを選びます。

• 読み込み後の中身に本物の場所が入っていれば、実装は条件を満たしている
• 見た目が正しく表示されることは、条件を満たしている証拠にならない
• 外注に頼むときは「操作を必要としない実装」を条件として明記する

背景として置いた写真は登録されない

実装とは別の、置き方の問題です。背景として指定した画像は、登録の対象になりません。公式に、明確な形で書かれています。遅延読み込みを直しても、この形なら出てきません。別の問題として扱う必要があります。

公式では、良い例と悪い例が並べて示されています。良い例は、画像として置き、説明の文を添える形です。悪い例は、背景として指定し、文字だけを置く形です。見た目は同じでも、扱いが変わります。設計の段階で分けておく必要があります。

この誤りは、見栄えを優先すると起きます。文字を上に重ねたい、位置を細かく調整したい、といった要件です。背景として置くほうが、調整しやすくなります。その都合で、商品の写真まで背景になっていることがあります。事例のページや導入のページで、よく見かけます。

見分け方も簡単です。写真を右で押して、画像として保存できるかを見ます。できなければ、背景として置かれている可能性があります。ページの中身を表示して確かめれば、確実です。1分で判断できます。

直し方は、置き方を変えるだけです。画像として置き、説明の文を添えます。見た目の調整は、別の指定で行います。作り直しになるほどの手間ではありません。対象は、伝えたい写真だけで足ります。

すべてを直す必要はありません。飾りの模様や、区切りの図形は背景のままで構いません。探されたい写真だけを、画像として置き直します。商品、事例、現場の様子などが対象です。優先順位をつけて進めます。

代わりの読み込み先を必ず用意する

画面の大きさに応じて写真を出し分ける仕組みがあります。端末ごとに、適した大きさの写真を選ぶ作りです。この仕組みには、注意点が公式に書かれています。一部のブラウザや読み手は、この指定を理解できないとされています。そのままでは、写真が届きません。

公式の助言も、あわせて示されています。常に読み込み先の指定を使って、代わりの場所を書くことがすすめられています。出し分けの指定と、基本の指定を両方書く形です。理解できない相手には、基本の指定が届きます。1行足すだけで、取りこぼしを防げます。

この点も、拡張の機能で自動化されていることがあります。生成された中身を見て、基本の指定が入っているか確かめます。入っていなければ、設定を見直します。設定で変えられない場合は、別の方法を探します。確認の手順は、前の節と同じです。

大きさの指定についても触れておきます。縦横の大きさを書いておくと、表示の途中でずれません。読み込みの前に、場所が確保されるためです。利用者の使い勝手にも関わります。遅延読み込みと組み合わせるときは、特に効果があります。

写真の重さも、あわせて見直します。公式でも、高画質の写真は関心を引くと書かれています。一方で、ページ全体が重くなる点にも触れられています。適切な形式と大きさで書き出します。遅延読み込みは、重さそのものを軽くするわけではありません。

この節の要点は1つです。凝った指定を使うときほど、基本の指定を残します。どの相手にも届く道を、必ず1本残しておきます。これは写真に限らず、他の要素でも同じ考え方です。設計の原則として持っておきます。

一覧の続きが読まれない場合の対処

写真そのものではなく、一覧の作りが原因の場合があります。スクロールに応じて、続きが読み込まれる形です。この作りでは、続きの写真が拾われないことがあります。商品の一覧や、事例の一覧で起きやすい形です。対処の方法は、公式に示されています。

第一の条件は、それぞれのかたまりに固有の場所を持たせることです。かたまりごとに、永続的で固有の場所を設定するよう示されています。続きにも、直接たどり着ける道を用意する形です。その場所は、時間が経っても変わらないことが条件です。一時的な指定では要件を満たしません。

第二の条件は、番号の付け方です。公式では、絶対的なページ番号を使うよう示されています。12ページ目、という指定が例として挙げられています。相対的な要素を使うことは避けるよう書かれています。前日を指す指定などが、避けるべき例として挙げられています。

相対的な指定が問題になる理由も明快です。同じ指定でも、日によって中身が変わります。登録された内容と、実際の内容がずれていきます。案内した先に、目当てのものがありません。この状態を避けるための条件です。

第三の条件は、表示の連動です。スクロールに合わせて、表示されている場所を更新する方法が示されています。途中まで見た状態を、そのまま共有できるようになります。利用者にとっても分かりやすくなります。実装は、一般的な仕組みで対応できます。

この3つを満たせば、一覧の続きも届きます。既存の一覧を、すべて作り直す必要はありません。写真から探されたい一覧だけを対象にします。商品の一覧が、もっとも優先度が高い対象です。事例や実績の一覧が、それに続きます。

写真そのものの扱いで損をしていないか

実装が正しくても、選ばれない場合があります。その場合は、写真の扱いを見直します。公式が最も重要と挙げているのは、説明の文です。画像について説明するテキスト、と書かれています。ここが空欄のままになっていることが、少なくありません。

書き方にも、注意が示されています。語を並べるだけの書き方は、避けるよう示されています。悪い例として、語の詰め込みが挙げられています。最良の例は、具体的で自然な説明です。何が写っているかを、そのまま書けば足ります。

ファイル名についても記述があります。簡潔で分かりやすい名前を使うよう示されています。連番の名前は、推奨されていません。撮影の道具が付けた名前のまま、載せている場合があります。書き出しのときに、内容が分かる名前に変えます。

同じ写真の扱いにも、助言があります。複数のページで使うときは、同じ場所を参照するよう示されています。同じ写真を何度も取得する必要がなくなるためです。ページごとに複製していると、この条件から外れます。保管の場所を1つにまとめます。

見つけてもらう手段も用意されています。画像の一覧を送る方法です。一覧を使わなければ見つからない写真の場所を、伝えられます。特に、自作の仕組みを使っている場合に効果があります。対処と併用すると、取りこぼしが減ります。

• 写真の説明の文が、空欄のままになっていないか
• 説明の文が、語を並べただけになっていないか
• ファイル名が、連番のままになっていないか
• 同じ写真を、ページごとに複製していないか
• 画像の一覧を送る仕組みを用意しているか

直したあとに何をどう見届けるか

直したら、反映を待ちます。その場で結果は出ません。再び読み込まれて、登録し直されるまで時間がかかります。早ければ数日、遅ければ数週間が目安になります。焦って何度も変えると、原因が分からなくなります。

見る指標も決めておきます。画像での検索からの表示回数を、分けて見ます。全体の流入では、変化が埋もれます。検索の管理画面で、種類を絞れば確認できます。直す前の数字を控えておくと、比較ができます。

確認の間隔は、2週間ごとで足ります。毎日見ても、判断できる差は出ません。変化が見えないまま1か月が過ぎたら、原因を疑い直します。実装以外の要因が残っている可能性があります。切り分けの手順に戻ります。

直した記録も残します。いつ、どのページの、何を変えたかを書きます。後から効果を確かめるときに必要になります。同時に他の変更をしていると、判断できません。1つずつ変える理由も、ここにあります。

社内への説明も準備します。写真が拾われていなかった、という事実は伝わりにくいものです。読み込み後の中身の画面を、そのまま見せます。仮の画像だけが入っている状態が、証拠になります。説明の手間が減ります。

最後に、再発の防止です。サイトの作りを変えたときの確認手順に、この項目を加えます。拡張の機能を追加したときが、もっとも起きやすい場面です。追加のたびに、代表的なページを1つ確かめます。数分の手間で、数か月の損を防げます。

優先して直す順番を決める

すべてを一度に直す必要はありません。影響の大きいところから着手します。優先すべきは、現物の見た目が判断を左右するページです。商品の一覧と、個別の商品のページが該当します。ここが直れば、効果がもっとも出ます。

次に優先するのは、事例のページです。導入の様子や、設置の状態が写真で伝わるためです。文章だけでは、規模感が伝わりません。写真から探して、事例にたどり着く経路があります。この経路を開けておく価値があります。

三番目は、資料や図の掲載されたページです。仕組みの図や、比較の表が対象になります。調べている段階の人が、図から探すことがあります。図の中の文字は読み取られない前提で、説明の文を添えます。図の内容を、文で補います。

後回しでよいものも決めます。飾りの模様、区切りの図形、背景の写真です。これらは背景として置かれたままで構いません。直す対象を絞ると、作業量が現実的になります。全部を直そうとすると、着手できません。

進め方も決めておきます。まず1つのページで直し、効果を確かめます。効果が確認できたら、同じ型のページに広げます。いきなり全ページを変えると、問題が起きたときに戻せません。段階を踏みます。

記録の形も揃えます。対象のページ、直した内容、直した日を並べた表を作ります。担当が替わっても、続きから進められます。同じ確認を繰り返す無駄も減ります。表計算の1枚で足ります。

まとめ

画像だけが検索に出てこないときは、読み込み方を疑います。検索は画面の操作をしないため、操作が要る作りは届きません。確認は、読み込み後の中身で行います。見た目が正しく表示されることは、判断の材料になりません。この1点を押さえるだけで、切り分けができます。

直し方の第一候補は、ブラウザに組み込まれた指定です。自作の差し替えを使わなければ、事故は起きません。自作が必要なら、表示領域を監視する仕組みを使います。どちらの場合も、確認の方法は変わりません。読み込み後の中身に、本物の場所があるかを見ます。

置き方の問題も、あわせて確かめます。背景として置いた写真は、登録の対象になりません。伝えたい写真だけを、画像として置き直します。説明の文と、分かりやすいファイル名も揃えます。実装と扱いの両面から、取りこぼしを減らします。

※本記事にはAIが活用されています。編集者が確認・編集し、可能な限り正確で最新の情報を提供するよう努めておりますが、情報の完全性、正確性、最新性、有用性等について保証するものではありません。本記事の内容に基づいて行動を取る場合は、読者ご自身の責任で行っていただくようお願いいたします。