Produktseite optimieren: der Aufbau, der verkauft

Die Produktseite ist die Seite, auf der die Kaufentscheidung fällt. Trotzdem wird sie meist als Textaufgabe behandelt: Beschreibung schreiben, fertig. Was zu Text und Keywords gehört, steht im Artikel Produktbeschreibungen, die ranken und verkaufen; was zu Bildern und Alt-Texten gehört, im Artikel Bilder-SEO und Alt-Texte im Shop. Hier geht es um das, was dazwischen fehlt: den Aufbau der gesamten Seite von oben nach unten – welche Elemente in welcher Reihenfolge stehen, was jedes davon leisten muss und wie du misst, ob es wirkt.

Erst herausfinden, welche Produktseiten du anfasst

Behandle nicht alle Produktseiten gleich. Nimm den GA4-Bericht zu den E-Commerce-Käufen (Berichte → Monetarisierung): Er zeigt je Artikel die Aufrufe, die Warenkorb-Hinzufügungen und die Käufe. Rechne die Rate aus Warenkorb-Hinzufügungen geteilt durch Aufrufe.

Interessant sind zwei Gruppen:

• Viele Aufrufe, niedrige Warenkorb-Rate: Die Seite zieht Besucher an, überzeugt aber nicht. Hier lohnt der Umbau am meisten.
• Hohe Warenkorb-Rate, wenige Aufrufe: Die Seite verkauft, wird aber nicht gefunden. Das ist ein SEO- oder Werbethema, kein Thema für den Seitenaufbau.

Wie du Bestseller, Ladenhüter und Trends systematisch auseinanderhältst, steht im Artikel zur Produktanalyse im Online-Shop. In ecomando siehst du unter Produkte die Befunde je Produkt – etwa fehlende Bilder oder kurze Beschreibungen – direkt neben Aufrufen und Umsatz.

Der Aufbau von oben nach unten

Die Reihenfolge folgt der Frage, die sich ein Besucher gerade stellt. Oben: Ist das das Richtige? Mitte: Was kostet es, wann kommt es? Unten: Kann ich dem trauen, gibt es Details?

Auf dem Desktop steht Position 1 links, Position 2 bis 7 rechts daneben, ohne Scrollen sichtbar. Auf dem Handy werden sie untereinander gestapelt; deshalb braucht der Kaufbutton dort eine eigene Regel (siehe unten).

1. Bildergalerie

Bilder ersetzen das Anfassen. Was fehlt, wird retourniert oder gar nicht gekauft.

• Mehrere Perspektiven: Vorderseite, Rückseite, Detail, Produkt in Benutzung oder am Körper.
• Ein Bild mit Maßstab: Hand, Person, Möbelstück im Raum. Aus „35 cm“ kann sich niemand etwas vorstellen.
• Zoom, der auf dem Handy funktioniert (Antippen, nicht nur Mouseover).
• Beim Wechsel der Variante wechselt das Bild.
• Ein kurzes Video, wenn das Produkt Bewegung oder Funktion hat.
• Ladezeit: Das erste Bild entscheidet über den LCP, den Google misst. Komprimieren, in passender Größe ausliefern, kein Lazy Loading auf dem ersten Bild.

2. Titel und Kurzinfo

Der Titel ist die H1 der Seite und sagt, was es ist, für wen und mit welchem Hauptmerkmal: „Regenjacke Damen, wasserdicht, 10.000 mm Wassersäule“ statt „Storm Pro II“. Der Markenname kann dazu, ersetzt die Beschreibung aber nicht.

Direkt darunter zwei bis drei Zeilen Kurzinfo mit den drei Merkmalen, die die Kaufentscheidung tragen. Das ist nicht die Beschreibung, sondern ihre Zusammenfassung für Eilige.

3. Preis

