< P > Google говорит, что изображения, стилизованные с CSS < ul class = "key_takeaways m-bot-40" > > 62 ~ CSS Фоновые изображения не индексировали поиск изображений Google.
< li > Google рекомендует использовать HTML IMG или теги изображений для значимых визуальных изображений.
< li > Декоративные изображения могут оставаться в CSS, если они не способствуют содержанию страницы.
< IMG Width = "1600" HEIGHT = "840" SRC = "https://www.searchenginejournal.com/wp-content/uploads/2025/07/ca427215-f4be-928d-90cf-10cf-1). Индекс "fetchPriority =" High "decoding =" async "srcset =" https://www.searchenginejournal.com/wp-content/uploads/2025/07/ca427215-f4be-428d-90cf-1f47e91159. https://www.searchenginejournal.com/wp-content/uploads/2025/07/ca427215-f4be-428d-90cf-1f47e91eaae91-259-480x252 https://www.searchenginejournal.com/wp-content/uploads/2025/07/ca427215-f4be-428d-90cf-1f47e91-259-680x357.jpeg 680w https://www.searchenginejournal.com/wp-content/uploads/2025/07/ca427215-f4be-428d-90cf-1f47e91eaeaeae91-259-3844x202.jpeg https://www.searchenginejournal.com/wp-content/uploads/2025/07/ca427215-f4be-428d-90cf-1f47e911-259-768x403.jpeg 768W. https://www.searchenginejournal.com/wp-content/uploads/2025/07/ca427215-f4be-428d-90cf-1f47e91eaeae91-259-1024x538 1600px) 100 V./> < P > В недавнем поиске записи, Google & Rsquo; S Коэффициент поиска команды предупредил разработчиков от использования CSS для всех веб -сайтов.
< p >Хотя фоновые изображения CSS могут улучшить визуальный дизайн, они невидимым для поиска изображений Google. Это может привести к отсутствующим возможностям в индексации изображений и видимости поиска.
< P > ЗДЕСЬ & Rsquo; S, Google & Rsquo; S Поиск адвокатов.
< H2 > Изображение изображение CSS < p > Во время эпизода Джон Мюллер поделился повторяющимся вопросом:
< Blockquote >< P > & ldquo; У меня был кто -то, кто меня пингал, я думаю, на прошлой неделе или неделю до этого в социальных сетях: & ldquo; Похоже, что мой разработчик решил использовать CSS для всех изображений, потому что они думают, что это лучше. & Усилитель; Rdquo; Rdquo; Rdquo; Rdquo; Это работает ? & Rdquo;
< P > По команде Google этот подход следует из неправильного понимания того, как поисковые системы интерпретируют изображения.
< p >Когда визуальные материалы добавляются из -за фона CSS вместо стандартных HTML -изображений, они могут не отображаться на странице DOM и, следовательно, могут & Rsquo; T должен быть проиндексирован.
~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ < Blockquote >< P > & ldquo; Если у вас есть изображение контента, если изображение является частью контента & Хеллип; Вам нужен IMG, тег изображения или тег изображения, который на самом деле имеет реальное изображение как часть DOM, поскольку вы хотите, чтобы мы видели как AH, так что на этой странице есть это изображение, которое не просто украшение. Это часть содержимого, а затем поиск изображения может его поднять. < H2 > Содержание против украшения
< p > Разница между изображением содержания и декоративным изображением заключается в том, дает ли оно значение или чисто косметическое.
< p >Декоративные изображения, такие как фоновый рисунок, атмосферные эффекты или анимация, могут быть безопасно реализованы с помощью CSS.
< P > Когда изображение передает значение или относится к контенту, CSS является плохим устройством.
< p > Splitt предложил следующий пример:
< Blockquote >< P > & ldquo; Если у меня есть публикация в блоге об этом конкретном ландшафте, и я хочу любить рассказывать людям, как взглянуть на этот удивительный панорамный взгляд на ландшафт здесь, и тогда это является фоновым изображением; Проблема заключается в том, что содержимое конкретно ссылается на это изображение, но оно не имеет изображения как часть контента. < P > В таких случаях размещение изображения в HTML с помощью IMG TAG или Images предоставляет его & Rsquo; S, который понимается как часть страницы & Rsquo; S содержание и подходит для индексации в поиске изображения Google.
~ < H2 >Что изображение CSS невидимо ? < p > Splitt объяснил, почему это происходит:
< Block Flower >< P > & ldquo; Для пользователя, который смотрит на браузер, о чем вы говорите, Martin ? Изображение здесь. Но если вы посмотрите на DOM, его абсолютно нет. Это всего лишь такая вещь CSS, которая была загружена для стиля страницы. < P > Поскольку Google разбирается с DOM, чтобы определить структуру содержания, изображения, которые стилизованы исключительно через CSS < P > Это различие отражает более широкий принцип разработки веб -сайтов.
< p > Splitt добавляет:
< Blockquote >< P > & ldquo; В идеале, есть разделение между методом, похоже на сайт, и что есть. < H2 > Как насчет запасов ?
< P > Команда обратилась к использованию фотографий, которые иногда добавляются для визуальной привлекательности, а не исходного контента.
< p > Splitt говорит:
< Block Flower >< P >& ldquo; Значение по -прежнему так, как это изображение не мое. Это & Rsquo; S -запасное изображение мы купили или лицензировали, но все еще является частью контента, & Rdquo; Команда отметила.
< P > Хотя эти изображения не могут быть оценены с помощью дублирования, реализация в HTML по -прежнему помогает обеспечить надлежащую индексацию и улучшать доступность.
< H2 > Почему оно имеет значение
< p > Команда определила несколько примеров, где неправильная реализация могла бы снизить видимость:
< ul > < l >< Strong > Список недвижимости : домашние фотографии, используемые в качестве фоновых изображений Won & Rsquo; T отображаются в соответствующих запросах поиска изображения.
< li >< Стронг > Новостные статьи : диаграммы или инфографика, добавленные через CSS Can & Rsquo; T можно было проиндексировать, ослабление открытия.
< l >< Строгие > e -Commerce сайты : изображение продукта, встроенного в фоновый фон, может не отображаться в поисках покупок.
< H2 > Что делать дальше
< p > Google & Rsquo; Комментарии указывают, что вы должны придерживаться этих лучших практик:
< ul > < li > Используйте HTML -теги (IMG или изображение) для любого изображения, которое передает содержание или относится к странице.
< li > CSS Фоновое резерв для декоративных визуальных изображений, которые не имеют значения; < li > Если пользователи могут ожидать поиска изображения по поиску, оно должно быть в HTML.
< L > Правильная реализация помогает не только SEO, но и с инструментами доступности и считывателями экрана.
~
< H2 > с нетерпением жду
< P > Издатели должны помнить, как реализовано изображение.
< p > Хотя CSS является мощным инструментом проектирования, использующим его для доставки изображений, связанных с контентом < P > Слушайте полный эпизод подкастов ниже:
< p >< iframe title = "Google Warns: CSS -фоновые изображения Aren & rsquo; t Indexted" width = "760" Высота = ". Allow =" Accelerometer; Автозаплят; буфер обмена; зашифрованные СМИ; гироскоп; картинка в карте;