Der Aufbau einer Produktseite im Onlineshop mit bearbeitbaren Live-Layouts, einer Checkliste zur Selbstprüfung und Product-Strukturdaten, die Googles aktuelle Anforderungen erfüllen.
Eine Produktseite muss vor dem Kaufbutton drei Fragen beantworten: Was ist es, passt es zu mir, und was passiert nach der Zahlung? Platziere auf dem Desktop klare Fotos, Name, Preis und Optionen im sichtbaren Bereich, darunter Lieferung, Rückgabe und Details, und zeichne Preis und Verfügbarkeit mit Product-Strukturdaten aus.
Aufbau einer Produktseite, von oben nach unten
Teil
Aufgabe
Häufiger Fehler
Galerie
Zeigt den Artikel aus jedem Winkel, im Einsatz und im Größenvergleich
Nur ein einziges Studiofoto
Name und Preis
Bestätigt, dass es der richtige Artikel zu bekannten Kosten ist
Preis erst im Checkout sichtbar
Optionen
Größe, Farbe, Menge mit klarem Lagerstatus
Ausverkauft erst nach der Auswahl erkennbar
In den Warenkorb
Die eine Hauptaktion
Konkurrierende Buttons mit gleichem Gewicht
Lieferung und Rückgabe
Nimmt die Sorge nach dem Kauf
Richtlinie nur im Footer
Details und Daten
Materialien, Maße, Pflege
Textwand ohne Überschriften
Fragen
Antworten auf das, was die Entscheidung blockiert
Fehlt komplett
Statt Screenshots anderer Shops baut dieser Leitfaden Teil für Teil eine Produktseite für ein erfundenes Keramikstudio in reinem HTML und CSS. Nutze die Checkliste, um deine eigene Seite zu bewerten, und kopiere die Strukturdaten, die Googles aktuellen Regeln entsprechen.
Bewerte deine aktuelle Produktseite mit der Checkliste und sieh, welche Teile fehlen.
Öffne die Live-Layoutbeispiele und bearbeite sie mit deinen eigenen Produktdaten.
Kopiere das Product-JSON-LD und fülle es mit demselben Preis und Lagerstand, den die Seite zeigt.
Teste das Markup vor der Veröffentlichung im Google Rich Results Test.
Schreib das Lieferdatum oder den Lieferzeitraum neben den Button, nicht nur die Kosten. Menschen planen danach, wann etwas ankommt.
Zeige den Lagerstatus bei jeder Option schon vor der Auswahl, damit niemand eine ausverkaufte Größe wählt.
Nenne echte Maße und zeige ein Foto mit etwas Vertrautem als Größenvergleich, etwa einer Hand oder einer Tasse.
Halte die Button-Beschriftung konkret und überall gleich, etwa In den Warenkorb.
Strukturdaten müssen zur Seite passen. Ein anderer Preis im Markup als auf dem Bildschirm ist für Google ein Grund, es zu ignorieren.
Häufige Fragen
Was gehört auf einer Produktseite in den sichtbaren Bereich?
Auf dem Desktop: das Hauptfoto, der Produktname, der Preis, die Optionsauswahl und der Warenkorb-Button. Auf dem Smartphone füllt das Foto meist den ersten Bildschirm, also sorge dafür, dass Name und Preis direkt danach folgen und der Button kurz dahinter.
Welche Strukturdaten braucht eine Produktseite?
Für Seiten, auf denen man kaufen kann, verlangt Googles Dokumentation zu Händlereinträgen Product mit name, image und offers sowie ein Offer mit einem Preis über null und einer priceCurrency. Verfügbarkeit, Versanddetails, Rückgaberichtlinie, Marke und GTIN werden empfohlen.
Was ist der Unterschied zwischen Produkt-Snippets und Händlereinträgen?
Produkt-Snippets sind für Seiten gedacht, auf denen man nicht direkt kaufen kann, etwa Rezensionen, und brauchen einen Namen plus review, aggregateRating oder offers. Händlereinträge sind für Seiten, die das Produkt verkaufen, und brauchen Preis und Währung.
Sollte ich Bewertungen auf Produktseiten zeigen?
Wenn du echte hast, ja, in der Nähe des Preises oder unter den Details. Erfinde niemals Bewertungen oder Ratings, und füge aggregateRating-Markup nur hinzu, wenn die Bewertung auf der Seite angezeigt wird und von echten Kunden stammt.
Fotos verkaufen den Großteil
Plane die Galerie als Set: Vorderseite, Rück- oder Seitenansicht, Nahaufnahme des Materials, der Artikel im Einsatz und ein Bild mit etwas als Größenvergleich. Jedes Bild braucht einen Alt-Text, der beschreibt, was diese Ansicht zeigt.
Reserviere den Platz der Galerie mit width und height oder aspect-ratio, damit die Seite beim Laden der Bilder nicht springt.
Die Kaufbox
Gruppiere Preis, Optionen, Menge und Button zusammen, mit der Zusammenfassung zu Lieferung und Rückgabe direkt darunter. Dieser eine Block sollte die meisten Fragen ohne Scrollen beantworten.
Deaktivierte Optionen brauchen mehr als grauen Text. Ergänze im Label das Wort Ausverkauft, damit der Status für alle klar ist, auch für Nutzer von Screenreadern.
Details, die Retouren senken
Maße, Materialien, Pflegehinweise und Lieferumfang gehören in überfliegbare Abschnitte mit Überschriften. Ein kurzer Hinweis zu Größe oder Passform verhindert viele Fehlbestellungen.
Beantworte die zwei oder drei häufigsten Kundenfragen direkt auf der Seite und verlinke für den Rest auf die vollständigen FAQ.
Layoutbeispiele für Produktseiten
Zweispaltige Produktseite mit Galerie und Kaufbox
Auf breiten Bildschirmen Galerie links, Kaufbox rechts, auf Smartphones untereinander. Die ausverkaufte Größe sagt das in Worten, nicht nur in Grau.
Details in beschrifteten Abschnitten
Kurze Abschnitte mit Überschriften lassen sich leichter überfliegen als eine lange Beschreibung. Der erste ist geöffnet, weil er die häufigste Frage beantwortet.
Product-Strukturdaten für eine Verkaufsseite
name, image und offers mit price und priceCurrency sind die Pflichtfelder für Händlereinträge, availability und der Rest werden empfohlen. Die Werte müssen zur Seite passen.
Mindestens vier Fotos, davon eines im Einsatz und eines mit Größenvergleich
Jedes Bild hat einen Alt-Text, der diese Ansicht beschreibt
Preis neben dem Produktnamen sichtbar
Lagerstatus bei jeder Option vor der Auswahl sichtbar
Ein klar primärer Warenkorb-Button
Lieferkosten und Lieferzeit in der Nähe des Buttons
Rückgaberichtlinie in der Nähe des Buttons zusammengefasst
Maße, Materialien und Pflege in beschrifteten Abschnitten
Häufigste Fragen auf der Seite beantwortet
Funktioniert bei 375 px Breite ohne seitliches Scrollen
Product-Strukturdaten passen zu sichtbarem Preis und Lagerstand
Nur echte Bewertungen, falls welche angezeigt werden
Checkliste für Produktseiten
Hake ab, was deine Produktseite bereits erfüllt. Der Score zeigt, was noch zu beheben ist, nichts wird gespeichert oder irgendwohin gesendet.