Open Graph: so sieht ein geteilter Link bei WhatsApp, Facebook und LinkedIn aus

Kurz zusammengefasst

• Open Graph sind meta-Angaben im Kopfbereich einer Seite, die Titel, Beschreibung und Bild für das Teilen festlegen.
• Wichtig sind og:title, og:description, og:image und og:url.
• Richtwert für das Bild: 1200 x 630 Pixel. Die Bildadresse muss vollständig und öffentlich erreichbar sein.
• Plattformen speichern Vorschauen zwischen. Änderungen erscheinen oft erst nach einer Aktualisierung.

Was Open Graph ist

Das Protokoll wurde ursprünglich von Facebook eingeführt, inzwischen lesen es viele Dienste aus, darunter WhatsApp und LinkedIn sowie zahlreiche Messenger-Apps. Fügt jemand einen Link in eine Nachricht ein, ruft der Dienst die Seite ab, liest die Open-Graph-Angaben und baut daraus eine kleine Karte. Fehlen die Angaben, rät der Dienst: Er nimmt den Seitentitel, den ersten Text und irgendein Bild, oder er zeigt gar keine Vorschau.

Als Faktor für die Platzierung in der Google-Suche nennt Google diese Angaben nicht. Es geht um den Eindruck beim Teilen. Gerade bei Betrieben wird oft per WhatsApp empfohlen: Eine Kundin schickt einer Freundin den Link zum Friseursalon, jemand leitet die Seite einer Praxis oder eines Handwerkers an Familienmitglieder weiter. Wirkt die Vorschau dann ordentlich, ist der erste Eindruck gut.

Die wichtigsten Angaben

• og:title: der Titel der Karte. Er kann dem Title-Tag entsprechen, darf aber auf das Teilen zugeschnitten und kurz sein.
• og:description: ein bis zwei Sätze, die erklären, was Empfänger erwartet. Manche Plattformen kürzen stark oder blenden die Beschreibung aus.
• og:image: die Adresse des Vorschaubilds, vollständig und mit https.
• og:url: die bevorzugte Adresse der Seite, passend zum Canonical-Tag.
• og:type: meist „website“, bei Artikeln „article“.
• Optional: og:site_name für den Namen der Website, den Google als eine von mehreren Quellen für den Websitenamen in den Suchergebnissen nennt, und og:image:alt für eine Bildbeschreibung.

Im Quelltext stehen die Angaben als meta-Elemente mit dem Attribut property, zum Beispiel <meta property="og:title" content="Mittagstisch und Speisekarte">. Jede Seite braucht eigene Angaben, damit der Link zur Speisekarte nicht mit der Karte der Startseite erscheint. Mehr zum Titel und zur Beschreibung steht in den Beiträgen zu Title-Tag und Meta-Description.

Das Vorschaubild

Als Richtwert gilt eine Größe von 1200 x 630 Pixeln, das entspricht einem Seitenverhältnis von etwa 1,91 zu 1. Plattformen schneiden Bilder unterschiedlich zu, deshalb sollten wichtige Inhalte in der Mitte liegen. Logo oder Text gehören nicht an den Rand. Ist das Bild deutlich kleiner, zeigen manche Dienste statt der großen Karte nur eine kleine Miniatur neben dem Text. Üblich sind JPG oder PNG. Die Datei sollte nicht unnötig groß sein, damit der Dienst sie sicher lädt.

Die Bildadresse muss vollständig sein und ohne Anmeldung erreichbar. Ein Bild hinter einem Passwortschutz oder ein relativer Pfad führen zu einer Karte ohne Bild. Als Motiv eignet sich ein echtes Foto, das zum Betrieb passt: bei einem Restaurant ein Gericht, bei einem Handwerksbetrieb eine fertige Arbeit, bei einer Praxis ein Bild der Räume. Text im Bild sollte kurz und groß sein. Zeigen Sie Menschen, brauchen Sie deren Einverständnis.

Wie sich WhatsApp, Facebook und LinkedIn unterscheiden

