遅延読み込みのプレースホルダー画像をGoogleにインデックスさせない3つの方法

[レベル: 中級]

この記事では、Lazy-load で利用するプレースホルダー画像を Google にインデックスさせないようにする方法を紹介します。

JavaScript で画像を遅延読み込みするときに、JavaScript の実行が完了して本来の画像が読み込まれるまでの間、代わりに読み込ませるのが画像がプレースホルダーです。

プレースホルダー画像は実質的に意味があるものではありません。
検索の観点から見れば、インデックスさせる必要はありません。
そのため、プレースホルダー画像が Google に取得されないようにするにはどうしたらいいかを、あるサイト管理者がマーティンに Twitter で質問しました。

プレースホルダー画像をインデックスさせないようにするオススメの 3 つの方法

マーティンは 3 つの方法を提案しました。

  • プレースホルダーを使わない。CSL を発生させないように、画像には width/height 属性を追加しておく
  • CSS の background-image プロパティを使って画像を指定する。Google のインデックスを避けるため
  • ネイティブ Lazy-load を使う。画像には width/height 属性を追加しておく

プレースホルダー画像をそもそも使わなければ、たしかにインデックスされることはありませんね。
ただし、何もなかったところにあとから画像が表示されるとレイアウト移動が発生します。
Core Web Vitals の 3 要素の 1 つ CLS です。
img 要素に、width 属性と height 属性を設定することで CLS を防ぎます。

プレースホルダー画像を使うのであれば、その画像を CSS で指定します。
Googlebot は CSS で表示される画像をインデックスしません。
画像検索に表示させたい画像は CSS で指定してはいけませんが、プレースホルダー画像なら問題ありません。
逆手に取った方法です。

ネイティブ Lazy-load は、JavaScript を使わずに loading 属性で設定する遅延読み込みです。
ブラウザの標準機能として Lazy-load を実行します。
ネイティブ Lazy-load の場合もプレースホルダー画像は不要です。

1 つ問題点があるとすれば、すべてのブラウザが loading 属性をまだサポートしていない点でしょうか。
特に、Safari がまだ正式サポートしていません(時間の問題かもしれませんが)。

なお、ネイティブ Lazy-load と JavaScript の Lazy-load を併用する方法もあります。

プレースホルダー画像がインデックスされたとしても、通常は検索に悪い影響を与えるとは思いません。
それでも、プレースホルダーをインデックスさせたくないときは、マーティンのアドバイスを参考にするといいでしょう。