https://www.searchenginejournal.com/google-warns-css-background-images-arent-indexed/552323/
Фоновые изображения CSS не индексируются поиском по картинкам Google.
Google рекомендует использовать HTML-теги img или picture для содержательных визуальных материалов.
Декоративные изображения могут оставаться в CSS, если они не вносят вклад в содержимое страницы.
Мэтт Г. Саузерн
СОТРУДНИКИ SEJ
Мэтт Г. Саузерн
9 секунд назад
⋅
4 мин. чтения
Google предупреждает: фоновые изображения CSS не индексируются
В недавнем подкасте Search Off the Record команда Google Search Relations предостерегла разработчиков от использования CSS для всех изображений на веб-сайте.
Хотя фоновые изображения CSS могут улучшить визуальный дизайн, они не видны Google Поиску по картинкам. Это может привести к упущенным возможностям индексации изображений и видимости в результатах поиска.
Вот что советуют специалисты по поиску Google.
Проблема CSS-изображений
В этом выпуске Джон Мюллер поделился повторяющейся проблемой:
Кажется, на прошлой или позапрошлой неделе кто-то написал мне в социальных сетях: «Похоже, мой разработчик решил использовать CSS для всех изображений, потому что считает, что так лучше». Это работает?»
По мнению команды Google, такой подход обусловлен непониманием того, как поисковые системы интерпретируют изображения.
Если визуальные элементы добавляются с помощью свойств фона CSS вместо стандартных тегов изображений HTML, они могут не отображаться в DOM страницы и, следовательно, не могут быть проиндексированы.
Как объяснил Мартин Сплитт:
«Если у вас есть изображение в контенте, если изображение является его частью… вам нужен imgтег изображения или pictureтег, который фактически содержит само изображение как часть DOM, потому что вы хотите, чтобы мы увидели: «Ага, на этой странице есть изображение, и оно не просто украшение». Оно является частью контента, и тогда поиск по изображениям сможет его обнаружить».
Содержание против декора
Разница между содержательным и декоративным изображением заключается в том, добавляет ли оно смысл или является исключительно косметическим средством.
Декоративные изображения, такие как узорчатые фоны, атмосферные эффекты или анимация, можно безопасно реализовать с помощью CSS.
Если изображение несет смысл или на него есть ссылка в контенте, CSS не подходит.
Сплитт привел следующий пример:
«Если у меня есть запись в блоге об этом конкретном ландшафте и я хочу сказать людям: «Посмотрите на этот потрясающий панорамный вид ландшафта», а это фоновое изображение... проблема в том, что контент ссылается на это изображение, но само изображение не является его частью».
В таких случаях размещение изображения в HTML с использованием тега imgили pictureгарантирует, что оно будет воспринято как часть содержимого страницы и будет пригодно для индексации в поиске по картинкам Google.
Что делает CSS-изображения невидимыми?
Сплитт объяснил, почему это происходит:
«Мартин, для пользователя, который смотрит в браузер, о чём ты говоришь? Изображение там есть. Но если посмотреть на DOM, его там совершенно нет. Это просто CSS-код, загруженный для оформления страницы».
Поскольку Google анализирует DOM для определения структуры контента, изображения, стилизованные исключительно с помощью CSS, часто упускаются из виду, особенно если они не включены в качестве реальных элементов HTML.
Это различие отражает более широкий принцип веб-разработки.
Сплитт добавляет:
«В идеале должно быть разделение между внешним видом сайта и его содержанием».
А как насчет стоковых фотографий?
Команда рассмотрела вопрос использования стоковых фотографий, которые иногда добавляются для визуальной привлекательности, а не для оригинального контента.
Сплитт говорит:
«Смысл в том, что это изображение мне не принадлежит. Это стоковая картинка, которую мы купили или лицензировали, но она всё равно является частью контента», — отметила команда.
Хотя эти изображения могут не занимать высокие позиции из-за дублирования, их реализация в HTML все равно помогает обеспечить правильную индексацию и улучшает доступность.
Почему это важно
Команда выделила несколько примеров, когда неправильная реализация может снизить видимость:
Объявления о недвижимости : фотографии домов, используемые в качестве фоновых изображений, не будут отображаться в соответствующих поисковых запросах по изображениям.
Новостные статьи : Диаграммы или инфографика, добавленные с помощью CSS, не могут быть проиндексированы, что снижает их обнаруживаемость.
Сайты электронной коммерции : изображения товаров, встроенные в стили фона, могут не отображаться в результатах поиска, связанных с покупками.
Что делать дальше
Комментарии Google указывают на необходимость следовать следующим рекомендациям:
Используйте теги HTML ( imgили picture) для любого изображения, которое передает содержание или на которое есть ссылка на странице.
Используйте фоны CSS для декоративных визуальных элементов, которые не несут никакой смысловой нагрузки.
Если пользователи ожидают найти изображение через поиск, оно должно быть в HTML.
Правильная реализация помогает не только с SEO, но и с инструментами доступности и программами чтения с экрана.
Взгляд в будущее
Издателям следует обращать внимание на то, как используются изображения.
Хотя CSS является мощным инструментом дизайна, его использование для предоставления изображений, связанных с контентом, может противоречить лучшим практикам индексации, доступности и долгосрочной стратегии SEO.