seo Question posted in
Some basic information to get you started with this can be found here.

How to add Alt and Title for SEO to a Responsive design using Figure tag

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.

Tags:

2

Answers


  1. 0

    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">
    Login or Signup to reply.
  2. 0

    If you have SEO / cross browser (including IE) constraints, I would suggest this

    Have a mobile first approach with such HTML

    <figure alt="Image of Childrens" title="Image of Childrens">
<img alt="Image of Childrens" title="Image of Childrens" src="../Images/Shop/img.childrens.480x320.jpg" />
</figure>

    It means that by default, client (mobile here) will fetch the smaller image dedicated to mobile

    Then, for larger screen (desktop or even tablet), you will have such applied CSS

        @media only screen and (min-width : 768px) and (max-width: 1023) {
        section.value-offer > div.container > figure{
background: url('../Images/Shop/img.childrens.768x511.jpg') top center no-repeat;
    }
}
   @media only screen and (min-width : 1024px) and (max-width: 1280) {
        section.value-offer > div.container > figure{
background: url('../Images/Shop/img.childrens.1024x720.jpg') top center no-repeat;
    }
}

    If your media queries are well defined, it means that yes: desktop will download the smaller image in all cases + a much larger one.
    But at least, you limit the size of downloaded assets for mobile, also assuming that desktop are on a more solid connexion.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search