Картинки на сайте и SEO: как ускорить страницы и попасть в поиск по изображениям.

Фотографии товаров, схемы, портфолио, баннеры - на большинстве коммерческих сайтов изображения весят больше, чем весь остальной код вместе взятый. При этом о них редко вспоминают, когда речь заходит о продвижении: тексты и мета-теги проверяют, а картинки загружают как есть.

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

Картинки и SEO-продвижение: как они связаны

Связь проявляется двумя путями. Первый - вес страницы. Тяжёлые изображения дольше загружаются, особенно на мобильном интернете, а самым крупным элементом первого экрана, по которому поисковики оценивают скорость отрисовки, очень часто оказывается именно картинка. Общие принципы ускорения сайта мы разбирали отдельно, здесь сосредоточимся только на графике.

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

Формат и вес файлов

Выбор формата - первое, что определяет вес изображения. Универсального варианта нет, каждый тип файла подходит для своей задачи:

• JPEG - фотографии и сложные изображения с плавными переходами цвета;
• PNG - графика с прозрачностью и чёткими границами, снимки экрана;
• SVG - логотипы, значки и простые схемы, которые не теряют качества при масштабировании;
• WebP и AVIF - современные форматы, которые при том же качестве обычно весят заметно меньше JPEG и PNG.

Современные браузеры поддерживают WebP повсеместно, поэтому для фотографий это разумный выбор по умолчанию. Многие системы управления умеют создавать такие версии автоматически при загрузке и оставлять запасной вариант в привычном формате для старых браузеров.

Сжатие и размеры под экран

Снимок с камеры весит несколько мегабайт, а для страницы обычно достаточно файла в сотню-две килобайт. Разница достигается сжатием: для фотографий приемлемо качество на уровне 70-85 процентов, при котором глаз не замечает изменений. Заодно стоит удалять служебные данные - сведения о камере, геометки, встроенные миниатюры. Надёжнее всего сжимать автоматически, на стороне системы управления или сервера, чтобы результат не зависел от памяти сотрудника.

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

Отложенная загрузка - только ниже первого экрана

Отложенная, или ленивая, загрузка означает, что браузер скачивает изображение, только когда посетитель докручивает до него страницу. Для длинных каталогов и лент портфолио это ощутимый выигрыш, и сегодня он включается одним атрибутом в коде без сторонних скриптов.

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

Поисковая оптимизация подписей: alt, имя файла и окружение

Атрибут alt - текстовое описание изображения, которое используют программы экранного доступа для незрячих людей и поисковые роботы. Браузер показывает его и в том случае, если картинка не загрузилась. Пустой или бессмысленный alt лишает страницу полезного сигнала и ухудшает доступность сайта.

Имя файла тоже имеет значение. Вместо «IMG_4521.jpg» лучше назвать файл латиницей по смыслу, например «divan-uglovoy-seryy.webp». Не менее важно окружение: подпись под изображением и соседний абзац роботы считают контекстом, поэтому картинка в тематическом блоке ранжируется лучше, чем та же картинка в случайном месте.

Как писать alt

Хорошее описание передаёт то, что изображено, коротко и конкретно: «Угловой диван серого цвета в гостиной», а не «диван купить недорого». Ключевую фразу можно включить, если она естественно описывает картинку, но перечислять запросы через запятую бессмысленно и рискованно - это похоже на переспам. Для декоративных элементов вроде разделителей alt оставляют пустым.

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

Поиск по картинкам

Яндекс Картинки и поиск по изображениям в Google приводят посетителей в тех нишах, где выбор делают глазами: мебель, одежда, ремонт, ландшафтный дизайн. Для многих из них продвижение сайта в Яндексе без картинок неполно: часть аудитории начинает поиск именно с визуальной выдачи. Чтобы туда попасть, изображение должно быть уникальным, качественным и стоять на индексируемой странице.

Фотографии из каталога поставщика, которые стоят на сотне сайтов, шансов почти не имеют. Помогают собственные снимки, указание изображений в карте сайта и микроразметка товаров и организаций - что она даёт, мы разбирали в статье о микроразметке Schema.org.

СЕО-оптимизация изображений в интернет-магазине

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

Когда идёт продвижение интернет-магазина, особенно важна первая фотография карточки: она попадает в сниппет, в товарные блоки поиска и в визуальную выдачу. Если у всех конкурентов белый фон и несколько ракурсов, а у вас один тёмный снимок, страница проигрывает ещё до клика.

Чек-лист и порядок работ

Чтобы быстро оценить состояние графики на сайте, удобно пройтись по короткому списку:

Если на сайте сотни или тысячи картинок, браться за всё сразу не нужно. В проектах для клиентов в Москве и других городах мы обычно идём в таком порядке:

1. Находим самые тяжёлые файлы и страницы с наибольшим весом графики.
2. Включаем автоматическое сжатие и перевод в современный формат.
3. Настраиваем адаптивные размеры и отложенную загрузку ниже первого экрана.
4. Заполняем alt и подписи на ключевых коммерческих страницах.

Эффект от такой СЕО-оптимизации виден по замерам уже через несколько дней, а стоимость SEO-оптимизации сайта в части графики обычно невелика по сравнению с переделкой движка. Продвижение сайта в поисковых системах складывается из многих деталей, и картинки - одна из самых наглядных. Если хотите, чтобы СЕО-продвижение сайта охватывало не только тексты, но и техническую сторону, обратитесь к нашим специалистам по продвижению сайтов - проведём проверку и составим план работ.