Ihr Produkt per Link, in Ihren Farben
Das Wichtigste in Kürze
- Auf der Startseite genügt ein Link zu einer Produkt- oder Objektseite: Daraus werden drei Grafiken mit dem eigenen Produkt, dem eigenen Preis und der Farbe der eigenen Website, ohne Konto.
- Name, Marke, Preis und Foto kommen aus den strukturierten Daten, die fast jedes Shopsystem für Suchmaschinen in die Produktseite schreibt (schema.org Product), sonst aus den Open-Graph-Preisangaben. Kein Modell rät, welche Zahl der Preis ist.
- Die Farbe kommt von der Website selbst, ebenfalls ohne Modell.
- Ein Produkt aus einem Link startet in der Anordnung „Produkt in der Mitte“: Überschrift oben, Foto eingerückt, Preis, Fakten und Knopf darunter. Text über einem formatfüllenden Produktfoto verdeckte das Produkt.
- Liest ListingShot eine Anordnung von einem Beispielbild ab, das ein Foto zeigt, wird daraus nie „kein Foto“. Ohne Foto setzt ein Satz eine Grafik nur, wenn er es ausdrücklich sagt.
- Große Portale und manche Shops lassen sich nicht auslesen. Dann bleiben die Felder darunter frei zum Eintragen.
Eine Demo mit unserem Sneaker beweist, dass ListingShot einen Sneaker setzen kann. Was ein Shop wissen will, ist, wie sein Produkt aussieht, in seiner Farbe. Seit dem 28.09. genügt dafür auf der Startseite ein Link: die Adresse einer Produktseite einfügen, „Zeigen“ drücken, und drei Formate entstehen mit dem eigenen Produkt, dem eigenen Preis und der Farbe der eigenen Website. Ohne Konto, ohne etwas abzutippen.
Dieser Beitrag erzählt, woher die Angaben kommen, und von drei Fehlern, die wir auf dem Weg dahin gefunden haben. Jeder hätte das erste Bild verdorben, das ein Besucher von seinem eigenen Produkt sieht.
Was eine Produktseite schon verrät
Eine Produktseite zeigt viele Zahlen nebeneinander: den Preis, den alten Preis, die Monatsrate, die Grenze für kostenlosen Versand. Welche davon der Preis ist, sieht ein Mensch sofort. Ein Programm, das den sichtbaren Text liest, muss raten.
Muss es aber nicht. Fast jedes Shopsystem schreibt das Produkt zusätzlich als strukturierte Daten in die Seite, für Suchmaschinen, die daraus Preis und Verfügbarkeit in ihren Ergebnissen zeigen. Shopify, Shopware und WooCommerce tun das von sich aus. Dort steht ausdrücklich, was was ist:
{
"@type": "Product",
"name": "Halden Low — Off-White",
"brand": { "@type": "Brand", "name": "Nordwerk" },
"image": "https://nordwerk.example/halden-low.jpg",
"offers": { "@type": "Offer", "price": "179.00", "priceCurrency": "EUR" }
}Diese Angaben liest ListingShot jetzt zuerst: Name, Marke, Bild und Preis,
auch wenn sie in einem @graph stecken oder der Preis als Preisspanne über
mehrere Varianten angegeben ist. Fehlen sie, kommen die Open-Graph-
Preisangaben dran, die manche Shops stattdessen schreiben. Aus 179.00 und
EUR wird „179,00 €“, so, wie der Preis auf einer deutschen Grafik steht. Die
Marke kommt in die Zeile über dem Titel.
Der erste Fehler steckte genau hier. Das Einlesen per Adresse war für Objektseiten von Maklern gebaut, und es suchte nach einem Preis, wie ihn eine Immobilie hat: mit mindestens vier Stellen. „179,00 €“ hat drei. Auf Produktseiten fand es darum keinen Preis, auf keiner. Mit den strukturierten Daten muss es gar nicht mehr suchen.
Der zweite Fehler war das Foto. Die strukturierten Daten nennen oft ein Vorschaubild. In einem der drei Shops, an denen wir getestet haben, war es 100 Pixel breit. ListingShot nimmt jetzt zuerst das Bild, das ein Shop zum Teilen in sozialen Netzen vorsieht, und fragt Shopify-Bilder in voller Größe an.
Die Farbe kommt von der Website selbst, ebenfalls ohne Modell. Auf der Startseite ist dieses Ablesen ohne Konto offen, mit einer Grenze gegen Missbrauch.
Das Produkt in der Mitte
Dann kam das erste Bild, und der Schuh war halb verdeckt.
Die Vorlagen legen den Text über den unteren Teil des Fotos. Bei einer Immobilie ist das richtig: Unten im Bild ist Rasen, Pflaster oder Fassade, und das Haus steht darüber. Ein Shop fotografiert sein Produkt dagegen formatfüllend, und der untere Teil des Fotos ist das Produkt.
Die häufigste Anordnung einer Produktanzeige ist eine andere: Überschrift oben, Produkt in der Mitte, Preis darunter. Wir haben sie gefunden, als wir uns Anzeigen-Entwürfe angesehen haben, wie sie Shops heute mit einem Bildmodell erzeugen. Zwei von drei Produkten standen mittig zwischen Überschrift und Preis. ListingShot konnte diese Anordnung nicht. Jetzt kann es sie:
Ein Produkt aus einem Link startet in dieser Anordnung, eine Immobilie nicht. Hat der Besucher schon in einem Satz beschrieben, wie es aussehen soll, gilt sein Satz.
Ein Foto verliert sein Foto nie
Das linke Bild oben ist der Fehler, der dabei mitkam. Fehlt einer Anordnung die Form, die ein Bild hat, wählt das Modell beim Ablesen eine falsche. Bei Entwürfen mit dem Produkt in der Mitte antwortete das Ablesen mal mit einem Textband quer über dem Produkt, mal mit „kein Foto“. Die Grafik war dann ordentlich gesetzt, und das Produkt fehlte.
Seit dem 28.09. gibt es dafür zwei feste Regeln, die nicht vom Modell abhängen:
- Zeigt ein Beispielbild ein Foto, wird aus der abgelesenen Anordnung nie „kein Foto“. Notfalls wird es „Produkt in der Mitte“.
- Ein Satz setzt eine Grafik nur ohne Foto, wenn er es sagt: „ohne Foto“, „kein Bild“, „nur Text“. Ein Satz, der das Foto nicht erwähnt, lässt es stehen.
Mit denselben drei Entwürfen nachgemessen, stehen jetzt alle drei Produkte in der Mitte, und keines fehlt.
Der dritte Fehler: alles grün
Der letzte Fehler war der unscheinbarste. Sobald eine Anordnung galt, ob aus einem Link oder aus einem Satz, schickte die Startseite zusammen mit der Anordnung einen Stil mit, und der trug unsere Standardfarbe. Die Farbe der Website des Besuchers stand im Farbfeld, und jede Grafik wurde trotzdem grün. Jetzt gewinnt das Farbfeld immer.
Wo es nicht geht
Große Portale sperren das Auslesen von außen, und manche Shops zeichnen ihre Produkte nicht aus. Dann sagt die Startseite das, und die Felder darunter bleiben zum Eintragen frei. Findet sie kein Foto, bleibt das Beispielfoto stehen, und die Statuszeile sagt auch das.
Die Felder bleiben in jedem Fall änderbar. Der Link füllt sie aus, er legt nichts fest.
Häufige Fragen
Welche Links funktionieren?
Produktseiten von Shops, die ihr Produkt als schema.org Product oder mit Open-Graph-Preisangaben auszeichnen, und das tun Shopify, Shopware und WooCommerce von sich aus. Außerdem Objektseiten von Maklerwebsites. Große Portale sperren das Auslesen von außen; dort Titel und Preis von Hand eintragen.
Woher kommt die Farbe?
Von der Website, deren Link Sie einfügen: ListingShot liest ihre Markenfarbe ab, ohne Modell. Das Farbfeld darunter bleibt änderbar und gewinnt immer, auch wenn Sie danach eine Anordnung in einem Satz beschreiben.
Warum steht das Produkt in der Mitte und nicht formatfüllend?
Weil ein Shop sein Produkt formatfüllend fotografiert. Text, der über dem unteren Teil des Fotos liegt, liegt dann über dem Produkt. In der Mitte, mit der Überschrift darüber und dem Preis darunter, bleibt es ganz sichtbar. Wer eine andere Anordnung will, beschreibt sie in einem Satz.
Kann eine Grafik ganz ohne Foto entstehen?
Ja, wenn der Satz es sagt: „ohne Foto“, „kein Bild“ oder „nur Text“. Aus einem Beispielbild, das ein Foto zeigt, und aus einem Satz, der das Foto nicht erwähnt, entsteht nie eine Grafik ohne Produkt.
Weiterlesen
Warum ein Produkt nie „Zimmer“ sieht Ein Sneaker wohnte bei uns lange in Immobilienfeldern: Größen als Zimmer, Material als Wohnfläche, und einmal stand darunter ein Makler. Jetzt sind zwei Formulare eingebaut, eines für Produkte, eines für Immobilien. Was der Umweg auf dem Bild anrichtete, was sich für Shops beim Auslesen, im Import, im Bestand und in der App ändert — und was bewusst gleich bleibt. 
Warum wir keinen Editor bauen Fast jedes Werkzeug für Bildautomatisierung hat einen Vorlagen-Editor, und fast jede Beschwerde darüber ist eine Editor-Beschwerde. Wir haben keinen. Was wir stattdessen gebaut haben: eine geprüfte Beschreibung der Anordnung, die man in einem Satz sagt, aus einem Screenshot liest und für jedes Format zugleich bekommt — für einen Schuh wie für ein Exposé.