Google предупреждает: фоновые изображения CSS не индексируются ❗️Google утверждает, что изображения, оформленные с помощью CSS, не будут индексироваться в Поиске изображений, и рекомендует разработчикам использовать HTML-теги для важных визуальных данных. ⚠️ Хотя фоновые изображения CSS могут улучшить визуальный дизайн, они не видны Google Поиску по картинкам. Это может привести к упущенным возможностям индексации изображений и видимости в результатах поиска. Вот что советуют специалисты по поиску Google. Проблема CSS-изображений ⚠️ Если визуальные элементы добавляются с помощью свойств фона CSS вместо стандартных тегов изображений HTML, они могут не отображаться в DOM страницы и, следовательно, не могут быть проиндексированы. ✅ В таких случаях размещение изображения в HTML с использованием тега img или picture гарантирует, что оно будет воспринято как часть содержимого страницы и будет пригодно для индексации в поиске по картинкам Google. Что делает CSS-изображения невидимыми? ⚠️ Поскольку Google анализирует DOM для определения структуры контента, изображения, стилизованные исключительно с помощью CSS, часто упускаются из виду, особенно если они не включены в качестве реальных элементов HTML. ❗️Это различие отражает более широкий принцип 🕸 веб-разработки. «В идеале должно быть разделение между внешним видом сайта и его содержанием». А как насчет стоковых 🖼 фотографий? Команда рассмотрела вопрос использования стоковых фотографий, которые иногда добавляются для визуальной привлекательности, а не для оригинального контента. Сплитт говорит: «Смысл в том, что это изображение мне не принадлежит. Это стоковая картинка, которую мы купили или лицензировали, но она всё равно является частью контента», — отметила команда. ❗️Хотя эти изображения могут не занимать высокие позиции из-за дублирования, их реализация в HTML все равно помогает обеспечить правильную индексацию и улучшает доступность. Почему это важно Команда выделила несколько примеров, когда неправильная ⚙️ реализация может снизить видимость: Объявления о недвижимости : фотографии домов, используемые в качестве фоновых изображений, не будут отображаться в соответствующих поисковых запросах по изображениям. Новостные статьи : 📊 диаграммы или инфографика, добавленные с помощью CSS, не могут быть проиндексированы, что снижает их 🔎 обнаруживаемость. Сайты электронной коммерции : изображения товаров, встроенные в стили фона, могут не отображаться в результатах поиска, связанных с покупками. Рекомендации Комментарии Google указывают на необходимость следовать следующим рекомендациям: 1️⃣ Используйте теги HTML ( imgили picture) для любого изображения, которое передает содержание или на которое есть ссылка на странице. 2️⃣ Используйте фоны CSS для декоративных визуальных элементов, которые не несут никакой смысловой нагрузки. 3️⃣ Если пользователи ожидают найти изображение через поиск, оно должно быть в HTML. 4️⃣ Правильная реализация помогает не только с SEO, но и с инструментами доступности и программами чтения с экрана. ⚠️ Хотя CSS является мощным инструментом дизайна, его использование для предоставления изображений, связанных с контентом, может противоречить лучшим практикам индексации, доступности и долгосрочной стратегии SEO.