ONMA Ratgeber

Open Graph für Facebook: Tags setzen, Vorschau prüfen, Cache neu einlesen

Die Tag-Referenz zeigt, welche Open-Graph-Angaben Facebook auswertet, wie sie im Head stehen und wie der Sharing Debugger den Cache aktualisiert.

2. September 2026

Aufgeklappter Laptop auf dunklem Untergrund, auf dem Bildschirm eine Google-Trefferliste zur Suche „Online Marketing Experte“

Open Graph entscheidet darüber, wie Facebook eine geteilte URL als Link-Vorschau darstellt: mit welchem Titel, welchem Beschreibungstext und welchem Bild. Die Angaben stehen als <meta>-Elemente im <head> der Seite, Facebook liest sie beim Abruf der URL aus und legt das Ergebnis im eigenen Cache ab. Genau daraus entsteht das häufigste Problem in der Praxis: Die Tags auf der Seite sind längst korrigiert, geteilt wird trotzdem weiter die alte Vorschau. Aufgelöst wird das über den Sharing Debugger von Meta, der die URL erneut einliest.

Was Open Graph ist, und was es nicht ist

Das Open Graph Protocol ist ein Auszeichnungsstandard, der eine beliebige Webseite zu einem strukturierten Objekt in einem Social Graph macht. Statt einer nackten URL bekommt Facebook damit ein Objekt mit Titel, Typ, Bild und Zieladresse.

Technisch basiert die Auszeichnung auf RDFa. Die Eigenschaften werden als Meta-Tags im Head-Bereich notiert und über den Namensraum mit dem Präfix og: angesprochen. Anders als bei vielen Meta-Angaben steht der Name dabei im Attribut property, nicht in name.

Nicht zu verwechseln ist das Protokoll mit der Graph API. Open Graph beschreibt Metadaten einer Webseite. Die Graph API ist der primäre Weg, über den Apps den Facebook Social Graph lesen und beschreiben, also eine Programmierschnittstelle. Die Tags wirken außerdem nicht nur bei Facebook: Auch Xing und LinkedIn steuern ihre Vorschau über dieselben Angaben, mit jeweils eigenen Werkzeugen zum erneuten Einlesen.

Welche og:-Tags Facebook auswertet

Die Spezifikation definiert vier Basis-Metadaten: og:title, og:type, og:image und og:url. Darüber hinaus kennt sie optionale Angaben, strukturierte Properties, Arrays und eigene Objekttypen. Für die Facebook-Vorschau ist folgender Ausschnitt maßgeblich.

Tag	Pflicht oder optional	Wirkung in der Facebook-Vorschau
`og:title`	Pflicht	Überschrift der Vorschau. Ohne Angabe greift Facebook auf andere Inhalte der Seite zurück.
`og:type`	Pflicht	Objekttyp, meist `website`, bei redaktionellen Beiträgen `article`. Steuert, welche Zusatzangaben gültig sind.
`og:image`	Pflicht	Das Vorschaubild. Fehlt es, entsteht je nach Format eine reine Textkarte.
`og:url`	Pflicht	Die maßgebliche, absolute Adresse des Objekts. Sie bestimmt, unter welchem Eintrag Facebook die Daten cacht.
`og:description`	Optional, dringend empfohlen	Beschreibungstext unter dem Titel. Facebook kürzt ihn je nach Darstellungsformat.
`og:site_name`	Optional	Name des Angebots, wird als Herkunft neben der Domain ausgegeben.
`og:locale`	Optional	Sprache und Region, zum Beispiel `de_DE`.
`og:image:secure_url`	Optional	Über HTTPS erreichbare Variante des Bildes.
`og:image:type`	Optional	MIME-Typ des Bildes, zum Beispiel `image/jpeg`.
`og:image:width`	Optional, empfohlen	Bildbreite in Pixeln. Erspart Facebook beim ersten Abruf das Nachladen des Bildes.
`og:image:height`	Optional, empfohlen	Bildhöhe in Pixeln, zusammen mit der Breite Grundlage für das gewählte Kartenformat.
`og:image:alt`	Optional, empfohlen	Textliche Beschreibung des Vorschaubildes.
`fb:app_id`	Situativ	Ordnet die Seite einer Facebook-App zu, nötig für App-gebundene Funktionen und Auswertungen.

„Pflicht" meint hier die Basis-Metadaten des Protokolls. Facebook erzeugt auch ohne sie eine Vorschau, entscheidet dann aber selbst, welche Inhalte es aus der Seite zieht, etwa das Dokument-Title-Element oder ein beliebiges Bild aus dem Quelltext. Das Ergebnis ist nicht falsch, aber nicht kontrollierbar: Genau deshalb empfiehlt Facebook Webmastern die eigene Auszeichnung, da Inhalte meist als bloße URL geteilt werden.

Einbindung im HTML-Head

Eine vollständige Basisauszeichnung sieht so aus:

