**TL;DR.** Gute PDPs optimieren drei Dinge: (1) Geschwindigkeit (LCP < 1,8 s, INP < 200 ms), (2) Klarheit (Galerie, Variante, Kaufen-Button) und (3) Vertrauen (Bewertungen, Rückgaberecht, Versand, soziale Beweise). Jedes Element hat einen messbaren Einfluss auf die Konversion. Stapeln Sie sie gezielt.

## Der PDP-Trichter

Typischer E-Commerce-Trichter (Branchenbenchmarks 2025–2026):

| Schritt                               | Median-Konversion | Top-Quartil     |
| ------------------------------------- | ----------------- | ---------------- |
| PDP-Ansicht → In den Warenkorb        | 8–15%             | 20–30%           |
| In den Warenkorb → Kasse              | 50–65%            | 70–80%           |
| Kasse → Kauf                          | 50–70%            | 75–90%           |
| **Gesamte PDP-Ansicht → Kauf**       | **2–4%**          | **8–15%**        |

Läden, die von Median zu Top-Quartil in jedem Schritt wechseln, verdoppeln oder verdreifachen den Umsatz pro Sitzung.

## Geschwindigkeit

Detailliert behandelt im [Core Web Vitals-Leitfaden](/guides/core-web-vitals-ecommerce-2026). Wichtige Schwellenwerte für PDP:

- LCP ≤ 1,8 s (Ziel), ≤ 2,5 s (gut).
- INP ≤ 150 ms (Ziel), ≤ 200 ms (gut).
- CLS < 0,05 (Ziel), ≤ 0,1 (gut).

Eine Sekunde Verbesserung des LCP auf PDP führt typischerweise zu einem Anstieg der Konversion um 5–15%.

## Galerie und Hauptbild

Das erste Produktbild ist Ihr LCP. Muster:

| Element            | Beste Praxis                                                       |
| ------------------ | ------------------------------------------------------------------ |
| Hauptbildgröße     | 800×800px bis 1200×1200px auf Desktop; volle Breite auf Mobilgeräten  |
| Format             | AVIF (mit WebP/JPEG-Fallback)                                      |
| LCP-Vorabladung    | Ja, `<link rel="preload" as="image" fetchpriority="high">`       |
| Thumbnail-Position | Vertikale Leiste auf Desktop (links oder rechts); horizontal unter dem Hauptbild auf Mobilgeräten |
| Pinch-Zoom         | Ja auf Mobilgeräten                                               |
| Hover-Zoom         | Optional auf Desktop; blockieren Sie nicht den Klick zum Detail   |
| Anzahl der Bilder   | 4–8 typisch; 12+ für Mode oder komplexe Produkte                  |
| 360°-Ansicht       | Hochwertig für Produkte mit hohem AOV; lazy-load (blockieren Sie nicht LCP) |
| Video              | Unter der Galerie, Autoplay stumm, lazy-load                       |

## Variantenauswahl

Die beiden universellen Variantentypen:

**Farbe**: Verwenden Sie Farbmuster (visuelle Kreise oder Quadrate der tatsächlichen Farbe).

```html
<div role="group" aria-label="Farbe">
  <button aria-pressed="true" aria-label="Braun">
    <span style="background: #5C3A21" />
  </button>
  <button aria-pressed="false" aria-label="Schwarz">
    <span style="background: #1A1A1A" />
  </button>
  <!-- ... -->
</div>
```

**Größe**: Verwenden Sie Schaltflächen mit der Größenbezeichnung.

```html
<div role="group" aria-label="Größe">
  <button aria-pressed="false">S</button>
  <button aria-pressed="true">M</button>
  <button aria-pressed="false">L</button>
  <button aria-disabled="true">XL (Nicht auf Lager — benachrichtigen Sie mich)</button>
</div>
```

Regeln:

- Verwenden Sie `aria-pressed` für den ausgewählten Zustand.
- Deaktivieren Sie visuell die nicht vorrätigen Varianten; bieten Sie "Benachrichtigen, wenn verfügbar" an.
- Aktualisieren Sie die URL, um die ausgewählte Variante für die Teilbarkeit einzuschließen (`?variant=size-m`).
- Optimistische UI für den Variantenwechsel (behandelt im [INP-Leitfaden](/guides/inp-optimization-product-pages)).

## In den Warenkorb

Die primäre CTA. Beste Praktiken:

