**TL;DR.** SEO зображень має найбільше значення для електронної комерції. Пошук зображень є реальним джерелом трафіку (15–25% у моді/декорі). Виправте чотири речі: сучасний формат (AVIF), адаптивні розміри, точний alt текст для кожної локалі та мапу зображень. Штучний інтелект тепер робить генерацію alt-тексту в масовому порядку тривіальною.

## Чому SEO зображень важливіше для електронної комерції

Трафік пошуку зображень за категоріями (оцінки галузі 2025–2026):

| Категорія               | Частка пошуку зображень |
| ---------------------- | ------------------ |
| Мода / Одяг           | 20–35%             |
| Декор для дому        | 15–25%             |
| Краса                  | 10–20%             |
| Їжа                    | 10–15%             |
| Електроніка           | 5–10%              |
| B2B / Промисловість    | < 5%               |

Окрім класичного пошуку зображень, Google Lens, Pinterest та Пошук зображень для покупок використовують ті ж зображення та метадані. Сильне SEO зображень підсилює ефект.

## Крок 1: Формат файлу

| Формат       | Стиснення проти JPEG | Підтримка браузерами (2026)                       | Сценар використання                          |
| ------------ | ------------------- | -------------------------------------------- | --------------------------------- |
| AVIF         | -40% до -50%        | 95%+ у всьому світі                                | Нові зображення, героїчні зображення           |
| WebP         | -25% до -35%        | 99%+ у всьому світі                                | Резерв для старіших Safari/IE      |
| JPEG         | базовий            | Універсальний                                    | Остаточний резерв                    |
| PNG          | базовий + без втрат | Універсальний                                    | Прозорість, логотипи               |
| SVG          | вектор              | Універсальний                                    | Іконки, логотипи, прості графіки     |

За замовчуванням 2026 року: AVIF з резервом WebP. Next.js `<Image>` робить це автоматично.

```tsx
<Image
  src="/products/leather-bag.jpg"  // source is JPEG; Next converts
  width={800}
  height={800}
  alt="Коричнева шкіряна сумка-посланець, з повнозернистої шкіри, латунна фурнітура"
  formats={['image/avif', 'image/webp']}
/>
```

## Крок 2: Адаптивні розміри

Генеруйте кілька роздільних здатностей і дайте браузеру вибрати. Пара `srcset` + `sizes`:

```html
<img
  src="/products/leather-bag-800.avif"
  srcset="
    /products/leather-bag-400.avif 400w,
    /products/leather-bag-800.avif 800w,
    /products/leather-bag-1200.avif 1200w,
    /products/leather-bag-1600.avif 1600w
  "
  sizes="(max-width: 768px) 100vw, 50vw"
  alt="Коричнева шкіряна сумка-посланець, з повнозернистої шкіри, латунна фурнітура"
  width="800"
  height="800"
/>
```

Next.js `<Image>` автоматично обробляє `srcset` + `sizes`, коли ви надаєте пропс `sizes`.

## Крок 3: Alt текст

Правила alt тексту:

1. Описуйте, що на зображенні, у контексті.
2. Пропустіть "Зображення..." (alt є імпліцитно зображенням).
3. Будьте конкретними. "Коричнева шкіряна сумка-посланець, з повнозернистої шкіри, латунна фурнітура" краще, ніж "шкіряна сумка".
4. Відповідайте контексту сторінки продукту. Alt першого зображення продукту має зосереджуватися на основній характеристиці продукту.
5. Варіюйте alt між зображеннями продуктів (alt зображення 1 ≠ alt зображення 2).
6. ≤ 125 символів зазвичай (екрани читачів обривають довші).
7. Перекладайте для кожної локалі.

Шаблони для електронної комерції:

| Тип зображення                    | Шаблон alt                                                            |
| ----------------------------- | ---------------------------------------------------------------------- |
| Основне зображення продукту          | `[Назва продукту], [основна характеристика (матеріал/колір/розмір)]`            |
| Деталь продукту / крупний план       | `[Назва продукту] — [деталь] (наприклад, шви, фурнітура, етикетка)`          |
| Стильове / модельне зображення              | `[Назва продукту], що носить модель у [обстановці]`                            |
| Варіант (колір/розмір)            | `[Назва продукту] у [варіанті]`                                          |
| Мініатюра галереї              | Таке ж, як основне зображення, яке вона представляє                                    |
| Декоративне                     | `alt=""` (порожній alt — явно декоративний)                            |
| Логотип бренду                     | `[Назва бренду]` або `[Логотип назви бренду]`                                  |
| Герой сторінки категорії              | `[Назва категорії] колекція`                                            |

Погані шаблони alt:

