Link-Vorschau prüfen: Open Graph für WhatsApp, Facebook und LinkedIn

Woher die Link-Vorschau kommt

Beim Teilen ruft die App die Seite ab und liest einige meta-Angaben aus dem Kopfbereich, vor allem og:title, og:description und og:image. Fehlen sie, nimmt die App, was sie findet: mal den Seitentitel, mal ein beliebiges Bild, mal nur die Adresse. Der Check ruft die Seite auf ähnliche Weise einmal vom Server von bemuar.com ab und liest den ausgelieferten Quelltext dieser einen Seite, ohne JavaScript auszuführen. Im Ergebnis ist der Bereich Link-Vorschau zuerst geöffnet, die übrigen fünf Bereiche stehen zugeklappt darunter. Was die einzelnen Angaben bedeuten und wie sich die Plattformen unterscheiden, erklärt Open Graph.

Was der Check ausliest und bewertet

Gelesen werden og:title, og:description, og:image, og:url, og:site_name und twitter:card. Bewertet werden davon die ersten drei: Sind Titel, Beschreibung und Bild vorhanden, gilt die Link-Vorschau als vollständig. Fehlt eine davon, gibt es einen Hinweis, der die fehlende Angabe beim Namen nennt. og:url und og:site_name fließen nicht in die Bewertung ein, der Seitenname erscheint aber in der Vorschaukarte. Ob Titel und Text gut formuliert sind, ob das Bild zum Inhalt passt oder ob weitere Angaben wie og:type gesetzt sind, prüft der Check nicht.

Die Vorschaukarte im Ergebnis

Unter dem Befund zeigt der Check eine Karte, so ungefähr, wie ein Link beim Teilen erscheint. Oben steht og:site_name, ersatzweise die Domain, beides in Großbuchstaben. Darunter folgt der Titel aus og:title. Fehlt er, nimmt die Karte den Seitentitel, fehlt auch der, steht dort „(kein Titel)“. Für den Text gilt dasselbe mit og:description und der Meta-Description. Das Bild lädt Ihr eigener Browser direkt von Ihrer Website. Lässt es sich nicht laden, verschwindet es aus der Karte, ein deutliches Zeichen, die Bildadresse zu prüfen. Wie die Vorschau in einer bestimmten App genau aussieht, entscheidet die App selbst.

Wo die Karte großzügiger ist als manche App

Zwei Dinge macht die Karte nachsichtiger als manche Plattform. Erstens rechnet der Check eine relative Bildadresse wie /bilder/vorschau.jpg in eine vollständige um. Die Karte zeigt das Bild dann, eine App unter Umständen nicht. Sehen Sie deshalb im Quelltext nach, ob og:image mit https:// beginnt. Zweitens weicht die Karte bei fehlenden Angaben auf Seitentitel und Meta-Description aus. Nicht jede App tut das, manche zeigen dann nur die nackte Adresse. Eine gut gefüllte Karte neben einem Hinweis heißt also: Die Ersatzwerte springen ein, die eigentlichen Open-Graph-Angaben fehlen trotzdem.

og:image: was der Check am Bild nicht prüft

Der Check liest nur die Adresse des Bildes. Wie groß die Datei ist, welche Maße sie hat und ob die Abrufprogramme von Facebook oder WhatsApp sie erreichen, prüft er nicht. Gängiger Richtwert ist ein Querformat von 1200 x 630 Pixeln, wichtige Inhalte gehören in die Mitte, weil Apps unterschiedlich zuschneiden. Blockiert eine Firewall oder ein Schutz-Plugin fremde Abrufe, bleibt die Vorschau in der App leer, obwohl die Karte im Check ein Bild zeigt, denn dort lädt es Ihr eigener Browser. Ein Foto aus dem Betrieb wirkt in einem Chat meist stärker als ein Logo auf weißem Grund.

Punktzahl der Link-Vorschau

In diesem Bereich zählen nur zwei Zeilen. Die Open-Graph-Zeile ist in Ordnung oder ein Hinweis. Die Zeile zu twitter:card ist in Ordnung, wenn die Angabe vorhanden ist, sonst nur eine Info, weil X ohne sie meist auf Open Graph zurückgreift. Daraus ergeben sich wenige mögliche Werte: 100 Punkte bei vollständigen Open-Graph-Angaben, 75 bei unvollständigen Angaben mit twitter:card, 50 bei unvollständigen Angaben ohne twitter:card. Die Gewichtung ist eine einfache eigene Regel von Bemuar. Wer auf X ein großes Bild statt eines kleinen möchte, setzt twitter:card auf summary_large_image.

Titel und Text für das Teilen schreiben

Der Open-Graph-Titel darf anders lauten als der Seitentitel für Google. In einem Chat ist wenig Platz, und wer den Link bekommt, kennt den Absender meist. Ein Friseursalon schreibt besser „Haarschnitt und Farbe, Termin online buchen“ als „Willkommen“, ein Handwerksbetrieb nennt die Leistung und den nächsten Schritt für Kunden. Die Beschreibung ergänzt einen Satz, der auf dem Handy mit einem Blick verständlich ist, statt den Titel zu wiederholen. Seitentitel und Meta-Description für die Google-Suche prüft der SEO-Check, ihre Breite in Pixeln misst der Snippet-Generator.

Nach der Korrektur: neu prüfen, Plattform-Cache beachten

Der Check liest die Seite bei jeder Prüfung neu und zeigt deshalb sofort den geänderten Stand. Facebook, LinkedIn und WhatsApp speichern Vorschauen dagegen zwischen und zeigen oft noch eine Weile die alte Fassung, bereits verschickte Nachrichten ändern sich ohnehin nicht. Mit welchen Werkzeugen die Plattformen eine Seite neu einlesen, steht auf der Wissensseite zu Open Graph. Am meisten Arbeit spart, wer die Angaben einmal zentral in der Vorlage einrichtet, sodass jede neue Seite automatisch Titel, Text und Bild bekommt. Bei einem Neubau gehört das dazu, siehe Webdesign.

Grenzen des Checks

Der Check simuliert keine bestimmte App. Angaben, die erst ein Skript in die Seite schreibt, sieht er nicht, und die Abrufprogramme der Plattformen meist ebenso wenig. Liegt die Seite hinter einem Passwortschutz oder antwortet sie mit einem Fehler, wertet er nur die Fehlerseite aus. Geprüft wird immer nur die eingegebene Adresse. Hat jede Unterseite eigene Angaben, prüfen Sie die wichtigsten einzeln. Das Limit liegt bei 20 Prüfungen je Besucher und Stunde.