How To Add Alt And Title For SEO To A Responsive Design Using Figure Tag

- 1 answer

How can I build a responsive Mobile First page with images optimized for SEO with Alt and Title?

At the moment I change the image source in the CSS file like this:

section.value-offer > div.container > figure {
    background: url('../Images/Shop/img.childrens.480x320.jpg') top center no-repeat;
    background-size: cover;
    padding-bottom: 66.66666666%;
    height: 0;

And in the HTML I use only:


Then in the CSS responsive part for the next page size I do:

@media only screen and (min-width : 480px) {
    background: url('../Images/Shop/img.childrens.768x511.jpg') top center no-repeat;

But I can't do:

<figure alt="Image of Childrens" title="Image of Childrens"></figure>

And I can't put the IMG tag with the SRC because I can't change it using CSS only.



If you would like these images to ever rank in any modern search engine image search (and that is the purpose of your question I guess) then you should not use them as css background images as this would not get indexed by them. Going for semantic html (<figure>) is a right choice but depending on the image and content structure you can also use plain old <img> tag. Here is a good starting point if you need to find out more about responsive images.

Also I would recommend using fore mentioned scrset, despite IE's lack of adoption of this attribute. There is a easy work around, IE will ignore scrset attribute but still use the src so you can source your default IE image from there:

<img src="default.jpg" srcset="medium.jpg 1000w, large.jpg 2000w" alt="your_alt">