SEO для изображений: 12 практических советов для роста трафика

Многие думают, что SEO изображений — это просто вставить ключевое слово в атрибут alt. На практике существует как минимум двенадцать факторов, влияющих на то, как Google находит, понимает и ранжирует изображения на вашем сайте. Игнорирование этих факторов означает потерю трафика, который можно легко получить — в том числе из Google Картинок, на которые приходится значительная доля глобальных поисковых запросов.

Сам Google развивает распознавание изображений с помощью машинного обучения. Но это не делает SEO изображений устаревшим — наоборот, Google продолжает использовать все доступные сигналы (имя файла, alt text, контекст страницы, скорость загрузки), чтобы точно интерпретировать и ранжировать изображения.

1. Давайте файлам описательные имена

Имя файла — один из первых сигналов, которые Google использует, чтобы понять содержание изображения. Камеры и телефоны генерируют общие имена вроде IMG_0023.JPG или DSC_4817.jpg, которые вообще ничего не сообщают поисковику.

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

• Хорошо: shokoladnyy-tort.jpg
• Плохо: IMG_2947.jpg
• Тоже плохо: tort-shokolad-recept-desert-sladkoe.jpg (переспам ключевыми словами)

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

2. Пишите полезный альтернативный текст (alt text)

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

Синтаксис простой:

<img src="dalmatian-puppy.jpg" alt="Щенок далматинца играет в парке">

Google использует alt text вместе с алгоритмами компьютерного зрения и контекстом страницы, чтобы понять содержание изображения. Рекомендация — создавать полезные, информативные описания, используя ключевые слова контекстно — никогда не накапливая бессмысленные слова (переспам).

Полезный приём: закончите фразу «Это фото ___». Результат, слегка скорректированный, обычно становится хорошим alt text. Примеры:

• «Это фото шоколадного чизкейка с клубничным соусом.» → alt="Шоколадный чизкейк с клубничным соусом"
• «Это фото ноутбука с разбитым экраном на столе.» → alt="Ноутбук с разбитым экраном на рабочем столе"

Для товарных изображений добавление номера модели или артикула SKU в alt text может помочь появляться в узкоспециализированных запросах. Не забывайте и о подписях — Google извлекает информацию о содержании изображения из окружающего текста, включая видимые подписи на странице.

3. Выберите правильный формат файла

Выбор формата напрямую влияет на размер файла — и, следовательно, на скорость загрузки страницы. Три самых распространённых формата в вебе — JPG, PNG и WebP, у каждого свои особенности:

Общее правило: используйте JPG для фотографий, PNG для изображений с прозрачным фоном и чётким текстом, а WebP — всегда, когда возможно, для веба: этот формат обеспечивает лучшее сжатие при том же качестве. Используйте Конвертер изображений ImageTools, чтобы конвертировать между форматами перед загрузкой.

4. Изменяйте размер изображений под реальный размер отображения

Загрузка фото шириной 4000px на сайт, где оно отображается в 800px, — это трата трафика. Браузер скачивает изображение полностью и затем отбрасывает лишние пиксели — пользователь ждёт дольше без какой-либо визуальной выгоды.

Определите максимальную ширину отображения изображений в вашем макете (обычно от 800px до 1440px, в зависимости от типа изображения и сайта) и меняйте размер перед загрузкой. Для экранов Retina (HiDPI) используйте удвоенную ширину отображения. Используйте Изменение размера изображения ImageTools, чтобы точно настроить размеры.

5. Сжимайте изображения без заметной потери качества

Сжатие — это процесс уменьшения размера файла без изменения размеров изображения. Для фото JPG снижение качества со 100% до 80% может уменьшить файл в 5–10 раз с незаметной на экране разницей.

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

Практические цели по весу для разных типов изображений:

• Баннер / hero на всю ширину: менее 200 КБ
• Фото товара или изображение в блоге: 60–150 КБ
• Миниатюра: 15–40 КБ
• Логотип в PNG/WebP: менее 30 КБ

Используйте Компрессор изображений ImageTools, чтобы сжать JPG, PNG и WebP прямо в браузере — без отправки на внешние серверы.

6. Создайте sitemap для изображений

Sitemap изображений сообщает Google о существовании изображений, которые он может не найти самостоятельно — особенно тех, что загружаются через JavaScript или встроены в сложные галереи. В отличие от обычного sitemap, sitemap изображений может включать URL с других доменов (например, CDN).

