One SEO professional asked John Mueller about handling CSS background hero images.
The SEO pro explained: they have typical homepage features – such as a hero image. The hero image is embedded not with the image tag, but rather as a background image.
With this, it lacks the ability to add an alt attribute to describe the image. It’s possible there are some technical aspects as to why the agency used this approach for us.
But they are wondering: what is the recommendation if you want to have the image indexed so that it is available on image search on Google? Also, they wanted to know how Google determines if the image is embedded as a background image and its relevance.
Can Google also detect that there is no way to put this behind the image?
John explained that if you’re using something like a CSS background attribute to display an image, then Google would not pick this up for image search.
It’s possible it may have changed recently, but as far as John knows, this is how it is still handled.
In the past, Google would only focus on the image tag, and the source attribute of the image tag. And if you had a picture element, that’s still within the same thing.
The other option was, if you link to an image file directly, then Google would also be able to pick that up for image search.
But, if it’s purely a CSS background image, then Google at least didn’t pick this up in the past. And it sounds like this is still the case.
One thing you could potentially do to embed an image is make sure that it’s at least linked to from the page itself, particularly if you care about it for image search.
Sometimes, it’s not critical for that image to be findable in image search.
If you have something like a decorative image of your company’s headquarters or something, then in image search, it’s going to be rare that someone actually searches for that.
This is something where if you want some traffic from image search, then you need to make sure that you implement images on your page in a way that Google can read it.
This happens at approximately the 53:42 mark in the video.
John Mueller Hangout Transcript
SEO Professional 7 53:42
Let me first unmute. Good morning, John from Zurich. Good morning, everyone. Hi, I have two questions. I also raised one of the questions earlier ahead of the event. So we have, typical on homepages, a hero image and the hero image is embedded not with the image tag, but rather as a background image. With that, we’re lacking the possibility to add an alt attribute to describe the image.
There are maybe some technical aspects why the agency has done that approach for us. But I was wondering, what is the recommendation if you want to have the image indexed? So, be available on the image search on Google, but also to understand how is Google judging you know, if the image is embedded as a background image, be relevant for the page? It also detects that we can’t put behind the image.
John 54:54
Yeah. So I think for the most part, if you’re using something like a CSS background attribute to display an image, then we would not pick that up for image search. It might be that that has changed in the meantime. But at least in the past, it was such that we only focused on the image tag, kind of the the source attribute for the image tag. And if you had a picture element, and that’s still kind of within the same thing.
And the other option was, if you link to an image file directly, then we would also be able to pick that up for image search. But if it’s purely a CSS background image, then we, at least in the past, did not pick that up. But it sounds like that’s still the case. So it’s tricky for me to say how you can best embed that. One, one thing you could potentially do is make sure that it’s at least linked on the page itself, if you care about it for image search. It is also something where sometimes it doesn’t, it’s not critical for that image to be findable in image search.
So if you have something like a decorative image of your, I don’t know, your company’s headquarters or something, then in image search, it’s going to be rare that someone actually searches for that. So that’s something where you also have to almost make a judgment call of, well, technically, if, like, we want traffic from Image Search, this is the way to do it. But in practice, that particular traffic from Image Search is not critical for our website, so we don’t we don’t necessarily care about that.
