**TL;DR.** SEO de imagens é mais importante para ecommerce. A Pesquisa de Imagens é uma fonte real de tráfego (15–25% em moda/decor). Acertar quatro coisas: formato moderno (AVIF), tamanhos responsivos, texto alternativo preciso por localidade e um sitemap de imagens. A visão de IA agora torna a geração em massa de texto alternativo trivial.

## Por que o SEO de imagens é mais importante para ecommerce

Tráfego de Pesquisa de Imagens por categoria (estimativas da indústria 2025–2026):

| Categoria               | Participação na Pesquisa de Imagens |
| ---------------------- | ------------------ |
| Moda / Vestuário       | 20–35%             |
| Decoração de casa      | 15–25%             |
| Beleza                  | 10–20%             |
| Alimentos              | 10–15%             |
| Eletrônicos             | 5–10%              |
| B2B / Industrial         | < 5%               |

Além da Pesquisa de Imagens clássica, Google Lens, Pinterest e Pesquisa de Imagens para Compras usam as mesmas imagens e metadados. Um forte SEO de imagens se acumula.

## Passo 1: Formato de arquivo

| Formato       | Compressão vs JPEG | Suporte do navegador (2026)                       | Caso de uso                          |
| ------------ | ------------------- | -------------------------------------------- | --------------------------------- |
| AVIF         | -40% a -50%        | 95%+ globalmente                                | Novas imagens, imagens principais           |
| WebP         | -25% a -35%        | 99%+ globalmente                                | Fallback para Safari/IE mais antigos      |
| JPEG         | baseline            | Universal                                    | Fallback final                    |
| PNG          | baseline + sem perda | Universal                                    | Transparência, logotipos               |
| SVG          | vetor              | Universal                                    | Ícones, logotipos, gráficos simples     |

O padrão de 2026: AVIF com fallback para WebP. Next.js `<Image>` faz isso automaticamente.

```tsx
<Image
  src="/products/leather-bag.jpg"  // source is JPEG; Next converts
  width={800}
  height={800}
  alt="Bolsa mensageiro de couro marrom, grão integral, hardware de latão"
  formats={['image/avif', 'image/webp']}
/>
```

## Passo 2: Tamanhos responsivos

Gere várias resoluções e deixe o navegador escolher. O par `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="Bolsa mensageiro de couro marrom, grão integral, hardware de latão"
  width="800"
  height="800"
/>
```

Next.js `<Image>` lida com `srcset` + `sizes` automaticamente quando você fornece a propriedade `sizes`.

## Passo 3: Texto alternativo

Regras para texto alternativo:

1. Descreva o que está na imagem, em contexto.
2. Evite "Imagem de..." (o alt é implicitamente uma imagem).
3. Seja específico. "Bolsa mensageiro de couro marrom, grão integral, hardware de latão" é melhor que "bolsa de couro".
4. Combine com o contexto da página do produto. O alt da primeira imagem do produto deve focar na principal característica do produto.
5. Varie o alt entre as imagens do produto (alt da imagem 1 ≠ alt da imagem 2).
6. ≤ 125 caracteres normalmente (leitores de tela cortam mais longos).
7. Traduza por localidade.

Padrões para ecommerce:

| Tipo de imagem                    | Padrão de alt                                                            |
| ----------------------------- | ---------------------------------------------------------------------- |
| Imagem principal do produto          | `[Nome do produto], [atributo principal (material/cor/tamanho)]`            |
| Detalhe do produto / closeup       | `[Nome do produto] — [detalhe] (ex.: costura, hardware, etiqueta)`          |
| Estilo de vida / modelo              | `[Nome do produto] usado por modelo em [configuração]`                            |
| Variante (cor/tamanho)            | `[Nome do produto] em [variante]`                                          |
| Miniatura da galeria              | Igual à imagem principal que representa                                    |
| Decorativa                     | `alt=""` (alt vazio — explicitamente decorativa)                            |
| Logotipo da marca                     | `[Nome da marca]` ou `[Logotipo da marca]`                                  |
| Imagem principal da página de categoria              | `[Nome da categoria] coleção`                                            |

Padrões de alt ruins:

- ❌ `bag.jpg` (nome do arquivo, não descrição)
- ❌ `Imagem de uma bolsa` (diz "imagem")
- ❌ `Compre agora! Melhor bolsa de couro!` (promocional)
- ❌ `bag bag bag leather brown` (enchimento de palavras-chave)
- ❌ Alt vazio em uma imagem significativa (falha de acessibilidade)