| Element                | Muster                                                               |
| ---------------------- | -------------------------------------------------------------------- |
| Button-Text            | "In den Warenkorb" oder "In die Tasche" (Ihre Markenwortwahl)      |
| Farbe                  | Markenprimär; hoher Kontrast zum Seitenhintergrund                   |
| Größe                  | Volle Breite auf Mobilgeräten; Mindestgröße 48×48px für Touch-Ziel  |
| Sticky auf Mobilgeräten | Ja, am unteren Rand verankert, wenn über die ursprüngliche Faltung gescrollt wird |
| Ladezustand            | Spinner im Button, während der Server bestätigt; blockieren Sie niemals die Seite |
| Bestätigungs-Muster    | Eingeschobenes Mini-Warenkorb oder Toast; keine vollständige Seitenunterbrechung |
| Lagerdringlichkeit      | "Nur noch 3 verfügbar", wenn wahr; niemals fälschen                 |
| Preis nahe dem Button   | Ja, groß und klar                                                    |

Anti-Muster:

- Mehrere primäre CTAs ("In den Warenkorb" + "Jetzt kaufen" + "Schnell kaufen") — spaltet die Aufmerksamkeit.
- Modalunterbrechung nach dem In-den-Warenkorb ("Weiter einkaufen oder zur Kasse?") — fügt einen Schritt hinzu.
- Versteckter Preis (Scrollen nach oben erzwingen, um zu sehen).

## Vertrauenssignale

Der Cluster von Signalen in der Nähe des Kaufen-Buttons:

1. **Kostenloser Versand-Schwellenwert**: "Kostenloser Versand über $50" — erhöht die Warenkorbhöhe.
2. **Zusammenfassung der Rückgabebedingungen**: "30 Tage kostenlose Rücksendungen" — reduziert den Kaufwiderstand.
3. **Geschätzte Lieferung**: "Kommt am Mittwoch, den 15. Mai" — konkrete Daten sind besser als Zeiträume.
4. **Sicherheitsabzeichen**: Stripe-ähnlicher "Sicherer Checkout"-Indikator — geringfügig, aber kumulativ.
5. **Aggregierte Bewertungssterne + Anzahl**: "4,7 ★ aus 218 Bewertungen" — primäres Vertrauenssignal.

## Soziale Beweise

Effektive Muster für soziale Beweise:

- **Verifizierte Bewertungsausschnitte**: 2–3 Bewertungen über der Faltung mit Sternebewertung, Autor, Datum.
- **Bewertungsanzahl**: Eine große Anzahl (218 Bewertungen) ist überzeugender als nur Sterne.
- **"X Personen haben das heute angesehen"**: Drucklose Knappheit. Verwenden Sie echte Daten, nicht zufällige.
- **Benachrichtigungen über kürzliche Käufe**: Pop-up, das zeigt "Sarah aus London hat das vor 3 Stunden gekauft." Echt, opt-in für den Käufer. Häufigkeit: alle 30–60 Sekunden, maximal.
- **Benutzergenerierte Fotos**: Instagram-ähnliches Raster von Kunden, die das Produkt tragen/benutzen.

Vermeiden:

- Gefälschte Bewertungen.
- Gefälschte Lagerdringlichkeit ("Nur noch 1 verfügbar!", wenn es 200 gibt).
- Aggressive Countdown-Timer ("Angebot endet in 3:21!").

Diese wirken kontraproduktiv — moderne Käufer erkennen sie und das Vertrauen sinkt.

## Häufig zusammen gekauft

Ein echter Konversionshebel. Muster:

```
Dieses Produkt: Braune Leder-Umhängetasche       $149
+ Messing-Schnallen-Gürtel                        $89
+ Leder-Kartenetui                               $49
─────────────────────────────────────────────────────
Gesamtpaket:                                      $287
[ Paket in den Warenkorb legen  →  $258 ] (sparen Sie $29)
```

Implementierung:

- Vorab berechnen Sie "häufig zusammen gekaufte" Paare aus der Ko-Occurrence von Bestellpositionen + Kosinusähnlichkeit auf `descriptionEmbedding`.
- Echte `<a>`-Tags, die auf die empfohlenen Produkte verweisen (crawlbar für SEO).
- Ein-Klick-Paket hinzufügen.

## Ähnliche Produkte

Unter "häufig zusammen gekauft". Verwenden Sie:

- pgvector-Kosinus auf `descriptionEmbedding`, um ähnliche Produkte in derselben Kategorie zu finden.
- Optional nach Preisspanne filtern.
- Echte `<a>`-Tags mit `rel="related"`.