• Der Preis steht groß, in der Nähe des Kaufbuttons, mit Währung und Hinweis auf Mehrwertsteuer und Versand.
• Streichpreise nur, wenn sie echt sind. Die Regeln zu Preisangaben und früheren Preisen sind gesetzlich geregelt; kläre die Darstellung mit deinem Anwalt.
• Grundpreis (je Liter, Kilogramm, Meter), wo er vorgeschrieben ist, direkt beim Preis.
• Bei Staffelpreisen oder Abonnements: eine kleine Tabelle statt Fließtext.

4. Varianten

• Varianten als Buttons oder Farbfelder statt Dropdown, wenn es weniger als etwa acht sind.
• Ausverkaufte Varianten bleiben sichtbar, aber als nicht verfügbar markiert. Verschwinden sie, sucht der Besucher, ob er etwas übersehen hat.
• Größentabelle als Overlay direkt neben der Größenauswahl, nicht am Seitenende.
• Wenn Varianten den Preis ändern, aktualisiert sich der Preis sofort und sichtbar.

5. Verfügbarkeit und Lieferzeit

„Auf Lager, Lieferung in 2–3 Werktagen“ ist eine Aussage. „Lieferbar“ ist keine. Bei kleinen Restmengen darf das stehen, wenn es stimmt („Noch 3 Stück“). Bei nicht lagernden Produkten: Lieferzeit ehrlich nennen oder eine Benachrichtigung anbieten. Falsche Verfügbarkeiten sind einer der schnellsten Wege zu schlechten Bewertungen.

6. Kaufbutton

• Kontrastfarbe, die sonst auf der Seite nirgends vorkommt.
• Die Beschriftung sagt, was passiert: „In den Warenkorb“.
• Nach dem Klick eine sichtbare Rückmeldung: Mini-Warenkorb öffnet sich oder eine Bestätigung mit „Zur Kasse“ und „Weiter einkaufen“. Ein Button, der nach dem Klick nichts anzeigt, wird ein zweites Mal gedrückt – und plötzlich liegen zwei Stück im Korb.
• Express-Zahlarten (Apple Pay, Google Pay, Shop Pay, PayPal) direkt unter dem Button, wenn dein System sie anbietet.
• Auf dem Handy bleibt der Button beim Scrollen als Leiste am unteren Rand sichtbar. Das ist die wirksamste einzelne Änderung an mobilen Produktseiten, die sich mit wenig Aufwand umsetzen lässt.

7. Versand und Rückgabe in einem Satz

Direkt unter dem Button: „Versand 4,90 €, kostenlos ab 60 €. 30 Tage Rückgabe.“ Mehr nicht. Die Details stehen verlinkt auf der Versandseite. Wer diesen Satz weglässt, verlagert die Frage in den Warenkorb – und dort bricht ein Teil ab. Wie du Versandkosten und Lieferzeit im ganzen Shop kommunizierst, steht im Artikel Versandkosten kommunizieren.

8. Beschreibung

Nutzen vor Daten, konkrete Situationen statt Adjektive, Absätze und Zwischenüberschriften statt Textblock. Bei längeren Texten sind Tabs oder Akkordeons in Ordnung, aber der erste Absatz bleibt immer offen sichtbar; versteckter Text wird seltener gelesen. Vorlage und Beispiele stehen im oben verlinkten Artikel zu den Produktbeschreibungen.

9. Technische Daten

Als Tabelle, nicht als Fließtext: Maße, Gewicht, Material, Lieferumfang, Kompatibilität, Pflege. Diese Tabelle ist die Stelle, auf die Rückfragen und Retouren zurückgehen. Wenn dein Kundenservice dieselbe Frage dreimal bekommt, gehört die Antwort hierher.

10. Bewertungen und Kundenfragen

Bewertungen gehören auf die Produktseite selbst, mit dem Sternedurchschnitt oben beim Titel und den vollständigen Texten weiter unten. Kritische Bewertungen nicht filtern – sie machen die positiven glaubwürdig und ein Filtern nach Sternen verstößt gegen Googles Richtlinien. Fragen und Antworten von Kunden sind der zweitwichtigste Vertrauensblock und liefern Formulierungen, nach denen Menschen tatsächlich suchen. Die technische Einbindung und die Google-Regeln dazu stehen im Artikel Kundenbewertungen auf Produktseiten.

