< P > Google говорит, что изображения, стилизованные с помощью CSS, не будут индексироваться в поиске изображений, советуя разработчикам использовать HTML -теги для важных визуальных эффектов.
< ul class = "key_takeaways m-bot-40" > < li > Фоновые изображения CSS не индексируются с помощью поиска Google Image.
< li > Google рекомендует использовать HTML IMG или теги изображений для значимых визуальных эффектов.
< li > Декоративные изображения могут оставаться в CSS, если они не способствуют содержанию страницы.
< img Width = "1600" Height = "840" src = "https://www.searchenginejournal.com/wp-content/2025/0727215-f4be-90cf-1f-1f47e91-259.jpeg" Class = "Attachment-Full Size-Full Wp-Post image" Alt = "Google Warns: CSS Background Images Aren’t Индексирован "fetchPriority =" High "decoding =" async "srcset =" https://www.searchenginejournal.com/wp-content/uploads/207/ca427215-f4be-90cf-1f47e91e91-259.jpeg 1600W, https://www.searchenginejournal.com/wp-content/2025/07215-f4be-90cf-1f47e91-259-480x252.jpeg 480w, https://www.searchenginejournal.com/wp-content/2025/07215-f4be-90cf-1f47e91-259-680x357.jpeg 680w, https://www.searchenginejournal.com/wp-content/2025/07215-f4be-90cf-1f47e91e91-259-384x202.jpeg 384w, https://www.searchenginejournal.com/wp-content/2025/07215-f4be-90cf-1f47e91e91-259-768x403.jpeg 768W, https://www.searchenginejournal.com/wp-content/2025/07215-f4be-90cf-1f47e91-259-1024x538.jpeg 1024W "Размеры =" (макс-шиина: 1600px) 100VW, 1600px "/> < P > В недавнем поиске с подкаста Record, Google & Search Team предостерегла разработчиков от использования CSS для всех веб -сайтов.
< P > В то время как фоновые изображения CSS могут улучшать визуальный дизайн, они & rsquo; Повторно для поиска изображений Google. Это может привести к упущенным возможностям в индексации изображений и видимости поиска.
< P > ЗДЕСЬ & S, Google & rsquo; S Адвокаты поиска советуют.
< H2 ~ Задача изображения CSS < p >Во время эпизода Джон Мюллер поделился повторяющейся проблемой:
< blockquote >> 62 ~ & У меня было немного пинга, я думаю, на прошлой неделе или неделю назад в социальных сетях: & Loks Lichs, мой разработчик решил использовать для всех изображений, которые, по их мнению, это & rsquo; лучше лучше. & rdquo; Это работает ? & rdquo;
< P > Согласно команде Google, этот подход проистекает из неправильного понимания того, как поисковые системы интерпретируют изображения.
< p > Когда визуальные эффекты добавляются с помощью фоновых свойств CSS вместо стандартных HTML -тегов изображения, они могут не отображаться на странице & S Dom, и, следовательно, может & t будет проиндексирован. ~/P >< p > как объяснил Мартин Сплит:
< blockquote >> 62 ~ & ldquo; Если у вас есть изображение контента, если изображение является частью контента & Хеллип; Вам нужен IMG, день изображения или день картин, который имеет фактическое изображение как часть DOM, потому что вы хотите, чтобы мы видели, как AH, так что на этой странице есть это изображение, которое не просто украшение. Это часть контента, и этот поиск изображения может его поднять. & Amp; rdquo;
< H2 > Содержание против украшения
< p > Разница между изображением контента и декоративным изображением заключается в том, добавляет ли оно значение или является чисто косметическим.
< p > Декоративные изображения, поиск в виде рисунника, атмосферных эффектов или анимации можно безопасно реализовать использование
< p >Когда изображение передает смысл или упоминается в контенте, CSS плохо подходит.
< p > Splitt предложил следующий пример:
< blockquote > ~ p > & ldquo; Если у меня есть пост в блоге об этом конкретном ландшафте, и я хочу сказать, что люди смотрят на этот удивительный панорамный вид на ландшафт здесь, а затем & rsquo; S Фоновое изображение & Хеллип; Проблема заключается в том, что контент конкретно ссылается на это изображение, но оно не является & rsquo; T есть изображение как часть контента. &
~ 60 > < P > В таких случаях, размещение изображения в HTML UNG или Picture Tage гарантирует его & S, как часть страницы & S Контент и право на индексацию в поиске изображений Google. ~/P > < H2 > Что делает CSS -изображения невидимыми ? < p > Гритт объяснил, почему это происходит:
< Цитата блока >< P >& ldquo; Для пользователя, глядя на браузер, о чем вы говорите, Мартин ? Изображение прямо здесь. Но если вы посмотрите на DOM, это абсолютно amp; rsquo; T там. Это просто вещь CSS, которая была загружена, чтобы стилизовать страницу. & Amp; rdquo;
< P > Потому что Google анализирует DOM, чтобы определить структуру контента, изображения, стильно используемые исключительно через. < P > Это различие отражает более широкий принцип веб -разработки.
< p > Сплит добавляет:
< blockquote > ~ p > & ldquo; Между тем, как выглядит сайт, и то, каким является контент. & Amp;
~/~/блочная цитата > < H2 > Что насчет стоковых фотографий ?
< P > Команда рассмотрела использование стоковых фотографий, которые являются некоторыми -время для визуальной привлекательности, скорее оригинальный контент.
< p > Гритт говорит:
< Цитата блока >< P >& ldquo; Значение все еще похоже на это изображение не мое. Это & rsquo; S Сток -изображение, которое мы вещали или лицензировали, но он все еще является частью контента, & rdquo; Команда отметила.
< P > В то время как тезисные изображения могут не ранжироваться высокой степени из -за дублирования, тема реализации в HTML по -прежнему помогает обеспечить надлежащую индексацию и улучшать доступность.
< H2 > Почему это важно
< p > Команда подчеркнула несколько примеров, где неправильная реализация может снизить видимость:
< ul > < li >< Стронг >Списки недвижимости : домашние фотографии, используемые в качестве фоновых изображений Won & T отображаются в соответствующих запросах поиска изображения.
< li > ~ Strong > Новостные статьи : диаграммы или инфографика, добавленные через CSS Can & rsquo; T будет индексирован, ослабляет обнаружение.
< li >~ 60 > сайты электронной коммерции : изображения продуктов, встроенные в стили фоновых, могут не отображаться в поисках, связанных с покупками.
< H2 > Что делать дальше
< p > Google & rsquo; S прокомментировал, указывайте, что вы должны следовать лучшей практике тезиса:
< ul > < li > Используйте теги HTML (IMG или изображения) для любого изображения, которое передает содержание или упоминается на странице.
< li > Резервные фоны CSS для декоративных визуальных эффектов, которые Don & rsquo; t несут смысл.
< li > Если пользователи могут ожидать, чтобы найти изображение через поиск, он должен быть в HTML.
< li > Правильная реализация помогает не только с SEO, но и с инструментами доступности и считывателем экрана.
< H2 > Глядя в будущее
< P > Издатель должен помнить о том, как реализованы изображения.
< P > В то время как CSS является мощным инструментом для проектирования, используя его для предоставления связанных с контентом, может противоречить передовым методам индексации, доступности и долгосрочной стратегии SEO.
< p > Слушайте полный эпизод подкаста ниже:
< p > ~ iframe title = “Google Warns: Foine Images css are & t indexted” width = “760” height = “https://www.youtube.com/embed/l2e3gbdp_qy?featpeune” “crameborder =” 0 “Alling =” Accelerometer; Автозаплят; Буфер обмена записи; зашифрованная среда; гироскоп; картинка в картинке; Веб-чар “Реферальная политика =” строго-в-крина-кросс-сэригинал “AlluckfullLScreen Loading =” Lazy “>
