Оптимизация SEO для изображений (Image Sitemap, lazy loading SEO)

Оптимизация SEO для изображений (Image Sitemap, lazy loading SEO)

Изображения — второй по величине источник органического трафика после текстовых результатов для многих сайтов. Интернет-магазины, портфолио, новостные сайты с фотографиями получают значительный трафик через Google Images. Без правильной оптимизации этот канал закрыт: отсутствие alt-текстов, неправильная реализация lazy loading и пропущенный image sitemap лишают поисковик возможности корректно обработать контент.

Alt-тексты: минимум и максимум

Alt — основной сигнал для Google Images. Правила:

• Описывает содержимое изображения, не ключевые слова
• Для декоративных изображений: alt="" (пустой, не отсутствующий)
• Для изображений-ссылок: описывает назначение ссылки, не само изображение
• Длина: до 125 символов практически, нет технического лимита

<!-- Неправильно: keyword stuffing -->
<img src="laptop.jpg" alt="ноутбук купить дешево ноутбук apple macbook pro">

<!-- Неправильно: пустое описание там где нужно -->
<img src="laptop-product-photo.jpg" alt="">

<!-- Правильно -->
<img src="macbook-pro-m3-space-gray.jpg" alt="MacBook Pro M3 14 дюймов, цвет Space Gray, вид спереди">

<!-- Декоративное (фоновые, разделители) -->
<img src="divider.svg" alt="" role="presentation">

Image Sitemap

Image Sitemap позволяет Google обнаружить изображения, которые он мог пропустить при краулинге — особенно если они загружаются через JavaScript.

<?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/products/macbook-pro-m3/</loc>
    <image:image>
      <image:loc>https://cdn.example.com/products/macbook-pro-m3-front.webp</image:loc>
      <image:title>MacBook Pro M3 — вид спереди</image:title>
      <image:caption>MacBook Pro с чипом M3, 14 дюймов, Space Gray</image:caption>
    </image:image>
    <image:image>
      <image:loc>https://cdn.example.com/products/macbook-pro-m3-side.webp</image:loc>
      <image:title>MacBook Pro M3 — вид сбоку</image:title>
    </image:image>
  </url>

</urlset>

До 1000 изображений в одном <url>. При большом каталоге — Sitemap Index:

<sitemapindex xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <sitemap>
    <loc>https://example.com/sitemap-images-1.xml</loc>
  </sitemap>
  <sitemap>
    <loc>https://example.com/sitemap-images-2.xml</loc>
  </sitemap>
</sitemapindex>

Генерация в PHP/Laravel: запрос к базе с chunk по 50000 изображений, запись через XMLWriter или шаблон Blade.

Lazy Loading: правильная реализация

loading="lazy" — нативный атрибут, который браузер и Googlebot понимают с 2019 года. Проблема: исторически многие сайты реализовывали lazy loading через data-src и JavaScript — такие изображения Google может не обнаружить.

Нативный lazy loading (рекомендуется):

<!-- Изображения выше fold: без lazy, с fetchpriority -->
<img
  src="/hero.webp"
  width="1200"
  height="800"
  fetchpriority="high"
  alt="..."
/>

<!-- Изображения ниже fold: lazy loading -->
<img
  src="/product-1.webp"
  width="400"
  height="300"
  loading="lazy"
  alt="..."
/>

JavaScript lazy loading через Intersection Observer (если нужна поддержка старых браузеров):

const imageObserver = new IntersectionObserver((entries, observer) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            const img = entry.target;
            img.src = img.dataset.src;
            if (img.dataset.srcset) {
                img.srcset = img.dataset.srcset;
            }
            img.classList.remove('lazy');
            observer.unobserve(img);
        }
    });
}, {
    rootMargin: '200px 0px' // Начинать загрузку за 200px до появления
});

document.querySelectorAll('img.lazy').forEach(img => {
    imageObserver.observe(img);
});

<!-- Разметка для JS lazy loading -->
<img
  class="lazy"
  data-src="/product-1.webp"
  data-srcset="/product-1-400w.webp 400w, /product-1-800w.webp 800w"
  src="/placeholder.svg"
  width="400"
  height="300"
  alt="..."
/>

Проблема для SEO: при JS-реализации Googlebot видит src="/placeholder.svg" и data-src="/product-1.webp". Google умеет обрабатывать data-src атрибут и понимает паттерн lazy loading, но нативный loading="lazy" надёжнее.

Проверка: Google Search Console → URL Inspection → View Crawled Page → Screenshots. Если изображения пустые — Googlebot не видит контент.

Форматы и размеры

WebP с JPEG/PNG fallback:

<picture>
  <source
    srcset="/product.webp 1x, /[email protected] 2x"
    type="image/webp"
  />
  <img
    src="/product.jpg"
    srcset="/product.jpg 1x, /[email protected] 2x"
    width="600"
    height="400"
    loading="lazy"
    alt="..."
  />
</picture>

AVIF для современных браузеров:

<picture>
  <source srcset="/product.avif" type="image/avif" />
  <source srcset="/product.webp" type="image/webp" />
  <img src="/product.jpg" loading="lazy" alt="..." />
</picture>

AVIF даёт 50–60% меньший размер по сравнению с JPEG при том же качестве. Поддерживается Chrome 85+, Firefox 93+, Safari 16+.

Responsive images:

<img
  srcset="
    /product-320w.webp  320w,
    /product-640w.webp  640w,
    /product-1280w.webp 1280w
  "
  sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 33vw"
  src="/product-640w.webp"
  loading="lazy"
  alt="..."
/>

Без width и height браузер не может зарезервировать место до загрузки изображения — CLS растёт, Core Web Vitals ухудшаются.

Имена файлов и CDN

Имя файла — слабый, но учитываемый сигнал для Image Search:

# Плохо
IMG_20241015_143022.jpg
photo_2024_10_15.webp

# Хорошо
macbook-pro-m3-14-space-gray.webp
samsung-galaxy-s24-ultra-titanium-black.webp

Если изображения хранятся на CDN с хэшированными именами — это не критично, но alt и caption компенсируют.

Cache-Control для изображений:

location ~* \.(webp|avif|jpg|jpeg|png|gif|svg)$ {
    expires 1y;
    add_header Cache-Control "public, immutable";
    add_header Vary "Accept-Encoding";
}

immutable говорит браузеру не перепроверять файл при обновлении страницы — снижает количество запросов.

Аудит текущего состояния

# Найти изображения без alt через Screaming Frog
# Reports → Images → Missing Alt Text

# Через puppeteer (для JS-рендеренных сайтов)
node -e "
const puppeteer = require('puppeteer');
(async () => {
    const browser = await puppeteer.launch();
    const page = await browser.newPage();
    await page.goto('https://example.com');
    const missingAlts = await page.evaluate(() =>
        [...document.images].filter(img => !img.alt).map(img => img.src)
    );
    console.log('Missing alt:', missingAlts);
    await browser.close();
})();
"

GSC Enhancement → Images: Google сообщает о страницах, где изображения не могут быть проиндексированы.

Сроки

Аудит изображений (alt, форматы, lazy loading) на сайте до 100 страниц — 1–2 рабочих дня. Внедрение Image Sitemap + автогенерация при публикации — 2–3 дня. Конвертация существующих изображений в WebP/AVIF — зависит от объёма; скрипт пакетной конвертации через sharp или ffmpeg + обновление шаблонов — 2–4 дня.