Werkzeuge Anmelden 14 Tage testen
SEO

og:image setzen: was beim Teilen wirklich ankommt

· 5 Min. Lesezeit

Wer einen Link in Slack, WhatsApp oder LinkedIn einfügt, sieht selten die Adresse. Er sieht eine Karte: Bild, Titel, eine Zeile Text. Diese Karte entscheidet über den Klick, und sie entsteht aus vier Zeilen im <head> — nicht aus dem, was auf der Seite steht.

Das ist keine Facebook-Sache. Das Open Graph Protocol stammt zwar von dort, aber gelesen wird es heute von fast allem, was Links darstellt: Slack, Teams, Discord, Signal, Telegram, LinkedIn, Mastodon, WhatsApp. Wer die Tags weglässt, überlässt jeder dieser Anwendungen die Entscheidung, was sie sich stattdessen von der Seite nimmt — meistens das erste Bild, das sie findet.

Die vier Zeilen, die tatsächlich Pflicht sind#

Die Spezifikation nennt vier Grundangaben: Titel, Typ, Bild und die kanonische Adresse.

``html <meta property="og:title" content="og:image setzen: was beim Teilen ankommt"> <meta property="og:type" content="article"> <meta property="og:image" content="https://www.beispiel.de/bilder/og-artikel.png"> <meta property="og:url" content="https://www.beispiel.de/seo/og-image-setzen/"> ``

Alles andere ist Zubehör — nützliches Zubehör, aber ohne diese vier passiert nichts Verlässliches.

Zwei Link-Vorschaukarten nebeneinander: links eine mit grauem Platzhalter statt Bild, rechts eine mit einem eigenen Motiv

og:url wird dabei am häufigsten vergessen und ist der Grund für ein verwirrendes Verhalten: Teilt jemand deine Seite mit einem Kampagnenparameter am Ende, sammeln die Netzwerke die Reaktionen unter der Adresse, die im og:url steht. Fehlt sie, zählt jede Variante für sich.

Die Maße, und warum ausgerechnet diese#

Meta empfiehlt mindestens 1200 × 630 Pixel für die Darstellung auf hochauflösenden Geräten. Darunter gibt es zwei Schwellen: Ab 600 × 315 wird die große Kartenform überhaupt erst benutzt, und unterhalb von 200 × 200 wird das Bild gar nicht angenommen. Die Datei darf 8 MB nicht überschreiten.

Wichtiger als die absoluten Zahlen ist das Verhältnis: 1,91 zu 1. Wer ein quadratisches oder hochkantes Bild einsetzt, bekommt es nicht kleiner, sondern beschnitten — oben und unten fällt weg, und zwar aus der Mitte heraus.

Ein hochformatiges Bild wird in einen breiten Rahmen gesetzt; oben und unten fällt jeweils ein Streifen weg

Das trifft vor allem Logos und alles, was Schrift enthält. Eine Zeile am oberen Rand ist auf dem Bildschirm sichtbar und in der Vorschaukarte weg. Wer Text ins Bild setzt, hält ihn in der mittleren Hälfte.

Die Beschreibung des Bildes gehört dazu#

Die Spezifikation sagt es ausdrücklich: Wer og:image angibt, soll auch og:image:alt angeben. Gemeint ist eine Beschreibung dessen, was zu sehen ist — nicht der Text, der im Bild steht.

``html <meta property="og:image:alt" content="Zwei Vorschaukarten im Vergleich"> <meta property="og:image:width" content="1200"> <meta property="og:image:height" content="630"> ``

Breite und Höhe sparen dem Netzwerk den ersten Abruf: Ohne sie muss es das Bild erst laden, um zu wissen, wie es die Karte baut. Beim allerersten Teilen einer neuen Adresse erscheint deshalb manchmal eine Karte ohne Bild — und beim zweiten Mal ist es da.

Ein Bild für alles ist besser als keines und schlechter als es aussieht#

Der verbreitetste Zustand ist nicht das fehlende og:image, sondern dasselbe für jede Seite. Das ist verständlich: Ein Bild, einmal gebaut, gilt überall.

Links neun identische Vorschaukarten, rechts neun Karten mit jeweils eigenem Motiv

Es kostet aber genau dort, wo die Karte gebraucht wird. Wer in einem Kanal drei Beiträge derselben Domain teilt, produziert dreimal dieselbe Kachel; die Karte sagt dann nur noch, von wem der Link ist, und nichts mehr darüber, was dahintersteckt.

In eigener Sache: Dieses Magazin macht es an dieser Stelle selbst nicht besser — alle Beiträge teilen sich derzeit ein og:image. Der Weg dahin, es zu ändern, ist derselbe, der hier beschrieben ist.

Der pragmatische Mittelweg ist nicht ein Bild je Beitrag, sondern eines je Rubrik oder Motiv. Bei fünf bis zehn Bildern ist der Wiedererkennungswert da, und der Aufwand bleibt überschaubar.

Was nicht hilft#

Eine relative Adresse. content="/bilder/og.png" wird von den meisten Netzwerken nicht aufgelöst. Vollständige Adresse mit Protokoll und Host, immer.

Das Bild hinter einer Sperre. Liegt es in einem Verzeichnis, das die robots.txt ausschließt, oder hinter einem Passwortschutz aus der Entwicklungszeit, sieht es niemand. Dasselbe gilt für eine Content-Security-Policy, die zwar den Browser betrifft, aber die eigene Vorschau des Bildes im Backend gleich mit blockiert.

Das Bild austauschen und auf Wirkung hoffen. Die Netzwerke halten die Karte zwischengespeichert, teils wochenlang. Nach einer Änderung muss man sie zum Neueinlesen zwingen — dafür gibt es den Sharing Debugger von Meta und den Post Inspector von LinkedIn. Beide zeigen zugleich, was tatsächlich gelesen wurde, und das ist der eigentliche Nutzen: Man rät nicht, man sieht es.

Die Vorschau im eigenen Browser prüfen. Der Browser rendert die Karte nicht. Was du siehst, wenn du die Seite aufrufst, hat mit der Karte nichts zu tun.

Die Reihenfolge, wenn es schiefgegangen ist#

  1. Quelltext aufrufen und nachsehen, ob die vier Zeilen überhaupt dastehen — Strg+U, dann nach og: suchen.
  2. Die Bildadresse einzeln im Browser öffnen. Kommt ein 404 oder eine Anmeldemaske, ist die Ursache gefunden.
  3. Maße prüfen: mindestens 1200 × 630, Verhältnis nahe 1,91 zu 1, unter 8 MB.
  4. Erst dann den Debugger des betroffenen Netzwerks bemühen und neu einlesen lassen.

Bei WordPress kommt eine fünfte Frage dazu: Welches Plugin schreibt die Tags? Zwei SEO-Plugins nebeneinander schreiben zwei Sätze og:-Zeilen, und welcher gewinnt, entscheidet die Reihenfolge im Quelltext. Das ist dieselbe Sorte Fehler wie beim doppelten Canonical-Tag, nur sichtbarer.

Ob die Seite, deren Karte du prüfst, überhaupt in der Suche steht, ist eine andere Frage — sie steht in Ist meine Seite indexiert?. Und was ein Host sonst noch an Kopfzeilen preisgibt, zeigt der Security-Scan.

Quellen#