Как добавить Alt и Title для SEO в адаптивный дизайн с помощью тега Figure

Question

Как создать отзывчивую первую страницу для мобильных устройств с изображениями, оптимизированными для SEO с помощью Alt и Title?

В данный момент я меняю источник изображения в файле CSS следующим образом:

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;
}

А в HTML я использую только:

<figure></figure>

Затем в части, отвечающей CSS, для следующего размера страницы я делаю:

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

Но я не могу сделать:

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

И я не могу поместить тег IMG с SRC, потому что я не могу изменить его, используя только CSS.

Answer 1

Если у вас есть ограничения SEO / кросс-браузер (включая IE), я бы предложил это

Мобильный подход с таким 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>

Это означает, что по умолчанию клиент (мобильный) здесь будет получать меньшее изображение, выделенное для мобильного

Тогда для более крупного экрана (настольного компьютера или даже планшета) у вас будет такой примененный 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;
    }
}

Если ваши медиа-запросы четко определены, это означает, что да: рабочий стол будет загружать меньшее изображение во всех случаях + намного большее изображение. Но, по крайней мере, вы ограничиваете размер загружаемых ресурсов для мобильных устройств, также полагая, что настольные компьютеры находятся в более надежном соединении.

Answer 2

Если вы хотите, чтобы эти изображения когда-либо ранжировались в любом современном поисковике изображений в поисковых системах (и я полагаю, что это цель вашего вопроса), то вам не следует использовать их в качестве фоновых изображений CSS, поскольку они не будут проиндексированы ими. Переход к семантическому html (<figure>) - правильный выбор, но в зависимости от изображения и структуры контента вы также можете использовать старый тег <img>. Вот хорошая отправная точка, если вам нужно узнать больше о отзывчивых изображениях .

Также я бы рекомендовал использовать вышеупомянутый scrset, несмотря на то, что IE не принимает этот атрибут. Обойти это легко, IE будет игнорировать атрибут scrset, но все равно будет использовать src, поэтому вы можете получить исходное изображение IE по умолчанию:

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