SEO для изображений — это совокупность мер, которые помогают поисковым системам правильно понимать картинки на ваших страницах и обеспечивают их быструю загрузку. От имени файла и alt-текста до современных форматов WebP и AVIF и отложенной загрузки (lazy loading) — каждая деталь влияет на трафик из Google Картинок и на общую скорость страницы. В этом руководстве мы по порядку разбираем SEO для изображений: что нужно делать на каждом шаге, с примерами.
Почему важно SEO для изображений?
У изображений два основных эффекта. Первый — видимость: Google Картинки и блоки изображений в обычной выдаче — отдельный канал, который может приводить посетителей; особенно в темах товаров, рецептов, мест и интерьера пользователи сначала смотрят на картинку. Второй — скорость: на большинстве страниц основную часть объёма данных составляют изображения, и самый крупный элемент страницы часто тоже картинка. Поэтому одно неоптимизированное главное изображение может испортить показатель LCP из Core Web Vitals и ухудшить производительность всей страницы.
Третий эффект — доступность: alt-текст описывает изображение посетителям, которые пользуются программами чтения с экрана. Хороший alt-текст служит и пользователю, и поисковой системе.
Имя файла
Google использует и имя файла, чтобы понять, что изображено. Имена вроде IMG_20260412_0043.jpg, которые дают фотоаппараты,
не несут никакой информации. Правила простые:
- Используйте короткие, осмысленные слова, описывающие изображение:
seryi-divan-trehmestnyi.webp. - Разделяйте слова дефисом (-); нижнее подчёркивание (_) может восприниматься как слияние слов.
- Предпочитайте строчные латинские буквы (ASCII) без пробелов; кириллицу и пробелы в именах файлов не используйте.
- Не набивайте ключевыми словами:
divan-divan-deshevyi-divan.webpне поможет.
| Плохо | Хорошо |
|---|---|
IMG_0043.jpg | seryi-divan.webp |
Novoe foto (2).png | moskva-ofis-vhod.webp |
divan_deshevo_divan_prodaja.jpg | uglovoi-divan.webp |
Как написать alt-текст?
Alt-текст (атрибут alt) словами описывает содержимое изображения. Его показывают, если картинка не загрузилась,
его читают программы чтения с экрана, и Google использует его, чтобы понять контекст изображения.
- Описывайте изображение как есть. «Бариста готовит кофе за кухонной стойкой» — хороший alt-текст; начинать с «изображение» или «фото» не нужно.
- Держите его коротким. Обычно достаточно менее 125 знаков.
- Вписывайте ключевое слово естественно. Если изображение действительно связано с темой, слово появится само собой; навязанные списки слов могут расцениваться как спам.
- Для декоративных изображений оставляйте alt пустым (
alt=""), чтобы программы чтения с экрана не читали их без нужды. Атрибут alt полностью не удаляйте. - Переносите текст с изображений в текст. Если на картинке есть слоган, цена или скидка, продублируйте их в alt-тексте или в тексте страницы.
Пример: вместо alt="диван диван угловой диван недорого" на странице товара напишите
alt="Серый тканевый трёхместный диван на деревянных ножках". Второй вариант полезнее пользователю
и даёт поисковой системе более точную информацию.
Кроме alt-текста, Google понимает контекст по окружающему тексту, заголовкам и подписи к изображению (caption). Размещать изображение рядом с соответствующим абзацем гораздо лучше, чем ставить его в какое-то неуместное место внизу страницы.
Выбор формата: JPEG, PNG, WebP, AVIF
| Формат | Сильная сторона | Когда использовать? |
|---|---|---|
| JPEG | Распространён, хорошо сжимает фотографии | Запасной вариант для старых систем |
| PNG | Без потерь, прозрачность | Логотипы, скриншоты, простая графика |
| WebP | Заметно меньше JPEG/PNG, поддержка прозрачности | Безопасный выбор по умолчанию для большинства изображений |
| AVIF | Обычно ещё меньше WebP | Страницы с фотографиями; поддержка браузерами широкая, но добавьте запасной вариант |
| SVG | Вектор, масштабируется, очень маленький | Логотипы, иконки, простые рисунки |
Чтобы предложить несколько форматов, используйте элемент <picture>: браузер выберет первый поддерживаемый формат,
а если не поддерживается ни один, сработает вложенный тег <img>. Так браузер, поддерживающий AVIF, получит AVIF,
а тот, что его не поддерживает, — WebP или JPEG.
Размер и сжатие
Самая частая ошибка — показывать фотографию шириной 4000 пикселей в блоке 400 пикселей. Браузер всё равно скачает весь файл. Что нужно сделать:
- Меняйте размер под реальный размер показа. Для блог-контента обычно достаточно ширины 800–1200 пикселей;
для экранов высокой плотности отдельно передайте версию вдвое больше через
srcset. - Сжимайте. Для фотографий качество в диапазоне 75–85 часто заметно уменьшает размер файла без видимой потери.
- Удаляйте метаданные. EXIF-данные (местоположение, устройство) — лишний вес и риск для приватности.
- Ставьте ориентиры. В качестве общего подхода старайтесь держать иллюстрации контента в пределах нескольких сотен КБ; для больших главных изображений тоже задайте предел.
Обязательно указывайте width и height в HTML. Браузер заранее знает, сколько места выделить под изображение,
и страница при загрузке не сдвигается вниз.
Адаптивные изображения: srcset и sizes
Отправлять одно и то же изображение и на телефон шириной 360 пикселей, и на монитор 1920 пикселей — расточительно.
С помощью srcset вы задаёте несколько версий разной ширины, а sizes сообщает, какую часть экрана
занимает изображение; браузер сам выбирает наиболее подходящий файл. Например, создать три версии шириной 480, 800 и 1200 пикселей
достаточно для большинства блогов и страниц товаров. На мобильных устройствах экономия трафика заметна, и это напрямую отражается
на времени LCP.
Где должно стоять изображение?
Google определяет тему изображения и по окружающему тексту. Поэтому размещайте картинку рядом с абзацем, в котором говорится о её теме, и добавляйте короткую подпись (caption), которая суммирует тему. Заголовок раздела, где находится изображение, тоже усиливает понимание, о чём оно. Вместо защищённых авторским правом стоковых изображений по возможности используйте собственные фотографии: оригинальная картинка вызывает доверие у пользователя и отличает вас от повторяющихся стоковых изображений.
Отложенная загрузка (lazy loading) и CLS
Отложенная загрузка означает, что изображения ниже экрана не загружаются, пока пользователь не приблизится к ним. В современных браузерах она включается одним атрибутом:
<img src="kanepe.webp" alt="Серый тканевый трёхместный диван" width="800" height="600" loading="lazy">
- Не применяйте отложенную загрузку к изображению в первом экране (видимая часть без прокрутки). Если самое большое изображение страницы
загружается поздно, LCP ухудшится. Для этой картинки можно использовать
fetchpriority="high". - Галереи, списки товаров и изображения в нижней части длинных статей идеально подходят для отложенной загрузки.
- Всегда используйте её вместе с
width/height; иначе загрузившееся изображение сдвигает верстку. - Чтобы Google нашёл изображение, используйте настоящий
<img src>; картинки, которые есть только как фон CSS, могут не индексироваться в поиске по картинкам.
Подробнее о метриках скорости — в нашем руководстве по Core Web Vitals.
Sitemap для изображений и структурированные данные
Google находит большинство изображений при обычном сканировании. Тем не менее для галерей, загружаемых JavaScript, или сложных
структур может помочь добавление изображений в sitemap. В стандартном sitemap внутри каждого <url> используются
элементы <image:image> и <image:loc>:
- Добавьте в начало sitemap пространство имён для изображений.
- Для каждой страницы перечислите адреса изображений, которые на ней используются.
- Отправьте sitemap через Search Console и проверьте наличие ошибок.
- Убедитесь, что robots.txt не блокирует изображения.
Для товаров, рецептов или статей добавление адреса изображения в структурированные данные (schema) облегчает Google использование картинки в расширенных результатах. Как работать с Search Console, см. в нашем руководстве по началу работы.
Частые ошибки с изображениями
- Текст внутри изображения: если важная информация (цена, адрес, акция) написана только внутри картинки, её не видят ни поисковик, ни программа чтения с экрана.
- Один и тот же alt-текст везде: вместо одинакового описания для пяти фото в галерее товара опишите каждое отдельно (спереди, сбоку, деталь).
- Очень большие «главные» изображения: полноэкранный слайд иногда весит не сотни КБ, а несколько МБ; сначала уменьшите размер, затем пересмотрите дизайн.
- Блокировка изображений в robots.txt: правило, запрещающее папку с изображениями, приведёт к тому, что вы не будете представлены в Google Картинках.
- Битые ссылки на изображения: перемещённые или удалённые картинки выдают 404; исправляйте их регулярным сканированием.
Контрольный список и измерения
- Имя файла осмысленное, в ASCII и разделено дефисами?
- Alt-текст кратко и естественно описывает изображение?
- Изображения в WebP/AVIF или другом подходящем формате?
- Не загружаются ли файлы больше, чем размер показа?
- Есть ли
loading="lazy"у изображений ниже первого экрана? - Заданы ли
widthиheight? - Sitemap для изображений и robots.txt настроены верно?
Для измерений PageSpeed Insights напрямую показывает рекомендации «Эффективно кодируйте изображения» и «Используйте изображения правильного размера». В отчёте об эффективности Search Console можно выбрать тип поиска «Картинки» и отдельно отслеживать показы и клики из поиска по изображениям. Оптимизация изображений также помогает ускорить сайт и снизить показатель отказов.
Заключение
SEO для изображений — не разовое действие, а небольшая привычка, которая повторяется для каждой картинки: осмысленное имя файла, честный alt-текст, правильный формат и размер, отложенная загрузка для нижней части страницы и при необходимости sitemap для изображений. Самый большой выигрыш обычно даёт самое тяжёлое изображение; начните с того, что в PageSpeed Insights показывает несколько самых тяжёлых картинок. Результат — дополнительный трафик из Google Картинок и более быстрый сайт. Ранжирование по-прежнему определяют алгоритмы Google; ваша задача — сделать изображения понятными и лёгкими.