Визуальный контент

Оптимизация изображений для SEO

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

Первое, что нужно сделать — сжать файлы до адекватного размера. Фотография товара в 5 мегабайт на карточке товара — это перебор. Для экрана достаточно 100–200 килобайт, и разницы глазом не заметит. Используйте TinyPNG, Squoosh или встроенные оптимизаторы в CMS.

Второе — физические размеры. Не грузите картинку 4000×3000 пикселей, если она отображается в 400×300. Уменьшайте до нужного разрешения до загрузки на сервер. Это сразу режет вес в десять раз.

Третье — lazy loading. Если на странице двадцать картинок, нет смысла грузить все сразу. Пользователь видит только первые три-четыре, а остальные подгружаются по мере прокрутки. В HTML это делается атрибутом loading="lazy" — без скриптов, одна строчка.

Четвёртое — структура имён файлов. img_847392.jpg поисковику ничего не говорит. А krossovki-nike-air-max-seryj.jpg — это уже сигнал о содержимом. Имена файлов пишутся на русском или английском, через дефис, без спецсимволов.

следующий шаг

Не уверены, что проблема именно в каталоге?

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

• без хаотичных доработок
• с приоритетами по сайту
• понятный следующий шаг

Разобрать магазинЧто входит в аудит

Мягкий старт: сначала диагностика, потом план работ.

каталогкарточкифильтрызаявки

Alt-теги и title для картинок

Alt — это текстовое описание изображения, которое видят поисковики и скринридеры. Если картинка не загрузилась, alt показывается пользователю вместо неё. Title — всплывающая подсказка при наведении курсора.

Alt пишется для людей и роботов одновременно. Задача — описать, что на картинке, с использованием ключевого слова, если это уместно. Но без набивки.

• Плохо: alt="фото" или alt="картинка 1"
• Плохо: alt="купить кроссовки nike москва дешево недорого"
• Нормально: alt="Серые кроссовки Nike Air Max на белом фоне"

Для декоративных изображений — разделителей, фоновых паттернов, иконок-украшений — alt оставляют пустым: alt="". Скринридер его пропустит, а поисковик не будет считать, что вы пытаетесь продвинуться по запросу «горизонтальная линия».

Title сейчас имеет минимальный вес для SEO. Google официально говорил, что почти не использует его для ранжирования. Но для пользователей он полезен — добавляет контекст. Пишите коротко: «Нажмите для увеличения» или «Схема подключения модуля». Не дублируйте в title то же самое, что в alt — это бессмысленно.

Видео на сайте и SEO

Видео увеличивает время на странице — а это прямой сигнал для поисковиков, что контент полезный. Но просто залить файл на сервер недостаточно. Нужна правильная обвязка.

Хостите видео на сторонних платформах — YouTube, Vimeo, RuTube. Сервер вашего сайта не рассчитан на раздачу видео, а CDN у видеохостингов уже настроен. При этом embed-код нужно оформлять правильно: указывайте title в iframe, добавляйте описание рядом с плеером.

Структурированные данные помогают показать видео в расширенной выдаче. Разметка VideoObject даёт поисковику информацию о длительности, превью, дате загрузки и описании. Без неё видео может попасть в индекс, но шансы на красивый сниппет резко падают.

Транскрибация — недооценённый инструмент. Текст видео не только помогает людям с нарушениями слуха, но и даёт поисковику дополнительный контент для индексации. Выложили интервью на двадцать минут? Расшифруйте его и разместите под видео. Это ключевики, это релевантность, это глубина страницы.

аудит магазина

Найдём слабые места магазина до новых затрат

Проверим структуру, индексацию, карточки товаров, категории, фильтры и страницы, которые должны приносить трафик.

• без хаотичных доработок
• с приоритетами по сайту
• понятный следующий шаг

Разобрать магазинЧто входит в аудит

Мягкий старт: сначала диагностика, потом план работ.

каталогкарточкифильтрызаявки

Инфографика для привлечения ссылок

Инфографика работает как магнит для обратных ссылок. Люди встраивают её в свои статьи и ссылаются на источник. Но это работает только если инфографика реально полезная, а не «10 фактов о кофе, которые вас удивят».

Делайте инфографику по узким темам, где мало качественного визуального объяснения. Схема процесса, сравнение характеристик, таймлайн развития отрасли — то, что журналист или блогер захочет прикрепить к своему тексту.

Техническая сторона: код встраивания. Разместите под инфографикой блок с HTML-кодом, который можно скопировать одним кликом. В этом коде — картинка и обратная ссылка на вашу страницу. Если не дать готовый код, многие просто скачают изображение и загрузят к себе без указания источника.

Формат — длинная вертикальная картинка, обычно от 800 до 2000 пикселей в высоту. Текст внутри инфографики поисковик не читает, поэтому обязательно дублируйте данные в текстовом виде на самой странице. Иначе вы получите ссылки, но не получите трафик по запросам, которые могли бы закрыть этим материалом.

WebP и современные форматы

WebP стал стандартом де-факто. При том же визуальном качестве файл весит на 25–35% меньше, чем JPEG, и на 26% меньше, чем PNG. Поддерживается всеми основными браузерами уже несколько лет — даже Safari подключил полную поддержку в 2020-м.

AVIF — следующий шаг. Сжимает ещё сильнее, чем WebP, иногда до 50% меньше при идентичном качестве. Но поддержка пока нестабильна: Safari добавил AVIF только в 2024 году, и на старых устройствах могут быть проблемы.

На практике используйте тег <picture> с fallback на JPEG. Браузер, который понимает WebP, заберёт его. Остальные получат JPEG. Это не требует скриптов и работает на уровне HTML:

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

Не конвертируйте в WebP то, что уже сжато до предела — крошечные иконки по 2 килобайта в PNG не станут лучше от смены формата. А вот фотографии, фоны, баннеры, карточки товаров — всё это должно быть в WebP без вопросов.