Warum Ihre Links in WhatsApp und sozialen Netzwerken hässlich aussehen und wie Sie das beheben

Ein Kunde schickt einem Freund per WhatsApp den Link zu einem Produkt. Statt einer Karte mit Foto und Namen erscheint Ihr verpixeltes Logo, ein in der Mitte abgeschnittenes Bannerbild oder nur die blaue Adresse. Das ist die Mundpropaganda Ihres Shops, und sie kommt mit dem schlechtesten Gesicht an.

Schuld ist fast nie WhatsApp. Die Seite sagt ihm nicht, welches Bild es zeigen soll, oder sie sagt es falsch.

Wie die Netzwerke entscheiden, was sie zeigen

Wenn jemand einen Link einfügt, lädt die App die Seite herunter und sucht im <head> nach bestimmten Tags: denen des Open-Graph-Protokolls, das Facebook geschaffen hat und das heute fast alle lesen (WhatsApp, Facebook, LinkedIn, Telegram, Slack, Discord, Pinterest …). X/Twitter liest zusätzlich seine eigenen twitter:-Tags und greift auf die von Open Graph zurück, wenn es sie nicht findet.

Die grundlegenden sind:

• og:title: der Titel der Karte.
• og:description: der kurze Text darunter.
• og:image: das Bild. Mit absoluter URL und HTTPS.
• og:url: die kanonische Adresse der Seite.
• og:type: der Typ (für Produkte wird oft product oder website verwendet).

Empfehlenswert: og:image:width und og:image:height (helfen, dass das Bild gleich beim ersten Mal erscheint), og:image:alt und twitter:card mit dem Wert summary_large_image für die große Karte.

Die Größe, die überall funktioniert

Das Referenzmaß ist 1200 × 630 Pixel (Seitenverhältnis etwa 1,91:1). Das empfiehlt Facebook für die große Vorschau, und es passt auch bei den übrigen am besten. Was meist schiefgeht:

• Quadratische Produktfotos: Das Netzwerk schneidet sie oben und unten ab oder zeigt sie als Miniatur an der Seite.
• Zu kleine Bilder: Unterhalb einer bestimmten Größe zeigen die Netzwerke eine Miniatur oder gar nichts.
• Zu schwere Bilder: Vor allem WhatsApp zeigt sehr große Bilder unter Umständen nicht an. Sie leicht zu halten (unter einigen Hundert KB) vermeidet Probleme.
• Text, der an den Rändern klebt: Manche Apps schneiden die Ränder ab. Lassen Sie rundherum Luft.

Warum PrestaShop das nicht immer löst

• Viele Themes geben keine Open-Graph-Tags aus, oder nur die der Startseite.
• Manche geben og:image mit dem Produktbild in seiner quadratischen Größe aus.
• Mehrere Module geben ihre eigenen Tags aus, die am Ende doppelt vorhanden sind, mit unterschiedlichen Bildern. Das Netzwerk nimmt das erste, das es findet, und das ist nicht immer das richtige.
• Die Tags stehen am Ende des <head>, hinter viel Code. Manche Apps lesen nur den Anfang der Seite.
• Kategorien und CMS-Seiten haben kein eigenes Bild.

Der Cache jedes Netzwerks: der Grund, warum sich „nichts ändert“

Die Netzwerke speichern die Vorschau, wenn jemand einen Link zum ersten Mal teilt, und verwenden sie eine Zeit lang wieder. Deshalb korrigieren Sie die Tags, und die Karte erscheint trotzdem falsch. So erzwingen Sie die Aktualisierung:

• Facebook: Der Sharing Debugger zeigt, was er liest, und erlaubt, die Seite erneut abzurufen.
• LinkedIn: Der Post Inspector macht dasselbe.
• WhatsApp: hat kein öffentliches Werkzeug. Praktisch ist, die URL mit einem angehängten Parameter (zum Beispiel ?v=2) zu testen, um zu prüfen, ob die neue Version stimmt; der Link ohne Parameter aktualisiert sich mit der Zeit.
• Telegram: Sein Bot @WebpageBot erlaubt, die Aktualisierung der Vorschau einer URL anzufordern.

Mehr als das Foto: ein Bild, das verkauft

Eine Vorschau muss nicht einfach das Produktfoto sein. Ein zusammengesetztes Bild mit Foto, Name, Preis und gegebenenfalls Rabatt vermittelt auf einen Blick, was der Freund wissen muss, um zu klicken. Voraussetzung ist, dass es aktuell ist: Ein Bild mit einem alten Preis erzeugt Misstrauen.

Checkliste

1. Jede Produktseite, Kategorie und CMS-Seite hat ihr og:image, mit absoluter URL und HTTPS.
2. Das Bild misst 1200 × 630 und ist leicht.
3. Es gibt nur einen Satz Open-Graph-Tags pro Seite.
4. Die Tags stehen am Anfang des <head>.
5. og:title und og:description erscheinen in der Sprache der Seite.
6. Sie haben drei URLs durch den Facebook-Debugger und den LinkedIn-Inspector laufen lassen.
7. Sie haben das Teilen per WhatsApp vom Smartphone aus getestet.

Die Umsetzung in PrestaShop

RKR Dynamic Image erzeugt auf Ihrem Server, ohne externe Dienste, ein Bild von 1200 × 630 für jedes Produkt, jede Kategorie und jede CMS-Seite mit Bild, mit Foto, Name, Preis im Format Ihres Shops, einem Rabattabzeichen, wenn es einen Rabatt gibt (einschließlich spezifischer Preise), und den Bewertungssternen, wenn Sie das Produktkommentar-Modul von PrestaShop nutzen. Das Bild aktualisiert sich automatisch, wenn sich ein Preis ändert, wird pro Sprache und pro Shop erzeugt und lässt sich mit einem visuellen Editor mit 23 Themes gestalten. Das Modul gibt die Tags am Anfang des <head> aus, damit WhatsApp sie liest. Es funktioniert mit PrestaShop 1.7.8 bis 9.x.