Wie ein geteilter Link aussieht, bestimmen die Open-Graph-Tags im <head>-Bereich der Seite. Fehlen sie, raten Facebook, LinkedIn oder Messenger den Titel und das Bild selbst. Und sie raten jedes Mal anders. Statt des Beitragsbilds erscheint das Logo aus dem Footer, irgendein Icon oder eine leere Kachel. Im Folgenden zeige ich, welche Tags Sie einbauen sollten und wie Sie die Grafik vorbereiten. Außerdem geht es darum, wie Sie das Ganze in WordPress einrichten und wie Sie eine Plattform zwingen, die Vorschau zu aktualisieren, wenn sie hartnäckig die alte Version zeigt.
Inhaltsverzeichnis
Was sind Open-Graph-Tags und woher nehmen Plattformen die Linkvorschau?
Das sind Meta-Tags, aus denen ein soziales Netzwerk erfährt, mit welchem Titel, welchem Bild und welcher Adresse es die Seite darstellen soll. Laut der Spezifikation des Open-Graph-Protokolls machen sie aus einer normalen Unterseite ein Objekt, das die Plattform genauso anzeigt wie ihre eigenen Inhalte. Technisch sind das einfach zusätzliche <meta property=”og:…”>-Elemente im Kopf des Dokuments. Besucher sehen sie nicht. Überhaupt nicht.
Facebook, LinkedIn und die meisten Messenger lesen dieselben Tags aus. Einmal eingebaut, wirkt es an vielen Stellen gleichzeitig, praktisch. Verwechseln Sie sie aber nicht mit schema.org-Daten (ein häufiger Fehler). Meta-Tags für Social Media steuern, wie eine geteilte Seite aussieht. Was strukturierte Daten sind, ist dagegen ein anderes Thema: eine Beschreibung des Inhalts für Suchmaschinen.
Welche Open-Graph-Tags sind Pflicht und welche lohnen sich zusätzlich?
Die Spezifikation verlangt auf jeder Seite vier Eigenschaften. Einige weitere verbessern Aussehen und Barrierefreiheit der Vorschau. Pflicht sind:
- og:title - der Titel, der in der Vorschau erscheinen soll,
- og:type - die Art des Objekts, bei einem Blogbeitrag meist article,
- og:image - die Adresse des Bildes, das in der Kachel angezeigt wird,
- og:url - die kanonische Adresse, die der Plattform als feste Kennung der Seite dient.
Dazu empfehle ich einige ergänzende Tags. og:description ist eine kurze Beschreibung. og:image:alt beschreibt die Grafik für Screenreader (und wird meiner Meinung nach am häufigsten vergessen). og:locale gibt Sprache und Region an, og:site_name den Namen der Website. Ein kompletter Satz für einen einzelnen Beitrag kann so aussehen:
<meta property="og:title" content="So richten Sie die Linkvorschau ein" />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://example.com/linkvorschau/" />
<meta property="og:image" content="https://example.com/img/linkvorschau.jpg" />
<meta property="og:image:alt" content="Link-Kachel mit Titel und Beitragsbild" />
<meta property="og:description" content="Kurze Beschreibung des Beitrags für die Vorschau." />
<meta property="og:locale" content="de_DE" />
<meta property="og:site_name" content="Name der Website" />og:image: Größe, Format und Seitenverhältnis des Bildes
Abmessungen und Seitenverhältnis des Bildes müssen zur aktuellen Dokumentation der Plattformen passen. Wenn nicht, wird die Grafik beschnitten oder schrumpft zu einem kleinen Vorschaubild neben dem Text. Meta und LinkedIn ändern ihre Vorgaben immer wieder. Schauen Sie deshalb in die Hilfe der jeweiligen Plattform, bevor Sie eine Grafikvorlage erstellen, und nicht in eine Anleitung von vor ein paar Jahren.
Unabhängig von den Abmessungen bewähren sich ein paar einfache Regeln:
- geben Sie eine absolute Adresse mit https an, keinen relativen Pfad,
- halten Sie das wichtigste Element und eventuellen Text in der Bildmitte, denn die Ränder werden oft abgeschnitten,
- erstellen Sie für jeden Beitrag eine eigene Grafik statt eines einzigen Logos für die ganze Website.
Übrigens: Die Vorschau auf Facebook und das Link-Vorschaubild auf LinkedIn nutzen dasselbe og:image. Eine sauber gemachte Datei deckt also meist beide Netzwerke ab.
So richten Sie Open-Graph-Tags in WordPress und auf anderen Websites ein
In WordPress überlassen Sie das am einfachsten einem SEO-Plugin, das die Tags für jeden Beitrag selbst erzeugt. Drei Schritte, fertig:
- Installieren und konfigurieren Sie ein SEO-Plugin, zum Beispiel Rank Math oder Yoast.
- Öffnen Sie im Beitragseditor den Social-Media-Reiter und legen Sie Titel, Beschreibung und Bild für geteilte Links fest.
- Speichern Sie den Beitrag und prüfen Sie im Quelltext der Seite, ob die og:-Tags die richtigen Werte haben.
Bei uns sieht das so aus: Auf web-systems.pl erzeugt Rank Math og:title, og:image, og:image:alt und og:locale. Und noch etwas. Titel und Beschreibung für Social Media müssen den Meta-Title für Google nicht kopieren. Sie dürfen kürzer und pointierter sein. Die Regeln sind im Grunde dieselben wie beim Texten für Suchmaschinen, nur sitzt der Leser woanders. Er scrollt durch den Feed, nicht durch Suchergebnisse.
In Onlineshops und auf Websites ohne WordPress kommen die Tags direkt in die Header-Vorlage. Meist nebenbei, wenn Sie die Erstellung einer Firmenwebsite in Auftrag geben. Achten Sie dafür auf doppelte Tags. Theme plus zwei Plugins, jedes fügt seine eigenen ein, und die Plattform nimmt das falsche Bild. Ein Klassiker.
Warum ändert sich die Linkvorschau nicht und wie aktualisiert man sie?
Weil Plattformen die Vorschau im Cache speichern. Nach einer Korrektur der Tags müssen Sie also ein erneutes Abrufen der Seite erzwingen. Auf Facebook geht das im Sharing Debugger von Meta, auf LinkedIn im Post Inspector. Sie fügen die Adresse ein, das Tool lädt die Seite neu und zeigt, was es ausgelesen hat, samt Warnungen. Wie der Cache genau funktioniert, beschreibt die Dokumentation der jeweiligen Plattform.
Die Fehlersuche beginne ich immer mit der Quelltextansicht im Browser. Sind dort keine Tags? Dann hilft auch kein Debugger. Die häufigsten Ursachen sind:
- ein Bild, das kleiner ist, als die Plattform verlangt,
- eine Bildadresse als relativer Pfad,
- eine Sperre für den Crawler der Plattform in der robots.txt oder in den Sicherheitseinstellungen des Servers,
- eine Weiterleitungskette, die zu einer anderen Version der Adresse führt,
- fehlendes og:url oder eine Adresse, die nicht der kanonischen entspricht.
Die Linkvorschau als fester Teil jeder Veröffentlichung
Hier braucht es keine Tricks, nur eine Gewohnheit. Legen Sie bei jedem neuen Beitrag Bild und Titel für geteilte Links fest, und bevor Sie den Link irgendwo posten, schicken Sie ihn durch den Debugger. Eine gepflegte Kachel wirkt in organischen Posts genauso wie in Anzeigen. Deshalb sind gut eingerichtete Open-Graph-Tags das Fundament, auf dem Kampagnen in sozialen Medien aufbauen.
Häufige Fragen
Beeinflussen Open-Graph-Tags das Ranking bei Google?
u003cpu003eNein. Google berücksichtigt sie nicht bei der Bestimmung der Position. Sie entscheiden aber darüber, wie ein Link nach dem Teilen aussieht, und davon hängt ab, ob jemand darauf klickt und wie viel Traffic aus Social Media kommt.u003c/pu003e
Brauchen LinkedIn und Facebook eigene Tags?
u003cpu003eMeist nicht, denn beide Netzwerke lesen og:title, og:image und og:description. Eine eigene Grafik braucht es nur, wenn die Dokumentation einer Plattform ein anderes Seitenverhältnis verlangt als das, das Sie bereits verwenden.u003c/pu003e
Was tun, wenn nach der Änderung von og:image weiterhin das alte Bild erscheint?
u003cpu003eErzwingen Sie ein erneutes Abrufen der Adresse im Sharing Debugger oder im Post Inspector. Hat das nicht geholfen? Laden Sie die Grafik unter einem neuen Dateinamen hoch und ersetzen Sie die Adresse in og:image. Die Plattform kann nämlich das Bild selbst im Speicher behalten, unabhängig von der Seite.u003c/pu003e
