Link Vorschau & Open Graph Test

Was ist eine Link Vorschau und was prüft dieses Tool?

Die Link Vorschau ist die Karte aus Titel, Beschreibung und Bild, die erscheint, sobald Sie eine Adresse in WhatsApp, Facebook, LinkedIn oder X einfügen. Zunächst lädt die Plattform Ihre Seite mit einem eigenen Crawler und liest die Open Graph Tags im Head. Fehlt ein Tag oder erreicht der Crawler die Seite nicht, bleibt die Karte ohne Bild, trägt den falschen Titel oder fehlt ganz.

Dieses Tool erledigt daher für eine Adresse vier Aufgaben zugleich.

• Vorschau: Es zeichnet Karten für acht Plattformen nah am echten Layout, ohne Markenlogos.
• Prüfung: Über 25 Checks decken Tags, Vorschaubild, Crawler Zugang und robots.txt ab.
• Bearbeitung: Sie ändern Titel, Beschreibung und Bild und sehen jede Karte sofort neu.
• Korrektur: Sie erhalten einen fertigen Block mit den Werten Ihrer Seite und die Schritte zum Leeren der Caches.

In meiner SEO Beratung mache ich diesen Test, bevor eine neue Seite online geht. Denn landet ein Kampagnenlink einmal mit falschem Bild in Gruppenchats, holen Sie ihn nicht mehr zurück.

Aus welchen Tags entsteht die Link Vorschau?

Die Grundlage bildet das Open Graph Protokoll. Es verlangt auf jeder Seite vier Eigenschaften: og:title, og:type, og:image und og:url. In der Praxis formen diese Tags die Karte.

• Titel (og:title): Meta empfiehlt, ihn ohne Markenzusatz wie den Namen der Website zu schreiben.
• Beschreibung (og:description): Meta rät zu einer kurzen Zusammenfassung in 2 bis 4 Sätzen.
• Bild (og:image): Nutzen Sie eine absolute URL, die mit https:// beginnt.
• Adresse (og:url): Facebook zählt Likes und geteilte Links unter dieser URL. Halten Sie sie deshalb identisch mit dem Canonical.
• Ergänzungen (og:site_name, og:type, og:locale): Name der Website, Inhaltstyp und Sprache. Ohne og:locale gilt en_US.

X schaut zuerst auf die eigenen Tags: twitter:card, twitter:title, twitter:description und twitter:image. Fehlen sie, greift X auf die Open Graph Werte zurück. Einen eigenen Titel für X brauchen Sie also nicht. Allerdings hat twitter:card kein Gegenstück bei Open Graph; ohne dieses Tag zeigt X höchstens eine kleine Zusammenfassung.

Doppelte Tags sorgen erstaunlich oft für Ärger. Open Graph nimmt bei Konflikten das erste Tag, X dagegen die letzte twitter:card. Schreiben Theme und SEO Plugin beide Tags, sieht jede Plattform womöglich eine andere Karte. Mit dem Meta Tag Generator erzeugen Sie alle Tags aus einer Quelle.

Wie groß sollte das Vorschaubild sein?

Für ein Bild, das überall funktioniert, nehme ich ein JPG oder PNG mit 1200×630 Pixeln im Verhältnis 1,91:1. Das erfüllt die Empfehlung von Meta und liegt über dem Minimum von LinkedIn mit 1200×627. Die große Karte bei X nutzt 2:1, daher beschneidet X die Ränder kaum.

Die offiziellen Zahlen im Überblick:

• Meta lehnt Bilder unter 200×200 ab und zeigt alles unter 600×315 klein. Dateien dürfen bis 8 MB groß sein.
• LinkedIn erlaubt bis 5 MB. Bilder schmaler als 401 Pixel erscheinen als Miniatur.
• X verlangt weniger als 5 MB und unterstützt JPG, PNG, WEBP und GIF, aber kein SVG. Bei animierten GIFs erscheint nur das erste Einzelbild.

Ergänzen Sie zum Bild außerdem og:image:width und og:image:height. Laut Meta kann der Crawler das Bild mit diesen beiden Tags sofort darstellen. Ohne sie fehlt das Bild beim ersten Teilen häufig. Das Tool vergleicht die Angaben dann mit der echten Datei und meldet Abweichungen.

Halten Sie Schrift und Logo in der Bildmitte, denn quadratische und hohe Formate beschneiden die Ränder. Um ein Bild auf 1200×630 zu bringen, nutzen Sie das Tool zum Bilder verkleinern; die Datei verlässt Ihren Browser nicht.

Warum zeigt WhatsApp keine Link Vorschau?

WhatsApp nennt für die Vorschau weder eine offizielle Bildgröße noch eine Zeichengrenze. Deshalb prüfe ich die typischen Ursachen in dieser Reihenfolge.

1. Fehlendes oder unerreichbares og:image. Liefert das Bild 404 oder blockiert eine Firewall den Abruf, zeigt die Karte folglich nur Text.
2. Langsame Seite oder Fehler. Die Vorschau entsteht in einem kurzen Zeitfenster vor dem Senden. Antwortet die Seite zu spät, bleibt der Link womöglich reiner Text.
3. Nicht der erste Link. Laut der Dokumentation der WhatsApp Cloud API erhält nur die erste URL einer Nachricht eine Vorschau.
4. Vorschau abgeschaltet. Unter Einstellungen, Datenschutz, Erweitert gibt es eine Option, die Linkvorschauen abschaltet. Ist sie aktiv, tragen Ihre Nachrichten keine Karte; die Einstellung des Empfängers ändert daran nichts.