Если ваш сайт использует WordPress с плагином Yoast SEO, изображения уже автоматически добавляются в sitemap. Для сайтов на заказ sitemap изображений можно добавить вручную, следуя официальной документации Google. Основные доступные теги — image:loc (URL изображения), image:title и image:caption.

7. Используйте структурированные данные для изображений товаров

Google поддерживает структурированные данные (Schema.org) для изображений в разных контекстах — рецепты, товары, статьи, события. При правильной реализации эти данные позволяют изображениям появляться в расширенных результатах (rich results) в Google с дополнительным визуальным выделением, повышающим кликабельность.

Для интернет-магазинов разметка товара с изображением особенно ценна: товары с правильно размеченным изображением могут появляться в Google Покупках и в карточках товаров в панели знаний Google.

8. Внедрите отложенную загрузку (lazy loading)

Отложенная загрузка — это техника загрузки изображений только тогда, когда они вот-вот появятся в видимой области экрана, вместо загрузки всех сразу при первой отрисовке страницы. На страницах с большим количеством изображений (длинные блоги, списки товаров) отложенная загрузка может снизить начальный вес страницы на 60–80%.

Самая простая реализация — нативная в HTML:

<img src="product.webp" alt="Синие кроссовки" loading="lazy">

Важно: никогда не применяйте loading="lazy" к главному изображению над сгибом (первому изображению, видимому без прокрутки страницы). Это задерживает LCP — Largest Contentful Paint, одну из метрик Core Web Vitals — и напрямую вредит ранжированию.

9. Указывайте width и height во всех тегах изображений

Когда браузер не знает размер изображения до его загрузки, он не резервирует нужное место в макете — и когда изображение загружается, содержимое страницы «прыгает». Это явление Google измеряет как CLS (Cumulative Layout Shift), ещё одну метрику Core Web Vitals.

Решение — всегда указывать width и height в тегах изображений:

<img src="product.webp" alt="Синие кроссовки" width="800" height="800" loading="lazy">

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

10. Используйте адаптивные изображения с srcset

Атрибут srcset позволяет предоставить разные версии одного изображения для разных размеров экрана. Браузер автоматически выбирает наиболее подходящую версию — отдавая изображение меньшего размера для телефонов и большего для десктопов. На сайтах с высоким мобильным трафиком это может снизить объём передаваемых данных на 40–60%.

<img
  src="product-800.webp"
  srcset="product-400.webp 400w,
          product-800.webp 800w,
          product-1200.webp 1200w"
  sizes="(max-width: 600px) 400px, 800px"
  alt="Синие кроссовки"
  width="800" height="800"
  loading="lazy"
>

11. Оптимизируйте изображение для Open Graph и соцсетей

Когда кто-то делится ссылкой в WhatsApp, Instagram, LinkedIn или на любой другой платформе, изображение в превью берётся из мета-тегов Open Graph. Если эти теги не настроены, платформа выбирает случайное изображение со страницы — часто с плохим результатом.

Всегда настраивайте тег og:image с изображением 1200×630px на каждой важной странице сайта:

<meta property="og:image" content="https://yoursite.com/images/article-preview.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">

Хорошо продуманное превью-изображение — с читаемым заголовком, визуальной идентичностью бренда и релевантным изображением — значительно повышает кликабельность при репостах.

12. Учитывайте контекст всей страницы

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

Хорошие практики контекста:

• Размещайте изображения рядом с текстом, который их описывает или к которому они относятся
• Используйте видимые подписи под изображениями, когда это возможно
• Убедитесь, что тема изображения соответствует теме страницы
• Используйте заголовки страниц и подзаголовки, подчёркивающие тему главных изображений

Чек-лист SEO изображений

• ☑ Описательное имя файла с ключевыми словами (через дефис, без переспама)
• ☑ Описательный и контекстный атрибут alt на всех изображениях
• ☑ Правильный формат для каждого типа: WebP или JPG для фото, PNG/SVG для логотипов и иконок
• ☑ Размеры подогнаны под реальный размер отображения (макс. 2× для Retina)
• ☑ Применено сжатие — вес ниже целевых значений по типу
• ☑ width и height указаны во всех тегах <img>
• ☑ loading="lazy" на изображениях ниже сгиба
• ☑ LCP-изображение без отложенной загрузки, с fetchpriority="high" при возможности
• ☑ Настроен sitemap изображений (или проверено, что это делает плагин)
• ☑ Мета-тег og:image настроен на всех главных страницах
• ☑ Структурированные данные для изображений товаров там, где применимо
• ☑ Изображения контекстуализированы текстом, подписями и релевантными заголовками

Частые вопросы