Оптимизация SEO для изображений
Каждый день мы видим сайты, где изображения не приносят трафика. Интернет-магазин теряет до 30% посетителей из Google Images, а новостной портал — до 10% переходов. Причина — отсутствие alt-текстов, неправильный lazy loading и пропущенный Image Sitemap. Наш опыт показывает: исправление этих ошибок увеличивает видимость в 2-3 раза за месяц. Например, один клиент-ритейлер после настройки Image Sitemap и конвертации в WebP получил прирост трафика из Google Images на 180% за 3 недели, а LCP снизился с 4,2 до 1,8 секунды. Другой проект — каталог запчастей — после оптимизации изображений сократил время загрузки страниц на 40% и увеличил конверсию на 12%. WebP на 30% легче JPEG при том же качестве, а AVIF экономит ещё 60% — это существенно улучшает LCP и TTFB. Расскажем, как правильно настроить изображения для поисковиков и избежать типовых ошибок.
Ключевые факторы SEO для изображений
Google не видит картинку, если:
- Нет alt или он пустой.
- Lazy loading реализован через JavaScript без fallback.
- Формат не поддерживается (BMP, TIFF).
- Картинка не включена в Image Sitemap.
Каждый из этих пунктов легко исправить, но комплексный подход даёт синергию: рост Core Web Vitals, улучшение пользовательского опыта и прямой трафик из Google Images.
Alt-тексты: правила и примеры
| Ситуация | Правило | Пример |
|---|---|---|
| Контентное изображение | Описывает содержимое, не ключевики | MacBook Pro M3 14" Space Gray, вид спереди |
| Декоративное | alt="" |
alt="" role="presentation" |
| Изображение-ссылка | Описывает назначение ссылки | alt="Перейти к товару MacBook Pro M3" |
Длина alt — до 125 символов. Избегайте keyword stuffing. Для изображений, которые иллюстрируют контент, включайте лемму тематики — например, «SEO-оптимизация изображений: MacBook Pro M3».
Как реализовать Image Sitemap?
Image Sitemap помогает Google находить картинки, загружаемые через JavaScript, и рекомендуется Google. Пример:
<?xml version="1.0" encoding="UTF-8"?> <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:image="http://www.google.com/schemas/sitemap-image/1.1"> <url> <loc>https://example.com/product/</loc> <image:image> <image:loc>https://cdn.example.com/product.webp</image:loc> <image:title>Product name</image:title> <image:caption>Product short description</image:caption> </image:image> </url> </urlset> До 1000 изображений на один URL. При большом каталоге используйте Sitemap Index.
Что выбрать для lazy loading?
Нативный loading="lazy" — самый безопасный вариант. Googlebot поддерживает его уже несколько лет. Для первого экрана (above-the-fold) используйте fetchpriority="high" без lazy.
JavaScript через Intersection Observer — резервный вариант для старых браузеров. Убедитесь, что data-src заполнен, а src — плейсхолдер. Мы рекомендуем нативный подход как основной.
<!-- Нативный lazy loading (рекомендуется) --> <img src="/product-1.webp" width="400" height="300" loading="lazy" alt="SEO-оптимизация изображений: Product description"> <!-- Для above-the-fold --> <img src="/hero.webp" width="1200" height="800" fetchpriority="high" alt="Hero banner"> Техническая реализация: форматы, размеры, CDN
Форматы и размеры
| Формат | Преимущества | Поддержка браузерами |
|---|---|---|
| WebP | На 25-35% легче JPEG | Chrome, Firefox, Safari 14+, Edge |
| AVIF | На 50-60% легче JPEG | Chrome 85+, Firefox 93+, Safari 16+ |
| JPEG/PNG | Fallback для старых браузеров | Все |
Сравнение: AVIF лучше WebP на 50% по сжатию, но WebP шире поддерживается. Используйте <picture> с source для WebP и AVIF:
<picture> <source srcset="/product.avif" type="image/avif"> <source srcset="/product.webp" type="image/webp"> <img src="/product.jpg" loading="lazy" width="600" height="400" alt="Product name"> </picture> Responsive images обязательны: задавайте srcset и sizes, чтобы браузер загружал нужный размер. Без width и height возникает CLS — ухудшаются Core Web Vitals.
Имена файлов и CDN
Имя файла — слабый сигнал, но его стоит оптимизировать: macbook-pro-m3-space-gray.webp вместо IMG_2024.jpg. Если CDN использует хэши, это не критично — alt и caption компенсируют.
Настройте кеширование:
location ~* \.(webp|avif|jpg|jpeg|png|gif|svg)$ { expires 1y; add_header Cache-Control "public, immutable"; } Аудит и мониторинг
| Инструмент | Что проверяет |
|---|---|
| Screaming Frog | Missing alt, размеры, форматы |
| Google Search Console | Ошибки индексации изображений |
| Puppeteer скрипт | Видимость изображений после JS |
Пример проверки через консоль браузера:
const missing = [...document.images].filter(img => !img.alt).map(img => img.src); console.log('Missing alt:', missing); Дополнительно проверьте, отдаёте ли вы правильные Content-Type для WebP и AVIF. Для WebP — image/webp, для AVIF — image/avif. Настройте заголовки Vary для Accept.
Подробнее о проверке заголовков
Используйте curl -I https://cdn.example.com/image.webp и проверьте Content-Type: image/webp. Если нет — добавьте правило на сервере.
Что входит в работу и гарантии
- Аудит всех изображений: alt, lazy loading, форматы.
- Генерация Image Sitemap с автобновлением при публикации.
- Конвертация в WebP/AVIF через sharp или ffmpeg.
- Настройка
loading="lazy"иfetchpriority. - Оптимизация responsive images (srcset, sizes).
- Интеграция с CDN и заголовками кеширования.
- Документация и обучение команды.
Сроки зависят от объёма: аудит до 100 страниц — 1-2 дня, внедрение — от 3 до 7 дней. Даём гарантию на корректную индексацию: после нашей работы Googlebot видит все значимые изображения. Свяжитесь с нами для бесплатной оценки вашего проекта — рассчитаем объём работ и сроки. Закажите консультацию, чтобы получить аналогичный результат.
Image Sitemap — официальная рекомендация Google для улучшения индексации изображений. Google Search Central
Наша компания уже 5 лет занимается SEO-оптимизацией, выполнила более 50 проектов по настройке изображений. Опыт подтверждается ростом трафика у клиентов. Получите консультацию — мы покажем, как увеличить видимость вашего сайта в Google Images.