## Spezifikationen und Beschreibung

Langform-Inhalte sind gut für SEO und gut für hochpreisige Käufe. Struktur:

```markdown
## Beschreibung
[Vollständiger Marketingtext — 2-4 Absätze]

## Spezifikationen
| Material       | Vollnarbenleder     |
| ---------------| ------------------- |
| Abmessungen    | 13" × 11" × 4"     |
| Gewicht        | 1,8 lbs            |
| Hardware       | Massivmessing       |
| Herkunft       | Hergestellt in Italien |

## Was ist im Paket
- Tasche
- Abnehmbarer Schultergurt
- Staubbeutel
- Pflegeanleitung

## Pflege
[Pflegeanleitungen]
```

Dieser Inhalt geht auch in das Produktfeld `description` im JSON-LD-Format, was die Tiefe der Rich Results verbessert.

## Bewertungsabschnitt

Unter dem Spezifikationsabschnitt. Beste Praktiken:

- Zeigen Sie den Allzeitdurchschnitt + Anzahl prominent an.
- Verteilungshistogramm (5-Sterne: 67%, 4-Sterne: 22%, 3-Sterne: 8%, 2-Sterne: 2%, 1-Stern: 1%).
- Sortieren und filtern (neueste, hilfreichste, nach Sternen).
- Pagination oder unendliches Scrollen (lazy load).
- Antworten auf Bewertungen, wo relevant.
- Verifiziertes Kaufabzeichen.

## Wie Ordikos Standard-PDP aufgebaut ist

- Serverseitig gerendert mit React Server Components.
- LCP-Hauptbild vorab geladen mit `priority` und `fetchPriority="high"`.
- Variantenauswahl mit `useOptimistic` für sofortiges Feedback.
- Sticky Mobile In-den-Warenkorb von Scrollen über die ursprüngliche Faltung.
- Eingeschobene Mini-Warenkorb-Bestätigung (keine Seitenunterbrechung).
- Vertrauenssignale (kostenloser Versand, Rückgaben, sicherer Checkout) serverseitig gerendert.
- Zusammenfassung verifizierter Bewertungen und Bewertungsübersicht (Top 5 im JSON-LD).
- Häufig zusammen gekauft über pgvector-Kosinusähnlichkeit.
- Ähnliche Produkte in derselben Kategorie, crawlbare Links.
- Vollständige Beschreibung + Spezifikationen + Bewertungen unter der Faltung.

Standard INP < 200 ms p75 mit diesem Setup.

## FAQ

**Was ist die am meisten unterschätzte PDP-Optimierung?**
Ein Sticky Mobile In-den-Warenkorb-Button, der während des Scrollens sichtbar bleibt. Bei langen PDPs (die sie für SEO haben sollten) benötigen Benutzer, die Bewertungen oder Spezifikationen scrollen, einen einzigen Tipp, um zu kaufen. Läden, die einen Sticky CTA hinzufügen, sehen typischerweise einen Anstieg der mobilen Konversion um 10–20%.

**Sollte ich nicht vorrätige Varianten ausblenden?**
Nein. Zeigen Sie sie visuell deaktiviert, aber dennoch vorhanden an. Sie auszublenden, schafft eine inkonsistente UX und signalisiert, dass wiederkehrende Kunden ein Produkt nicht finden können, das sie zuvor gekauft haben. Deaktivieren + 'Benachrichtigen Sie mich, wenn verfügbar' konvertiert Kunden in E-Mail-Abonnenten.

**Wie viel soziale Beweise sind zu viel?**
Eine Pop-up-Benachrichtigung über kürzliche Käufe alle 30–60 Sekunden fühlt sich nützlich an. Alle 5 Sekunden fühlt sich manipulativ an. Ein persistentes 'X Personen haben das in den letzten 24 Stunden angesehen' ist in Ordnung. Übermäßige soziale Beweise sind die Hauptursache für Vertrauensverlust.

**Wie geht Ordiko mit der PDP-UX um?**
Ordikos Standard-PDP umfasst einen Sticky Mobile CTA, LCP-vorabgeladenes Hauptbild, Farb-/Größenmuster mit optimistischer UI, verifizierte Bewertungszusammenfassung, häufig zusammen gekauft (pgvector-Kosinus auf Beschreibungseinbettungen) und Breadcrumb + JSON-LD standardmäßig. INP < 200 ms p75 mit dem Standard-Theme.