## Passo 4: Alt ciente da localidade

Uma loja francesa precisa de texto alternativo em francês. Um produto em inglês importado para a localidade francesa sem alt traduzido terá alt que diz "Bolsa mensageiro de couro marrom" em uma página francesa — ruim para usuários com leitores de tela em francês e ruim para Pesquisa de Imagens em francês.

Modelo de dados:

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

Renderize o alt apropriado para a localidade:

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

## Passo 5: Visão de IA para geração em massa

Escrever manualmente texto alternativo para 10.000 imagens de produtos não é realista. A visão GPT-4o (ou equivalente) gera texto alternativo preciso a partir de imagens de produtos por aproximadamente $0.001–0.005 por imagem.

Modelo de prompt:

```
Você está escrevendo texto alternativo para uma imagem de produto de ecommerce. Descreva o produto de forma clara e específica.

Contexto:
- Nome do produto: "{product.name}"
- Categoria: "{product.category}"
- Marca: "{product.brand}"
- Localidade: "{locale}"

Imagem:
{image_url}

Restrições:
- Máximo de 125 caracteres.
- Descreva o produto, cor, material se visível.
- Linguagem apropriada para a localidade.
- Sem prefixo "Imagem de...".
- Sem linguagem promocional.

Saída apenas o texto alternativo. Sem explicação.
```

Exemplo de custo: 10.000 imagens × $0.002 cada = $20.

Sempre faça uma revisão de amostra (10–20%) antes de publicar o alt gerado por IA.

## Passo 6: Metas de compressão

| Tipo de imagem                | Tamanho de arquivo alvo  |
| ------------------------- | ----------------- |
| Imagem principal / grande do produto (1600px) | ≤ 200KB AVIF   |
| Imagem principal do produto (800px) | ≤ 100KB AVIF      |
| Miniatura da galeria (200px)  | ≤ 20KB AVIF       |
| Cartão de categoria (400px)      | ≤ 50KB AVIF       |
| Logotipo                       | ≤ 10KB SVG ou PNG |

Ferramentas:

- [Squoosh](https://squoosh.app) para otimização pontual.
- Biblioteca `sharp` em Node.js para processamento em lote programático.
- Next.js Image lida com isso automaticamente.

## Passo 7: Sitemap de imagens

O sitemap de imagens sinaliza ao Google quais imagens em seu site são imagens de produtos comerciais. Formato:

```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>Bolsa mensageiro de couro marrom</image:title>
      <image:caption>Bolsa mensageiro de couro grão integral com hardware de latão</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>Bolsa de couro marrom — detalhe do hardware</image:title>
    </image:image>
  </url>
</urlset>
```

Envie o sitemap de imagens separadamente no Google Search Console.

## Como a Ordiko lida com SEO de imagens

- AVIF + fallback para WebP via Next.js Image automaticamente.
- Tamanhos responsivos gerados no momento do upload.
- Texto alternativo por localidade em cada ativo de mídia.
- Geração em massa de texto alternativo de IA no painel `/seo/images`.
- Sitemap de imagens em `/sitemaps/images/route.ts`.
- `<link rel="preload" as="image" fetchpriority="high">` na imagem principal LCP por página.

## FAQ

**O texto alternativo afeta diretamente as classificações?**
Indiretamente. O texto alternativo não classifica páginas; ele classifica imagens na Pesquisa de Imagens do Google. Para ecommerce, isso é comercialmente relevante — a Pesquisa de Imagens gera 15–25% do tráfego de busca em algumas categorias (moda, decoração).

**O texto alternativo gerado por IA é aceitável para o Google?**
Sim, se for preciso e útil. A orientação do Google é baseada na qualidade do conteúdo, não na fonte de criação. Texto alternativo gerado por IA é aceitável; texto alternativo gerado por IA de baixa qualidade não é. Sempre faça uma revisão de amostra da saída da IA.

**Qual é a diferença entre texto alternativo e atributo title?**
O alt é para leitores de tela e fallback em caso de falha de imagem (e SEO). O title é a dica de ferramenta ao passar o mouse. Use sempre alt; evite title para imagens de produtos, a menos que você tenha uma razão específica de UX.

**Como a Ordiko lida com a geração em massa de alt?**
O painel /seo/images da Ordiko lista cada imagem unida ao seu proprietário de entidade e status de alt por localidade. Seleção em massa + 'Gerar com IA' chama a visão gpt-4o-mini via uma fila Trigger.dev com estimativa de custo. A flag media.aiGeneratedAlt distingue IA de manual.