Google Image Search and Images in CSS
With CSS it has long been a practice to include images as backgrounds, but as it turns out, images included as CSS backgrounds will not be indexed by Google Image search.
Edited: 2018-01-12 21:13
Google Image search apparently does not index images from CSS StyleSheets. That would be the images included with the background property in either internal or external styles.
Images included this way will need a width and height to avoid the element "collapsing" due to lack of content. This is because a background-image is not considered content on its own. img elements will automatically adjust to the size of the image included in the src attribute, but it is often a good idea to include a width and height anyway.
#logo {
background: url("logo.png") no-repeat;
width: 200px;
height: 300px;
}
To have your images indexed by search engines, you should be including them directly in the HTML with the img elements instead. The src attribute should point to the image file – and do not forget to fill out the alt attribute to help with indexing.
<img src="logo.png" alt="Logo">
John Mueller recently explained this in a Google Webmaster video on YouTube, around 20:55. The video is included below:
How to get images indexed
This means that you will have to include your images directly in the HTML if you want them to be indexed, and this is were the img element comes in.
It is typically fine to include certain images and graphics as CSS backgrounds, but you should not count on them being indexed by Google or other search engines. If your images are used primarily for decoration, then you can include them in the CSS just fine.
If an image is part of the main content, such as an article or blog post, then you should include it in the HTML.
<img src="images-in-search.png" alt="Images appearing in search.">
The src and alt attributes
The src attribute should contain the URL for the image you want to include, while the alt attribute is important for screen readers and when describing what the image is/represents to search engines.
It is generally not recommended to include images without an alt attribute. When it comes to SEO, the contents of alt attributes might help rank a given page, and the presence of an image itself might count as a tiny quality signal.
Do not use alt attributes to repeat keywords in unnatural ways. When you write the content, it should make sense to your users. Both in cases where the image does not show up, and for the few users of screen readers that might visit your website.
Tell us what you think: