**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"  // источник — JPEG; Next конвертирует
  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` (имя файла, а не описание)
- ❌ `Изображение сумки` (говорит "изображение")
- ❌ `Купите сейчас! Лучшая кожаная сумка!` (рекламное)
- ❌ `bag bag bag leather brown` (перенасыщение ключевыми словами)
- ❌ Пустой 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 текст для каждого медиа-актива по регионам.
- Массовая генерация AI alt текста на панели управления `/seo/images`.
- Карта изображений по адресу `/sitemaps/images/route.ts`.
- `<link rel="preload" as="image" fetchpriority="high">` на главном изображении LCP на каждой странице.

## FAQ

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

**Приемлем ли alt текст, сгенерированный ИИ, для Google?**
Да, если он точный и полезный. Рекомендации 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 и ручной ввод.