- ❌ `bag.jpg` (ім'я файлу, а не опис)
- ❌ `Зображення сумки` (каже "зображення")
- ❌ `Купуйте зараз! Найкраща шкіряна сумка!` (рекламний)
- ❌ `сумка сумка сумка шкіряна коричнева` (перенасичення ключовими словами)
- ❌ Порожній alt на значущому зображенні (порушення доступності)

## Крок 4: Локалізований alt

Французький магазин потребує французького alt тексту. Англійський продукт, імпортований у французьку локаль без перекладеного alt, має alt, який говорить "Коричнева шкіряна сумка-посланець" на французькій сторінці — погано для користувачів з французькими екранними читачами та погано для французького пошуку зображень.

Модель даних:

```ts
interface MediaAsset {
  id: string;
  url: string;
  alt: {
    en?: string;
    de?: string;
    fr?: string;
    es?: string;
    // ...
  };
}
```

Відобразіть відповідний для локалі alt:

```tsx
<Image src={asset.url} alt={asset.alt[locale] ?? asset.alt[defaultLocale]} ... />
```

## Крок 5: Штучний інтелект для масової генерації

Ручне написання alt тексту для 10,000 зображень продуктів не є реалістичним. GPT-4o vision (або еквівалент) генерує точний alt текст з зображень продуктів приблизно за $0.001–0.005 за зображення.

Шаблон запиту:

```
Ви пишете alt текст для зображення продукту електронної комерції. Чітко та конкретно опишіть продукт.

Контекст:
- Назва продукту: "{product.name}"
- Категорія: "{product.category}"
- Бренд: "{product.brand}"
- Локаль: "{locale}"

Зображення:
{image_url}

Обмеження:
- Максимум 125 символів.
- Описуйте продукт, колір, матеріал, якщо видно.
- Мова, відповідна локалі.
- Без префікса "Зображення...".
- Без рекламної мови.

Виводьте лише alt текст. Без пояснень.
```

Приклад витрат: 10,000 зображень × $0.002 кожне = $20.

Завжди проводьте вибірковий огляд (10–20%) перед публікацією AI-генерованого alt.

## Крок 6: Цілі стиснення

| Тип зображення                | Цільовий розмір файлу  |
| ------------------------- | ----------------- |
| Героїчне / велике зображення продукту (1600px) | ≤ 200KB AVIF   |
| Основне зображення продукту (800px) | ≤ 100KB AVIF      |
| Мініатюра галереї (200px)  | ≤ 20KB AVIF       |
| Картка категорії (400px)      | ≤ 50KB AVIF       |
| Логотип                       | ≤ 10KB SVG або PNG |

Інструменти:

- [Squoosh](https://squoosh.app) для одноразової оптимізації.
- Бібліотека `sharp` у Node.js для програмного пакетного оброблення.
- Next.js Image обробляє це автоматично.

## Крок 7: Мапа зображень

Мапа зображень сигналізує Google, які зображення на вашому сайті є комерційними зображеннями продуктів. Формат:

```xml
<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/leather-bag</loc>
    <image:image>
      <image:loc>https://example.com/.../leather-bag-main.avif</image:loc>
      <image:title>Коричнева шкіряна сумка-посланець</image:title>
      <image:caption>Сумка-посланець з повнозернистої шкіри з латунною фурнітурою</image:caption>
      <image:license>https://example.com/license</image:license>
    </image:image>
    <image:image>
      <image:loc>https://example.com/.../leather-bag-detail.avif</image:loc>
      <image:title>Коричнева шкіряна сумка — деталі фурнітури</image:title>
    </image:image>
  </url>
</urlset>
```

Подайте мапу зображень окремо в Google Search Console.

## Як Ordiko обробляє SEO зображень

- AVIF + резерв WebP через Next.js Image автоматично.
- Адаптивні розміри генеруються під час завантаження.
- Alt текст для кожного медіа-активу відповідно до локалі.
- Масова генерація alt-тексту AI на панелі `/seo/images`.
- Мапа зображень на `/sitemaps/images/route.ts`.
- `<link rel="preload" as="image" fetchpriority="high">` на героїчному зображенні LCP на кожній сторінці.

## Питання та відповіді

**Чи впливає alt текст безпосередньо на рейтинги?**
Непрямо. Alt текст не ранжує сторінки; він ранжує зображення в Google Image Search. Для електронної комерції це комерційно важливо — Пошук зображень забезпечує 15–25% пошукового трафіку в деяких категоріях (мода, декор).

**Чи приймає Google AI-генерований alt текст?**
Так, якщо він точний і корисний. Рекомендації Google базуються на якості контенту, а не на джерелі створення. AI-генерований alt — це нормально; AI-генерований непотрібний alt — ні. Завжди проводьте вибірковий огляд AI-виходу.

**У чому різниця між alt текстом і атрибутом title?**
Alt призначений для екранних читачів і резерву на випадок невдачі зображення (і SEO). Title — це підказка при наведенні. Завжди використовуйте alt; пропустіть title для зображень продуктів, якщо у вас немає конкретної причини UX.

**Як Ordiko обробляє масову генерацію alt?**
Панель Ordiko /seo/images перераховує кожне зображення, пов'язане з його власником сутності та статусом alt для кожної локалі. Масовий вибір + 'Генерувати з AI' викликає gpt-4o-mini vision через чергу Trigger.dev з оцінкою витрат. Прапорець media.aiGeneratedAlt відрізняє AI від ручного.