**TL;DR.** Bild-SEO ist besonders wichtig für den E-Commerce. Die Bildsuche ist eine echte Traffic-Quelle (15–25% im Bereich Mode/Dekor). Achte auf vier Dinge: modernes Format (AVIF), responsive Größen, genaue Alt-Texte pro Region und eine Bild-Sitemap. KI-gestützte Bildanalyse macht die Massenproduktion von Alt-Texten jetzt trivial.

## Warum Bild-SEO für den E-Commerce wichtiger ist

Traffic durch Bildsuche nach Kategorie (Branchenschätzungen 2025–2026):

| Kategorie               | Anteil an der Bildsuche |
| ---------------------- | ------------------ |
| Mode / Bekleidung       | 20–35%             |
| Wohnkultur              | 15–25%             |
| Schönheit               | 10–20%             |
| Lebensmittel            | 10–15%             |
| Elektronik             | 5–10%              |
| B2B / Industrie         | < 5%               |

Über die klassische Bildsuche hinaus verwenden Google Lens, Pinterest und die Bildsuche im Shopping-Bereich dieselben Bilder und Metadaten. Starke Bild-SEO verstärkt sich gegenseitig.

## Schritt 1: Dateiformat

| Format       | Kompression vs JPEG | Browserunterstützung (2026)                       | Anwendungsfall                          |
| ------------ | ------------------- | -------------------------------------------- | --------------------------------- |
| AVIF         | -40% bis -50%        | 95%+ weltweit                                | Neue Bilder, Hauptbilder           |
| WebP         | -25% bis -35%        | 99%+ weltweit                                | Fallback für ältere Safari/IE      |
| JPEG         | Basislinie            | Universell                                    | Letzter Fallback                    |
| PNG          | Basislinie + verlustfrei | Universell                                    | Transparenz, Logos               |
| SVG          | Vektor              | Universell                                    | Icons, Logos, einfache Grafiken     |

Der Standard 2026: AVIF mit WebP-Fallback. Next.js `<Image>` erledigt dies automatisch.

```tsx
<Image
  src="/products/leather-bag.jpg"  // Quelle ist JPEG; Next konvertiert
  width={800}
  height={800}
  alt="Braune Leder-Umhängetasche, Vollnarbenleder, Messingbeschläge"
  formats={['image/avif', 'image/webp']}
/>
```

## Schritt 2: Responsive Größen

Generiere mehrere Auflösungen und lasse den Browser auswählen. Das `srcset` + `sizes` Paar:

```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="Braune Leder-Umhängetasche, Vollnarbenleder, Messingbeschläge"
  width="800"
  height="800"
/>
```

Next.js `<Image>` verarbeitet `srcset` + `sizes` automatisch, wenn du die `sizes`-Eigenschaft angibst.

## Schritt 3: Alt-Text

Regeln für Alt-Text:

1. Beschreibe, was im Bild zu sehen ist, im Kontext.
2. Überspringe "Bild von..." (alt ist implizit ein Bild).
3. Sei spezifisch. "Braune Leder-Umhängetasche, Vollnarbenleder, Messingbeschläge" ist besser als "Leder Tasche".
4. Passe den Kontext der Produktseite an. Der Alt-Text des ersten Produktbildes sollte sich auf das Hauptmerkmal des Produkts konzentrieren.
5. Variiere den Alt-Text zwischen den Produktbildern (alt von Bild 1 ≠ alt von Bild 2).
6. Typischerweise ≤ 125 Zeichen (Screenreader schneiden längere Texte ab).
7. Übersetze pro Region.

Muster für den E-Commerce:

| Bildtyp                    | Alt-Muster                                                            |
| ----------------------------- | ---------------------------------------------------------------------- |
| Primäres Produktbild          | `[Produktname], [primäres Attribut (Material/Farbe/Größe)]`            |
| Produktdetail / Nahaufnahme   | `[Produktname] — [Detail] (z.B. Naht, Beschläge, Etikett)`          |
| Lifestyle / Modell            | `[Produktname] getragen von Modell in [Umgebung]`                            |
| Variante (Farbe/Größe)       | `[Produktname] in [Variante]`                                          |
| Galerie-Vorschaubild         | Dasselbe wie das Hauptbild, das es darstellt                                    |
| Dekorativ                     | `alt=""` (leerer Alt-Text — ausdrücklich dekorativ)                            |
| Markenlogo                    | `[Markenname]` oder `[Markenname] Logo`                                  |
| Kategorie-Seiten-Held         | `[Kategoriename] Kollektion`                                            |

Schlechte Alt-Muster:

- ❌ `bag.jpg` (Dateiname, nicht Beschreibung)
- ❌ `Bild von einer Tasche` (sagt "Bild")
- ❌ `Jetzt kaufen! Beste Leder Tasche!` (werblich)
- ❌ `bag bag bag leather brown` (Keyword-Stuffing)
- ❌ Leerer Alt-Text bei einem bedeutenden Bild (Zugänglichkeitsfehler)

