What will be indexed better in search engines: img tags or background-images with screenreader tags?
Use an img tag. It's better for a number of reasons.
When to use <img />
- When Your Image needs to be indexed by search engine
- If it has a relation to content not to design.
- If your image is not too small ( not iconic images ).
- Images where you can add
alt
andtitle
attribute.
When to use CSS background-image
- Images Purely Used to Design.
- No Relation With Content.
- Small Images which we can play with CSS3.
- Repeating Images ( In blog author icon , date icon will be repeated for each article etc.,).
Based on the list above and some observations we have these reasons to use an img
tag:
- A logo image has semantic meaning and has relation to the content. So this is just the right thing to do from a semantical point of view.
- Google does not automatically index background images, otherwise the image search results would be filled with image sprites. Google hasn't officially made a statement about this but it will most likely add more value to the div with an aria label, although an image will most likely still have more value. (Bing supposedly doesn't do anything with this though)
So: It's most likely best to use an img
tag
2018 Status:
Google's John Mueller said in a webmaster hangout at the 20:55 mark that Google Image search does not index and rank images from CSS background code. He said if you want your images to rank in Google Image search then you best use normal image tag with the source attribute pointing at the image.
Here is a source:
Youtube
Article