[レベル: 中級]
この記事では、Lazy-load で利用するプレースホルダー画像を Google にインデックスさせないようにする方法を紹介します。
JavaScript で画像を遅延読み込みするときに、JavaScript の実行が完了して本来の画像が読み込まれるまでの間、代わりに読み込ませるのが画像がプレースホルダーです。
プレースホルダー画像は実質的に意味があるものではありません。
検索の観点から見れば、インデックスさせる必要はありません。
そのため、プレースホルダー画像が Google に取得されないようにするにはどうしたらいいかを、あるサイト管理者がマーティンに Twitter で質問しました。
That does sound like inviting trouble.
There are three safe options, I'd say:1.) No placeholder, but specify width and height attributes to avoid shifting
2.) Placeholder using CSS background-image to avoid Google picking up undesired imgs
3.) Native lazyload + width&height— Martin Splitt @ home 🏡🇨🇭 (@g33konaut) September 29, 2020
プレースホルダー画像をインデックスさせないようにするオススメの 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 を併用する方法もあります。
プレースホルダー画像がインデックスされたとしても、通常は検索に悪い影響を与えるとは思いません。
それでも、プレースホルダーをインデックスさせたくないときは、マーティンのアドバイスを参考にするといいでしょう。