Ad

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:

<figure></figure>

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.

Ad

Answer

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">
Ad
source: stackoverflow.com
Ad