Ein großes Querformat ergibt eine breite Karte, ein kleines oder fast quadratisches Bild dagegen eine Miniatur. Die WhatsApp Vorschau in diesem Tool bildet dieses Verhalten nach. Sie brauchen einen Link, der mit einem Tipp einen Chat öffnet? Der WhatsApp Link Generator fügt Ihre Seitenadresse in die Nachricht ein. Die Vorschau stammt dann aus den Tags dieser Seite.

Erreichen die Crawler sozialer Netzwerke Ihre Seite?

Das ist das teuerste Problem. Die Seite sieht im Browser perfekt aus, trotzdem geht jeder geteilte Link ohne Vorschau hinaus. Deshalb fragt das Tool die Seite zweimal an: zuerst mit eigener Kennung, dann als facebookexternalhit. Ein 403 oder 5xx bei der zweiten Anfrage deutet auf eine Firewall, einen Bot Schutz oder eine CDN Regel hin, die Social Crawler sperrt.

Ein ehrlicher Hinweis: Manche Sicherheitssysteme akzeptieren diese Kennung nur von echten Meta Adressen. Dann sieht das Tool eine Sperre, echte geteilte Links funktionieren aber. Prüfen Sie die Adresse im Zweifel zusätzlich im Sharing Debugger von Meta.

Außerdem prüft das Tool drei weitere Punkte.

• Robots Regeln: Laut der Dokumentation von X hält sich Twitterbot an die robots.txt. Eine gesperrte Seite bekommt keine Karte, ein gesperrtes Bild keine Miniatur.
• Das erste MB: Meta verlangt die Open Graph Eigenschaften innerhalb des ersten MB des HTML. Lange Inline Skripte können Tags hinter diese Grenze schieben.
• Tags außerhalb des Head: Crawler übersehen Tags im Body womöglich.

Das Tool führt kein JavaScript aus. Setzt eine Website ihre Tags erst per JavaScript, sehen Social Crawler oft ebenfalls einen leeren Head. Schreiben Sie die Tags also in das HTML, das Ihr Server ausliefert. Für die technische Gesundheit der ganzen Seite hilft zudem der SEO Check.

Wie aktualisieren Sie eine zwischengespeicherte Link Vorschau?

Sie haben die Tags korrigiert, und WhatsApp zeigt trotzdem das alte Bild? Dann steckt es vermutlich im Cache. Plattformen laden Ihre Seite nicht bei jedem Teilen neu, sondern behalten das zuerst Gelesene eine Weile. Bereits gesendete Nachrichten ändern sich nie; eine Aktualisierung wirkt nur auf neue Links.

• Facebook und Messenger: Geben Sie die URL im Sharing Debugger ein und lesen Sie die Seite neu ein. Meta speichert Bilder nach ihrer URL, geben Sie einem ersetzten Bild also einen neuen Dateinamen.
• LinkedIn: Der Post Inspector liest die URL erneut und aktualisiert die Vorschau für neue Beiträge.
• X: Laut Dokumentation bleiben Kartendaten nach dem Posten 7 Tage im Cache. Wer nicht warten will, hängt einen harmlosen Parameter wie ?v=2 an und teilt die neue Adresse.
• WhatsApp: Ein offizielles Werkzeug gibt es nicht; derselbe Parameter Trick hilft bei neuen Nachrichten.
• Telegram: Schicken Sie die URL an das Telegram Konto @WebpageBot, dann entsteht die Vorschau neu.

Der Reiter Code & Cache liefert diese Links fertig zum Klicken und kopiert die Adresse mit Parameter in einem Schritt. Bei Facebook verlassen Sie sich allerdings nicht auf den Parameter, denn Facebook zählt geteilte Links unter der og:url.

Was korrigieren Sie nach der Prüfung der Link Vorschau zuerst?

Auch eine technisch perfekte Karte kann Klicks verfehlen. Wer durch einen Feed scrollt, entscheidet anhand des Bildes und einer einzigen Zeile. Das unterscheidet sich vom Suchergebnis, deshalb behandle ich den Text der Karte getrennt und gehe in dieser Reihenfolge vor.

• Zuerst der Zugang. Erreichen Crawler die Seite nicht, bringt keine andere Korrektur etwas.
• Danach das Bild. Ideal sind 1200×630 Pixel, unter 5 MB, als JPG oder PNG, mit Tags für Breite und Höhe.
• Dann der Titel. Schreiben Sie og:title als Versprechen mit 40 bis 60 Zeichen. So stört auch die Grenze von 70 Zeichen bei X nie.
• Anschließend die Beschreibung. Stellen Sie die Frage in den ersten Satz und den Nutzen in den zweiten. LinkedIn blendet die Beschreibung oft aus, daher trägt der Titel die Botschaft.
• Schließlich eine Karte pro Seite. Dasselbe Logobild auf jeder Seite lässt alle geteilten Links gleich aussehen.

Für Suchergebnisse gelten eigene Regeln, die ich im Ratgeber Meta Title und Meta Description schreiben erkläre. Wie aus geteilten Links echte Besuche werden, lesen Sie im Beitrag über Website Traffic aus Social Media. Ihre Darstellung bei Google testen Sie in der SERP Vorschau.