Графический контент

Графический контент – это всё визуальное на страницах сайта: фотографии, иллюстрации, схемы, инфографика, иконки, скриншоты, видео и их обложки. Хорошая графика объясняет то, что текстом объяснять долго, и приводит посетителей из поиска по картинкам.

Сравните две страницы услуги «Ремонт ванной под ключ». На первой три стоковых фото с улыбающимися моделями. На второй фотографии реальных объектов до и после ремонта, схема этапов работ и таблица цен. Вторая отвечает на вопросы клиента раньше, чем он их задал. Поисковик тоже видит разницу: фото с ваших объектов есть только у вас, а одна и та же стоковая картинка стоит на сотнях сайтов.

Какой бывает графика и зачем она нужна

Фото реальных людей и работ особенно важны в медицине, финансах и других темах, где поисковики строже оценивают доверие к сайту. Подробнее в статье E-E-A-T.

Как поисковик понимает картинку

Сам по себе файл поисковику мало о чём говорит. Он собирает смысл из окружения:

• Тег img. Google прямо пишет, что не индексирует картинки, заданные фоном через CSS. Всё, что должно попасть в поиск по картинкам, вставляйте обычным тегом.
• Атрибут alt с описанием того, что на картинке. Как его писать, разбираем в статье Атрибут alt.
• Имя файла. В справке Google пример: my-new-black-kitten.jpg лучше, чем IMG00023.JPG.
• Подпись и текст рядом с картинкой, заголовок раздела, тема страницы.
• Формат. Google поддерживает BMP, GIF, JPEG, PNG, WebP, SVG и AVIF.

Поэтому цены, телефон и условия не стоит вставлять картинкой: поисковик такой текст не прочитает, а посетитель не скопирует номер. И не превращайте alt в список запросов через запятую, описания того, что изображено, достаточно.

Графика и скорость

Тяжёлые картинки часто главная причина медленных страниц. Фото прямо с камеры весит в разы больше, чем нужно для экрана. На первом экране картинка нередко становится самым крупным элементом, и от неё зависит показатель LCP. А если у изображения не заданы размеры, текст при загрузке прыгает вниз.

Что помогает: сжимать файлы под реальный размер на экране, отдавать WebP или AVIF, задавать ширину и высоту, подключать адаптивные версии через srcset и откладывать загрузку картинок ниже первого экрана. Картинку первого экрана откладывать нельзя. Подробнее в статье Скорость сайта.

Набор иконок и видеогалерея в наших проектах

Для мобильной версии магазина стройматериалов «Ваш Дом» мы нарисовали набор из 30 иконок. Весь интерфейс держится на одном шрифте, Roboto Condensed, и палитре из десяти цветов, и по ним собраны экраны каталога, поиска и сравнения товаров. Подробности в кейсе «Ваш Дом».

Для клиники effi на страницы услуг добавили видео-контент, а на сайте появилась видеогалерея: интервью специалистов, обзоры услуг, оборудования и препаратов. Подробнее в кейсе effi.

Авторские права на изображения

Картинка из поиска не становится бесплатной оттого, что её легко скачать. Фотографии и рисунки охраняются авторским правом по статье 1259 ГК РФ, а за нарушение правообладатель вправе требовать компенсацию по статье 1301. Безопасных вариантов три: свои фото, стоковые изображения с лицензией под ваше использование и картинки, автор которых явно разрешил их брать. Сохраняйте лицензии и источники, особенно если картинки на сайт ставят разные люди.

Как проверить графику на своём сайте

1. Пройдите сайт краулером и выгрузите все изображения: найдите файлы без alt и самые тяжёлые картинки.
2. Прогоните главные шаблоны страниц через Page Speed Insights. Он подскажет, какие изображения стоит сжать, уменьшить или перевести в современный формат.
3. Проверьте несколько «своих» фотографий поиском по изображению в Яндексе или Google. Если та же картинка нашлась на десятках сайтов, это сток, а не ваша фотография.
4. Наберите в поиске по картинкам Google оператор site: с вашим доменом и посмотрите, какие изображения уже проиндексированы и с какими подписями.

Форматы, стоки и права на картинки

Графику на страницах, вес изображений и alt проверяем на SEO-аудите, а визуальную подачу услуг и товаров продумываем при разработке веб-дизайна и SEO-продвижении.

Источники

• Google Search Central: рекомендации по изображениям в Google Поиске
• Гражданский кодекс РФ, статьи 1259 и 1301
• Кейс E.BAEV: «Ваш Дом»
• Кейс E.BAEV: «effi»