<html lang="de" prefix="og: https://ogp.me/ns#">
<head>
  <meta charset="utf-8">

  <meta property="og:title" content="Open Graph für Facebook einrichten">
  <meta property="og:type" content="article">
  <meta property="og:url" content="https://www.example.com/ratgeber/open-graph-facebook/">
  <meta property="og:image" content="https://www.example.com/assets/vorschau.jpg">
  <meta property="og:description" content="Tags im Head setzen und die Facebook-Vorschau prüfen.">
  <meta property="og:site_name" content="Example">
  <meta property="og:locale" content="de_DE">

  <meta property="og:image:type" content="image/jpeg">
  <meta property="og:image:width" content="1200">
  <meta property="og:image:height" content="630">
  <meta property="og:image:alt" content="Ansicht einer Facebook-Link-Vorschau">
</head>

Breite und Höhe im Beispiel beschreiben die konkrete Bilddatei, nicht eine Vorgabe. Welche Maße und Seitenverhältnisse für ein großflächiges Vorschaubild sinnvoll sind, richtet sich nach der jeweils aktuellen Sharing-Dokumentation von Meta.

Drei Punkte entscheiden darüber, ob die Auszeichnung überhaupt ankommt. Erstens gehören in og:url und og:image absolute Adressen inklusive Protokoll, denn relative Pfade lösen externe Crawler nicht zuverlässig auf. Zweitens müssen die Tags bereits in der vom Server ausgelieferten HTML-Antwort stehen: Was erst per JavaScript nachgetragen wird, sieht der Facebook-Crawler unter Umständen nie. Drittens muss das Bild öffentlich abrufbar sein, ohne Login, Cookie-Zustimmung oder Sitzung.

Mehrere Bilder und strukturierte Properties

Open Graph erlaubt mehrere Werte für dieselbe Eigenschaft. Für Bilder wird og:image dazu einfach wiederholt:

<meta property="og:image" content="https://www.example.com/assets/vorschau-1.jpg">
<meta property="og:image:alt" content="Erstes Motiv">
<meta property="og:image" content="https://www.example.com/assets/vorschau-2.jpg">
<meta property="og:image:alt" content="Zweites Motiv">

Die Reihenfolge zählt: Das bevorzugte Bild steht zuerst. Strukturierte Zusatzangaben wie og:image:alt, og:image:width oder og:image:height beziehen sich immer auf das unmittelbar davor genannte og:image. Welches Motiv Facebook am Ende zeigt, bleibt abhängig von Verfügbarkeit und Format der Karte.

Der Sharing Debugger von Meta zeigt eine Vorschau darauf, wie ein Inhalt beim Teilen auf Facebook aussieht, und dient zum Debuggen fehlerhafter Open-Graph-Tags. Die Prüfung läuft in sieben Schritten:

Die vollständige, absolute Seiten-URL einfügen und den Abruf starten.
Die vom Debugger erkannte URL mit der eigenen og:url vergleichen.
Warnungen zu fehlenden Tags, Weiterleitungen oder nicht abrufbaren Bildern lesen.
Titel, Beschreibung und Bild gegen den ausgelieferten Quelltext prüfen.
Fehler auf der Seite korrigieren und die Korrektur veröffentlichen.
Im Debugger „Erneut scrapen" auslösen.
Kontrollieren, ob der neue Abruf die aktualisierten Werte meldet.

Das erneute Scraping frischt den Cache-Eintrag für genau diese URL auf. Bereits veröffentlichte Beiträge übernehmen die neue Darstellung nicht zwingend rückwirkend, neu erstellte Beiträge greifen jedoch auf die frisch eingelesenen Daten zu.

Fehlerhafte Vorschau: die Suchreihenfolge

Zeigt Facebook nichts oder das Falsche, arbeitet man diese Kette von außen nach innen ab:

Erreichbarkeit: Liefert die URL für einen anonymen Abruf einen erfolgreichen HTTP-Status?
Weiterleitungen: Ketten und Zwischenziele führen dazu, dass Facebook die Metadaten einer anderen Adresse übernimmt.
Auslieferung: Stehen die og:-Tags im rohen HTML, nicht erst im gerenderten DOM?
Dubletten: Doppelte Angaben für Titel, URL oder Bild erzwingen eine willkürliche Auswahl.
Bild: Die Bildadresse direkt im Browser ohne Anmeldung öffnen, idealerweise im privaten Fenster.
Blockaden: Bot-Schutz, Firewall, robots.txt oder CDN-Regeln dürfen den Facebook-Crawler nicht aussperren.
Identität der URL: Protokoll, Subdomain, Parameter und abschließender Schrägstrich müssen zwischen og:url, Weiterleitungsziel und geteilter Adresse zusammenpassen, sonst entstehen getrennte Cache-Einträge.
Cache: Nach jeder Korrektur erneut scrapen, sonst prüft man weiter den alten Stand.

Kurzcheck vor der Veröffentlichung

Vorhanden sein müssen og:title, og:type, og:url und og:image, ergänzt um eine präzise og:description. Alle Adressen sind absolut und ohne Login abrufbar, die Tags stehen serverseitig im Head, und jede URL existiert nur in einer Schreibweise. Der letzte Schritt ist immer derselbe: einmal durch den Sharing Debugger, bis die angezeigte Karte exakt dem entspricht, was ausgeliefert werden soll.