CSSで読み込む画像をグーグルはインデックスしない
これは便利! コアウェブバイタル改善に役立つ3つのツール【SEO情報まとめ】[Web担当者Forum]
画像検索を重視するならば、検索ニーズがある画像はCSSで読み込むのではなく、HTML内にimg要素として記述しなければいけないようだ。
CSSの指定で読み込む背景画像をGoogle検索がどう扱いについて、ジョン・ミューラー氏は次のようにコメントした。
■Google JohnMueller(ジョン・ミューラー)氏(@JohnMu)
最後に私が確認したときには、CSSの背景画像を画像検索には使っていなかった。Last I checked, we don't use CSS background images for image search, so the point might not be that relevant (also, what would a background image rank for?). A simple way to check for aria labels indexing is to search for the text in them: https://t.co/w5dOfsjg0a (=not indexed)
— 🍌 John 🍌 (@JohnMu) April 12, 2021
※筆者注: もともとの質問は、CSSの背景画像に付けた aria-label 属性のテキストを alt 属性のようにグーグルは扱うかどうかというもので、CSS画像をそもそもインデックスしないから無関係ということになる。CSS画像をグーグルがインデックスしないのは背景画像に限ったことではなく、コンテンツ内の画像にも当てはまる。画像検索のドキュメントにも書いてある。
Google ではページの HTML を解析して画像をインデックスに登録しますが、CSS の画像はインデックスに登録しません。良い例:
<img src="puppy.jpg" alt="A golden retriever puppy" />悪い例:
<div style="background-image:url(puppy.jpg)">A golden retriever puppy</div>画像検索にインデックスさせたい画像はCSSではなくHTMLの img タグで読み込ませよう。
※筆者補足: 構造化データで指定した画像もグーグルはインデックスする
SEOコンサルタントのまとめ
(CSSの指定で読み込む背景画像について)
「最後に私が確認したときには、CSSの背景画像を画像検索には使っていなかった。」