In a current Search Off the Document podcast, Google’s Search Relations group cautioned builders towards utilizing CSS for all web site photos.
Whereas CSS background photos can improve visible design, they’re invisible to Google Picture Search. This might result in missed alternatives in picture indexing and search visibility.
Right here’s what Google’s Search Advocates advise.
The CSS Picture Drawback
Throughout the episode, John Mueller shared a recurring situation:
“I had somebody ping me I feel final week or per week earlier than on social media: “It seems like my developer has determined to make use of CSS for the entire photos as a result of they consider it’s higher.” Does this work?”
Based on the Google group, this strategy stems from a misunderstanding of how serps interpret photos.
When visuals are added by way of CSS background properties as a substitute of normal HTML picture tags, they could not seem within the web page’s DOM, and subsequently can’t be listed.
As Martin Splitt defined:
“If in case you have a content material picture, if the picture is a part of the content material… you need an img, a picture tag or an image tag that really has the precise picture as a part of the DOM since you need us to see like ah so this web page has this picture that isn’t simply ornament. It’s a part of the content material after which picture search can decide it up.”
Content material vs. Ornament
The distinction between a content material picture and an ornamental picture is whether or not it provides which means or is only beauty.
Ornamental photos, similar to patterned backgrounds, atmospheric results, or animations, may be safely carried out utilizing CSS.
When the picture conveys which means or is referenced within the content material, CSS is a poor match.
Splitt provided the next instance:
“If I’ve a weblog publish about this particular panorama and I wish to like inform individuals like take a look at this superb panoramic view of the panorama right here after which it’s a background picture… the issue is the content material particularly references this picture, but it surely doesn’t have the picture as a part of the content material.”
In such circumstances, putting the picture in HTML utilizing the img or image tag ensures it’s understood as a part of the web page’s content material and eligible for indexing in Google Picture Search.
What Makes CSS Photos Invisible?
Splitt defined why this occurs:
“For a person wanting on the browser, what are you speaking about, Martin? The picture is true there. However if you happen to take a look at the DOM, it completely isn’t there. It’s only a CSS factor that has been loaded to type the web page.”
As a result of Google parses the DOM to find out content material construction, photos styled purely by means of CSS are sometimes missed, particularly in the event that they aren’t included as precise HTML parts.
This distinction displays a broader internet improvement precept.
Splitt provides:
“There’s ideally a separation between the best way the location seems and what the content material is.”
What About Inventory Images?
The group addressed using inventory images, that are typically added for visible enchantment somewhat than unique content material.
Splitt says:
“The which means remains to be like this picture isn’t mine. It’s a inventory picture that we purchased or licensed however it’s nonetheless a part of the content material,” the group famous.
Whereas these photos might not rank extremely resulting from duplication, implementing them in HTML nonetheless helps guarantee correct indexing and improves accessibility.
Why This Issues
The group highlighted a number of examples the place improper implementation may scale back visibility:
- Actual property listings: House images used as background photos gained’t present up in related picture search queries.
- Information articles: Charts or infographics added by way of CSS can’t be listed, weakening discoverability.
- E-commerce websites: Product photos embedded in background kinds might not seem in shopping-related searches.
What To Do Subsequent
Google’s feedback point out that it is best to observe these greatest practices:
- Use HTML (img or image) tags for any picture that conveys content material or is referenced on the web page.
- Reserve CSS backgrounds for ornamental visuals that don’t carry which means.
- If customers may anticipate finding a picture by way of search, it ought to be within the HTML.
- Correct implementation helps not solely with search engine optimization, but in addition with accessibility instruments and display screen readers.
Wanting Forward
Publishers ought to be conscious of how photos are carried out.
Whereas CSS is a strong software for design, utilizing it to ship content-related photos might battle with greatest practices for indexing, accessibility, and long-term search engine optimization technique.
Take heed to the complete podcast episode beneath:
Featured Picture: Roman Samborskyi/Shutterstock
