Sie teilen Ihre neue Seite, und die Vorschau zeigt einen alten Titel, ein abgeschnittenes Logo oder einen grauen Kasten. Menschen beurteilen einen Link nach dieser Karte, bevor sie klicken. Eine kaputte Vorschau kostet also bei jedem Teilen Besuche.
Vorschauen folgen ein paar einfachen Regeln. Sobald die Seite den Apps liefert, wonach sie suchen, bleibt das Problem meist dauerhaft gelöst.
Woher die Vorschau kommt
Wenn jemand einen Link einfügt, ruft der Crawler der App Ihre Seite ab und liest einige Tags im HTML-Kopf. Der wichtigste Standard ist dasOpen-Graph-Protokoll, das og:title, og:type, og:image und og:url festlegt. Die meisten Apps lesen außerdem og:description, und X liest seine eigenen twitter:card-Tags und greift für den Rest auf Open Graph zurück.
Der Crawler scrollt, klickt und wartet nicht wie ein Mensch. Er liest, was der Server zuerst schickt. Was JavaScript später hinzufügt, sieht er oft nicht.
Warum es schiefgeht
Die Tags fehlen, also rät die App anhand von Text und Bildern, die sie findet.
Die Tags werden erst nach dem Laden per JavaScript eingefügt, also sieht der Crawler sie nie.
og:image nutzt einen relativen Pfad oder eine http-Adresse statt einer vollständigen https-URL.
Das Bild ist zu groß, zu klein, hat das falsche Format oder wird von einer Firewall, einem Bot-Schutz oder einer Anmeldung blockiert.
Alle Seiten teilen denselben allgemeinen Titel und dasselbe Bild, also sieht jeder Link gleich aus.
Die App hat eine alte Version der Seite zwischengespeichert und zeigt sie weiter an.
Ein Bild, das überall funktioniert
Nutzen Sie ein Querformat mit 1200 × 630 Pixeln, als JPEG oder PNG gespeichert und nicht unnötig groß. Halten Sie wichtigen Text und Logos vom Rand fern, weil manche Apps auf ein Quadrat oder ein schmaleres Format zuschneiden. Liefern Sie es über eine vollständige https-URL aus, die jeder ohne Anmeldung öffnen kann.
Ergänzen Sie außerdem og:image:width, og:image:height und og:image:alt. Damit können Apps die Karte anordnen, bevor das Bild geladen ist, und das Bild Menschen mit Screenreadern beschreiben.
Eine zwischengespeicherte Vorschau aktualisieren
Apps speichern Vorschauen, manchmal tagelang. Nachdem Sie die Tags korrigiert haben, müssen Sie die Apps eventuell bitten, die Seite neu zu lesen. Der Sharing Debugger von Facebook und der Post Inspector von LinkedIn haben beide eine Schaltfläche, um eine URL erneut abzurufen. Bei anderen Apps erzeugt ein harmloser Zusatz am Link, etwa ?v=2, eine neue Vorschau.
Testen, bevor Sie teilen
Mein kostenloserLinkvorschau-Test ruft Ihre Seite so ab wie die Crawler, liest die Open-Graph- und X-Card-Tags, lädt die Bilder herunter, um zu prüfen, ob sie laden, und misst Größe und Dateigewicht. Danach zeigt er, wie die Karte voraussichtlich auf X, LinkedIn, Facebook, WhatsApp, Slack und Discord aussieht, zusammen mit einer Liste von Korrekturen.
Jede App hat eigene Regeln und ändert sie von Zeit zu Zeit. Sehen Sie die Vorschauen daher als genaue Orientierung, nicht als pixelgenaue Kopie.
Machen Sie es automatisch
Bei einer Website mit vielen Seiten sollten Vorschauen aus dem Inhalt selbst entstehen: Produktname, Artikeltitel oder Veranstaltungsdatum, mit einem Bild, das für jede Seite erzeugt oder ausgewählt wird. Frameworks wie Next.js können diese Tags und Bilder auf dem Server erzeugen. Wenn Ihre Seiten alle dieselbe allgemeine Karte zeigen,erzählen Sie mir von der Website, und ich richte das so ein, dass jede neue Seite ohne Zusatzaufwand eine ordentliche Vorschau bekommt.