В недавнем Поиск из подкаста записиПоисковая команда Google предоставила разработчикам от использования CSS для всех изображений веб -сайта.
В то время как фоновые изображения CSS могут улучшить визуальный дизайн, они невидимы для поиска изображений Google. Это может привести к упущенным возможностям в индексации изображений и видимости поиска.
Вот что советуют защитники поиска Google.
Содержание
Проблема с изображением CSS
Во время эпизода Джон Мюллер поделился повторяющимся вопросом:
«У меня был кто -то, я думаю, на прошлой неделе или неделю назад в социальных сетях:« Похоже, мой разработчик решил использовать CSS для всех изображений, потому что они считают, что это лучше ». Это работает? »
Согласно команде Google, этот подход проистекает из неправильного понимания того, как поисковые системы интерпретируют изображения.
Когда визуальные эффекты добавляются с помощью фоновых свойств CSS вместо стандартных HTML -тегов изображения, они могут не отображаться в DOM страницы и, следовательно, не могут быть проиндексированы.
Как объяснил Мартин Спритт:
«Если у вас есть изображение контента, если изображение является частью контента… вы хотите
imgтег изображения илиpictureТег, который на самом деле имеет фактическое изображение как часть DOM, потому что вы хотите, чтобы мы видели как AH, так что на этой странице есть это изображение, которое не просто украшение. Это часть контента, а затем поиск изображения может его поднять ».
Контент против украшения
Разница между изображением контента и декоративным изображением заключается в том, добавляет ли оно значение или является чисто косметическим.
Декоративные изображения, такие как узорчатые фоны, атмосферные эффекты или анимация, могут быть безопасно реализованы с использованием CSS.
Когда изображение передает смысл или упоминается в контенте, CSS плохо подходит.
Splitt предложил следующий пример:
«Если у меня есть пост в блоге об этом конкретном ландшафте, и мне нравится рассказывать людям, как смотреть на этот удивительный панорамный вид ландшафта здесь, а тогда это фоновое изображение… Проблема заключается в том, что контент конкретно ссылается на это изображение, но у него нет изображения как часть контента».
В таких случаях размещение изображения в HTML с использованием img или picture Тэг гарантирует, что он понят как часть контента страницы и имеет право на индексацию в поиске изображений Google.
Что делает CSS -изображения невидимыми?
Спритт объяснил, почему это происходит:
«Для пользователя, глядя на браузер, о чем вы говорите, Мартин? Изображение прямо здесь. Но если вы посмотрите на DOM, его абсолютно нет. Это просто вещь CSS, которая была загружена для стиля страницы».
Поскольку Google анализирует DOM, чтобы определить структуру контента, изображения, стильно продуманные через CSS, часто упускаются из виду, особенно если они не включены в качестве фактических HTML -элементов.
Это различие отражает более широкий принцип веб -разработки.
Сплит добавляет:
«В идеале есть разделение между тем, как выглядит сайт, и каким контентом».
А как насчет фондовых фотографий?
Команда обратилась к использованию стоковых фотографий, которые иногда добавляются для визуальной привлекательности, а не оригинального контента.
Сплит говорит:
«Значение все еще похоже на то, что это изображение не мое. Это стоковое изображение, которое мы купили или лицензировали, но он все еще является частью контента», — отметила команда.
Несмотря на то, что эти изображения могут не входить в силу из -за дублирования, их внедрение в HTML по -прежнему помогает обеспечить правильную индексацию и улучшать доступность.
Почему это важно
Команда подчеркнула несколько примеров, когда неправильная реализация может снизить видимость:
- Списки недвижимости: Домашние фотографии, используемые в качестве фоновых изображений, не отображаются в соответствующих запросах поиска изображения.
- Новостные статьи: Диаграммы или инфографика, добавленные через CSS, не могут быть индексированы, ослабляя обнаруженность.
- Сайты электронной коммерции: Изображения продуктов, встроенные в стили фоновых, могут не отображаться в поисках, связанных с покупками.
Что делать дальше
Комментарии Google указывают на то, что вы должны следовать этим лучшим практикам:
- Используйте HTML (
imgилиpicture) теги для любого изображения, которое передает содержание или упоминается на странице. - Зарезервируйте фон CSS для декоративных визуальных эффектов, которые не имеют смысла.
- Если пользователи могут ожидать поиска изображения через поиск, оно должно быть в HTML.
- Правильная реализация помогает не только с SEO, но и с инструментами доступности и считывателями экрана.
Глядя в будущее
Издатели должны помнить о том, как реализованы изображения.
В то время как CSS является мощным инструментом для проектирования, использование его для доставки изображений, связанных с контентом, может противоречить лучшим методам индексации, доступности и долгосрочной стратегии SEO.
Послушайте полный эпизод подкаста ниже:
https://www.youtube.com/watch?v=L2E3GBDP_QY
Показанное изображение: Роман Самборкии/Shutterstock