## Schritt 4: Regionale Alt-Texte

Ein französischer Shop benötigt französische Alt-Texte. Ein englisches Produkt, das in die französische Region importiert wird, ohne übersetzten Alt-Text, hat einen Alt-Text, der auf einer französischen Seite "Braune Leder-Umhängetasche" sagt — schlecht für Nutzer mit französischen Screenreadern und schlecht für die französische Bildsuche.

Datenmodell:

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

Render den regional passenden Alt-Text:

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

## Schritt 5: KI-gestützte Bildanalyse für die Massenproduktion

Manuelles Schreiben von Alt-Texten für 10.000 Produktbilder ist nicht realistisch. GPT-4o Vision (oder Äquivalent) generiert genaue Alt-Texte aus Produktbildern für etwa $0.001–0.005 pro Bild.

Prompt-Vorlage:

```
Du schreibst Alt-Text für ein E-Commerce-Produktbild. Beschreibe das Produkt klar und spezifisch.

Kontext:
- Produktname: "{product.name}"
- Kategorie: "{product.category}"
- Marke: "{product.brand}"
- Region: "{locale}"

Bild:
{image_url}

Einschränkungen:
- Maximal 125 Zeichen.
- Beschreibe das Produkt, Farbe, Material, wenn sichtbar.
- Regionale Sprache.
- Kein "Bild von..." Präfix.
- Keine werblichen Formulierungen.

Gib nur den Alt-Text aus. Keine Erklärung.
```

Kostenbeispiel: 10.000 Bilder × $0.002 pro Bild = $20.

Immer eine Stichprobenüberprüfung (10–20%) vor der Veröffentlichung von KI-generiertem Alt-Text durchführen.

## Schritt 6: Kompressionsziele

| Bildtyp                | Ziel-Dateigröße  |
| ------------------------- | ----------------- |
| Held / großes Produktbild (1600px) | ≤ 200KB AVIF   |
| Hauptproduktbild (800px) | ≤ 100KB AVIF      |
| Galerie-Vorschaubild (200px)  | ≤ 20KB AVIF       |
| Kategorie-Karte (400px)      | ≤ 50KB AVIF       |
| Logo                       | ≤ 10KB SVG oder PNG |

Werkzeuge:

- [Squoosh](https://squoosh.app) für einmalige Optimierung.
- `sharp` Bibliothek in Node.js für programmatische Batch-Verarbeitung.
- Next.js Image erledigt dies automatisch.

## Schritt 7: Bild-Sitemap

Die Bild-Sitemap signalisiert Google, welche Bilder auf deiner Seite kommerzielle Produktbilder sind. Format:

```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>Braune Leder-Umhängetasche</image:title>
      <image:caption>Umhängetasche aus Vollnarbenleder mit Messingbeschlägen</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>Braune Leder Tasche — Detail der Beschläge</image:title>
    </image:image>
  </url>
</urlset>
```

Reiche die Bild-Sitemap separat in der Google Search Console ein.

## Wie Ordiko Bild-SEO handhabt

- AVIF + WebP-Fallback über Next.js Image automatisch.
- Responsive Größen werden beim Hochladen generiert.
- Pro Region Alt-Texte für jedes Medienasset.
- Massenproduktion von KI-Alt-Texten im Dashboard `/seo/images`.
- Bild-Sitemap unter `/sitemaps/images/route.ts`.
- `<link rel="preload" as="image" fetchpriority="high">` auf dem LCP-Heldbild pro Seite.

## FAQ

**Beeinflusst Alt-Text direkt die Rankings?**
Indirekt. Alt-Text rankt keine Seiten; er rankt Bilder in der Google Bildsuche. Für den E-Commerce ist das kommerziell relevant — die Bildsuche treibt 15–25% des Suchtraffics in einigen Kategorien (Mode, Dekor).

**Ist KI-generierter Alt-Text für Google akzeptabel?**
Ja, wenn er genau und hilfreich ist. Die Richtlinien von Google basieren auf der Inhaltsqualität, nicht auf der Quelle der Erstellung. KI-generierter Alt-Text ist in Ordnung; KI-generierter minderwertiger Alt-Text ist es nicht. Führe immer eine Stichprobenüberprüfung des KI-Ausgangs durch.

**Was ist der Unterschied zwischen Alt-Text und dem Title-Attribut?**
Alt ist für Screenreader und als Fallback bei Bildfehlern (und SEO). Title ist das Hover-Tooltip. Verwende immer Alt; überspringe Title für Produktbilder, es sei denn, du hast einen spezifischen UX-Grund.

**Wie geht Ordiko mit der Massenproduktion von Alt-Texten um?**
Das Dashboard von Ordiko `/seo/images` listet jedes Bild zusammen mit seinem Eigentümer und dem Alt-Status pro Region auf. Massenhaft auswählen + 'Mit KI generieren' ruft gpt-4o-mini Vision über eine Trigger.dev-Warteschlange mit Kostenschätzung auf. Das Flag media.aiGeneratedAlt unterscheidet KI von manuell.