Introduction to Google’s Search Relations Team Advice
In a recent Search Off the Record podcast, Google’s Search Relations team cautioned developers against using CSS for all website images. While CSS background images can enhance visual design, they’re invisible to Google Image Search. This could lead to missed opportunities in image indexing and search visibility.
The CSS Image Problem
During the episode, John Mueller shared a recurring issue: developers using CSS for all images because they believe it’s better. However, this approach stems from a misunderstanding of how search engines interpret images. When visuals are added via CSS background properties instead of standard HTML image tags, they may not appear in the page’s DOM, and therefore can’t be indexed.
Content vs. Decoration
The difference between a content image and a decorative image is whether it adds meaning or is purely cosmetic. Decorative images, such as patterned backgrounds, atmospheric effects, or animations, can be safely implemented using CSS. However, when the image conveys meaning or is referenced in the content, CSS is a poor fit. For example, if a blog post references a specific landscape, using the image as a background may not be suitable.
What Makes CSS Images Invisible?
Martin Splitt explained why this happens: for a user looking at the browser, the image is visible, but if you look at the DOM, it absolutely isn’t there. It is just a CSS thing that has been loaded to style the page. Because Google parses the DOM to determine content structure, images styled purely through CSS are often overlooked, especially if they aren’t included as actual HTML elements.
What About Stock Photos?
The team addressed the use of stock photos, which are sometimes added for visual appeal rather than original content. While these images may not rank highly due to duplication, implementing them in HTML still helps ensure proper indexing and improves accessibility.
Why This Matters
The team highlighted several examples where improper implementation could reduce visibility:
- Real estate listings: Home photos used as background images won’t show up in relevant image search queries.
- News articles: Charts or infographics added via CSS can’t be indexed, weakening discoverability.
- E-commerce sites: Product images embedded in background styles may not appear in shopping-related searches.
What To Do Next
Google’s comments indicate that you should follow these best practices:
- Use HTML (img or picture) tags for any image that conveys content or is referenced on the page.
- Reserve CSS backgrounds for decorative visuals that don’t carry meaning.
- If users might expect to find an image via search, it should be in the HTML.
- Proper implementation helps not only with SEO, but also with accessibility tools and screen readers.
Looking Ahead
Publishers should be mindful of how images are implemented. While CSS is a powerful tool for design, using it to deliver content-related images may conflict with best practices for indexing, accessibility, and long-term SEO strategy.
Conclusion
In conclusion, using CSS for all website images can lead to missed opportunities in image indexing and search visibility. By understanding the difference between content and decorative images, and following best practices for implementation, developers can ensure that their images are properly indexed and accessible. This not only improves SEO but also enhances the overall user experience. By being mindful of how images are implemented, publishers can stay ahead of the game and ensure that their content is visible and accessible to all.