Как быть со скрытым изображением, чтобы оно было валидно?
Приветствую.
На сайте есть несколько изображений, но так как их много, было принято решение загружать их только по наведению на определенную область. В общем, это слайдер с картинками, предварительно загружаются три картинки (основная, предыдущая и следующая) и при интересе человека полистать этот слайдер, скрытые картинки будут загружаться.
Код этих картинок банален:
<img data-src="image.png" alt="some">
Так сделано по рекомендации из справки Яндекса, процитирую ее:
Картинки скачиваются по ссылкам из атрибута src тега img, а также атрибутов data-src и data-original (в этом случае наличие ссылки на изображение в атрибуте src не обязательно).
При проверке валидатором разметки, валидатор ругается, пишет, ошибка у вас:
Error: Element img is missing required attribute src.
Вариант с использованием loading="lazy" не подходит из-за того, что картинок много, слайдер листают не часто, грузить их все смысла нет.
Если прописать пустой атрибут src="", то валидатор будет ругаться, но уже на пустой атрибут изображения.
Вот как в таком случае быть, что делать, практики какие-то на эту ситуацию знаете?
Дополнительно:
1. src не указывать. На валидатор забить.
2. вообще не выводить картинки, а генерировать их по необходимости. то есть прописать какой-нибудь <div data-src="image.jpg"></div> и внутри него скриптом вставлять картинку, когда нужно.
upd
3. использовать маленькую заглушку <img src="pixel.gif" data-src="image.jpg">
- Тут получается палка о двух концах:
1. Не укажешь scr, валидатор будет ругаться.
2. Не укажешь img, яндекс не проиндексирует картинку. - weranda, Значит первый вариант - забить на валидатор. Нафиг он вам сдался?
Валидатором хорошо пройтись, чтобы какие-то критические ошибки не пропустить, а это мелочь. - Сергей delphinpro, спасибо за ваше мнение.
- weranda, ну еще я видел, что в src суют картинку мелкую, типа pixel.gif, а потом ее подменяют из data-src. Но как тут будет индексироваться, я не знаю.
- weranda, Сергей delphinpro, для поисковых ботов стоит генерировать или полноценные картинки, или невидимый div со всеми img внутри, или вообще noscript в полный рост.
- Трафик с картинок на сайт зачастую мизер или его вообще нет, думаю не стоит так убиваться из-за индексации картинок, тем более, которые идут в слайдере, а не внутри статьи
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для того чтобы скрытое изображение было валидным и не нарушало правила поисковых систем, можно использовать атрибут "alt" с пустым значением. Этот атрибут является обязательным для тега![]()
и предназначен для предоставления текстовой замены изображения, если оно не может быть загружено или отображено.
Пример кода на языке PHP:
<img src="path/to/image.jpg" alt="">
Таким образом, при отсутствии изображения или его невозможности отобразить, браузер будет показывать пустое пространство вместо изображения, а поисковые системы не будут считать это нарушением правил, так как атрибут "alt" все равно присутствует.
Также можно использовать CSS для скрытия изображения от пользователей, но оставить его доступным для поисковых систем. Для этого можно использовать следующий код:
<img src="path/to/image.jpg" alt="">
Этот код скроет изображение от пользователей, но оно будет доступно для поисковых систем, так как они могут видеть стили страницы. Таким образом, вы сможете сохранить валидность изображения и предоставить его для поисковых систем.