11. Zubehör und Alternativen

Passendes Zubehör hebt den Bestellwert; Alternativen halten Besucher im Shop, wenn das Produkt nicht passt. Beides steht unter der Beschreibung, nicht neben dem Kaufbutton, wo es von der Entscheidung ablenkt.

Was Google von der Produktseite sieht

Preis, Verfügbarkeit, Bewertungen und Bilder liest Google nicht nur aus dem sichtbaren HTML, sondern auch aus dem Produkt-Markup. Stimmen Markup und Seite überein, können Preis und Sterne im Suchergebnis erscheinen. Wie du das prüfst und einbaust, steht im Artikel zu strukturierten Daten für Produkte.

Die mobile Reihenfolge

Auf dem Handy siehst du im ersten Bildschirm nur ein Bild und vielleicht den Titel. Deshalb gilt mobil eine strengere Reihenfolge:

1. Galerie mit Wischen und Bildzähler („2/7“)
2. Titel, Sterne, Preis dicht untereinander
3. Varianten
4. Verfügbarkeit
5. Kaufbutton, danach als Leiste fixiert
6. Versand-Satz
7. Alles Weitere als Akkordeon: Beschreibung offen, Daten, Bewertungen, Fragen eingeklappt

Prüfe die Seite auf einem echten Handy: Wie oft musst du wischen, bis du den Preis siehst? Mehr als einmal ist zu viel.

Checkliste Produktseite

Oberer Bereich

• Mindestens vier Bilder, davon eines mit Maßstab
• Zoom funktioniert per Antippen
• Variantenwechsel ändert Bild und Preis
• Titel nennt Produktart, Zielgruppe, Hauptmerkmal
• Sterne und Bewertungsanzahl beim Titel
• Preis groß, mit Steuer- und Versandhinweis, Grundpreis wo nötig
• Ausverkaufte Varianten sichtbar, aber markiert
• Verfügbarkeit mit konkreter Lieferzeit
• Kaufbutton in Kontrastfarbe, mit Rückmeldung nach dem Klick
• Versand und Rückgabe in einem Satz unter dem Button

Unterer Bereich

• Beschreibung beginnt mit Nutzen, erster Absatz offen sichtbar
• Technische Daten als Tabelle
• Bewertungen vollständig, ungefiltert, mit Datum
• Kundenfragen oder FAQ zum Produkt
• Zubehör und Alternativen unter der Beschreibung

Technik

• Erstes Bild ohne Lazy Loading, komprimiert
• Fixierter Kaufbutton auf dem Handy
• Produkt-Markup stimmt mit Preis und Verfügbarkeit überein
• Keine Pop-ups in den ersten Sekunden

Wirkung messen

Miss vor dem Umbau die Rate aus Warenkorb-Hinzufügungen geteilt durch Artikelaufrufe für das betroffene Produkt oder die Produktgruppe. Ändere die Seite, warte zwei bis vier Wochen und miss dieselbe Rate im gleichen Zeitraumtyp.

Beispiel: Vorher 1.200 Aufrufe und 48 Warenkorb-Hinzufügungen, also 4,0 %. Nachher 1.150 Aufrufe und 69 Hinzufügungen, also 6,0 %. Das ist ein Ergebnis, mit dem du arbeiten kannst – solange du in der Zeit nicht gleichzeitig Preis, Werbung und Bilder verändert hast.

Bei kleinen Shops ist die Menge je Produkt oft zu gering für eine sichere Aussage. Dann fasst du Produkte einer Kategorie zusammen und baust den Aufbau als Vorlage im Theme um, statt jede Seite einzeln zu bearbeiten. Ein besserer Aufbau wirkt auf alle Seiten, die diese Vorlage nutzen – und das ist am Ende der eigentliche Hebel: nicht die eine perfekte Produktseite, sondern eine Vorlage, die jedem Produkt die richtige Reihenfolge gibt.