Alle drei lesen die Open-Graph-Angaben, stellen sie aber verschieden dar. WhatsApp zeigt meist eine kompakte Karte mit Bild, Titel und Adresse, die Beschreibung erscheint dort gekürzt oder gar nicht. Facebook und LinkedIn zeigen in der Regel ein größeres Bild mit Titel, die Beschreibung je nach Ansicht. Das Wichtigste gehört deshalb in den Titel und in das Bild. Die Darstellung kann sich außerdem ändern. Verlassen Sie sich nicht auf Details, sondern testen Sie die Vorschau.

X, früher Twitter, liest zusätzlich die Angabe twitter:card. Mit dem Wert summary_large_image erscheint eine Karte mit großem Bild, mit summary eine kleinere. Titel, Beschreibung und Bild übernimmt X in der Regel aus den Open-Graph-Angaben, wenn keine eigenen twitter-Angaben gesetzt sind. Eine einzige Zeile wie <meta name="twitter:card" content="summary_large_image"> genügt deshalb meist.

Der Cache der Plattformen

Plattformen speichern, was sie einmal abgerufen haben. Tauschen Sie das Bild aus oder ändern den Titel, zeigt ein bereits geteilter oder früher abgerufener Link oft weiter die alte Vorschau. Das ist kein Fehler Ihrer Website, sondern der Zwischenspeicher der Plattform. Bereits versendete Nachrichten ändern sich ohnehin nicht mehr.

Abhilfe schaffen die Werkzeuge der Plattformen: Facebook bietet den Sharing Debugger, LinkedIn den Post Inspector. Dort lassen Sie die Seite neu einlesen. Für WhatsApp gibt es kein offizielles Werkzeug. Manchmal hilft es, an die Adresse einen unwichtigen Parameter anzuhängen, etwa ?v=2, damit der Dienst sie als neue Adresse behandelt. Ein Canonical-Tag auf der Seite sorgt dafür, dass diese Variante für Google keine eigene Seite wird. Manchmal hilft nur Abwarten. Prüfen Sie die Vorschau deshalb, bevor Sie einen Link breit verteilen, zum Beispiel in einem Newsletter oder auf einem Aushang mit QR-Code.

Wo Sie die Angaben eintragen

In Baukästen und Redaktionssystemen gibt es dafür meist ein Feld in den Seiteneinstellungen, oft unter „Social Media“ oder „Teilen“, und ein SEO-Plugin übernimmt die Angaben häufig automatisch aus Titel und Beschreibung. Das Bild wird dort hochgeladen oder aus einem Beitragsbild abgeleitet. Bei einer individuell gebauten Website stehen die Angaben direkt im Kopfbereich jeder Seite. Prüfen Sie nach dem Eintragen vor allem die Seiten, deren Link Sie selbst oft verschicken, etwa die Speisekarte, die Preisliste oder die Seite zur Terminvereinbarung.

Typische Fehler

• Es gibt kein og:image. Die Vorschau erscheint ohne Bild oder mit einem zufälligen, etwa einem winzigen Logo.
• Die Bildadresse ist relativ, liegt hinter einem Login oder beginnt mit http, was manche Dienste nicht laden.
• Das Bild ist zu klein oder wird so beschnitten, dass Text am Rand fehlt.
• Alle Seiten haben dieselben Angaben, sodass jede Unterseite mit der Karte der Startseite erscheint.
• Platzhaltertexte aus dem Baukasten oder Theme stehen in Titel oder Beschreibung.
• Nach einer Änderung wird die Vorschau nicht neu eingelesen, und alle sehen weiter die alte Fassung.

Vorschau prüfen

Der kostenlose Link-Vorschau-Check liest den ausgelieferten Quelltext Ihrer Seite, meldet, ob og:title, og:description oder og:image fehlen, und zeigt daraus eine ungefähre Vorschaukarte. Fehlt og:title oder og:description, setzt er in der Karte ersatzweise Title-Tag und Meta-Description ein, so wie es manche Dienste auch tun. Außerdem zeigt er, ob eine twitter:card-Angabe vorhanden ist. Größe und Zuschnitt des Bildes misst er nicht, und wie genau WhatsApp, Facebook oder LinkedIn die Karte am Ende darstellen, entscheiden die Dienste selbst. Das Werkzeug arbeitet ohne Anmeldung und speichert die eingegebene Adresse nicht.

Bemuar Technology baut Websites zum Festpreis, der vor dem Start schriftlich feststeht. Wie ein Projekt abläuft, beschreibt die Seite Webdesign.