Оптимізація 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">

<!-- Погано: пусте там де потрібне -->
<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>
  </url>

</urlset>

До 1000 зображень в одному <url>. Для великих каталогів — Sitemap Index.

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

loading="lazy" — нативний атрибут, браузери та Googlebot розуміють з 2019 року. Проблема: історично багато сайтів реалізовували через 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 через 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;
            }
            observer.unobserve(img);
        }
    });
}, {
    rootMargin: '200px 0px'
});

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

SEO проблема: Googlebot бачить src="/placeholder.svg" та data-src="/product-1.webp". Google вміє обробляти data-src паттерн, але нативний loading="lazy" надійніший.

Перевірка: GSC → 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"
    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

Ім'я файлу — слабкий але враховуваний сигнал:

# Погано
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";
}

Аудит поточного стану

# Знайти зображення без 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 — залежить від обсягу; скрипт пакетної конвертації + оновлення шаблонів — 2–4 дні.