Zum Inhalt springen

Glossar Open Graph

Was ist Open Graph?

  • SEO Técnico
Definition

Open Graph ist ein Meta-Tag-Protokoll mit dem Präfix og:, das Facebook 2010 einführte und mit dem sich steuern lässt, welcher Titel, welche Beschreibung und welches Vorschaubild erscheinen, wenn eine URL in sozialen Netzwerken geteilt wird.

Auf dieser Seite 6
  1. Was ist Open Graph?
  2. Die wichtigsten og:-Eigenschaften
  3. Wie es funktioniert
  4. Warum es wichtig ist
  5. Best Practices
  6. Häufige Fehler
Kurz gefasst

Welche og:-Eigenschaften Pflicht sind, warum sie die Social-Media-Vorschau steuern statt das Google-Ergebnis, und was passiert, wenn das Vorschaubild fehlt oder nicht zum tatsächlichen Inhalt passt.

Was ist Open Graph?

Facebook führte Open Graph 2010 auf seiner Entwicklerkonferenz f8 ein, zusammen mit dem „Gefällt mir"-Button und dem Konzept des „sozialen Graphen". Das Protokoll definiert eine Reihe von Meta-Tags mit dem Präfix og:, die im <head> einer Seite stehen und beschreiben, wie diese URL dargestellt werden soll, wenn jemand sie teilt. Technische Grundlage ist RDFa, eine HTML-Erweiterung zum Einbetten strukturierter Metadaten direkt im Markup.

Die ursprüngliche Idee war einfach: jede Webseite zu einem „Objekt" im sozialen Graphen von Facebook machen, mit einem erkennbaren Titel, Typ und Bild, statt die Plattform diese Angaben aus dem sichtbaren Inhalt raten zu lassen. Fünfzehn Jahre später gilt das Protokoll weiterhin, und Meta pflegt das Repository auf GitHub, allerdings ohne größere Änderungen seit Version 1.0.

Ursprünglich für Facebook gedacht, ist es heute der De-facto-Standard, den die meisten Plattformen auslesen, bevor sie eine Link-Vorschau erzeugen, von LinkedIn bis zur Linkvorschau in WhatsApp und in vielen Chat-Apps, die eine URL erkennen. Wer die og:-Tags einmal sauber pflegt, deckt damit fast alle Kanäle gleichzeitig ab, ohne für jede Plattform eine eigene Lösung zu bauen.

Die wichtigsten og:-Eigenschaften

EigenschaftWas sie steuertPflicht
og:titleDer Titel in der Vorschau, ohne MarkennamenJa
og:descriptionDer kurze Text unter dem Titel, 2 bis 4 SätzeNein, aber empfohlen
og:imageDas Vorschaubild; fehlt es, zeigen die meisten Plattformen gar kein BildNein, aber empfohlen
og:urlDie kanonische URL des Inhalts, ohne Session- oder Tracking-ParameterJa
og:typeDer Objekttyp (website, article, video.movie ...), der weitere Felder festlegtJa

Die ersten drei Eigenschaften fallen beim Teilen sofort auf; die letzten beiden ordnen ein, wie der Crawler jeder Plattform den Inhalt einstuft.

<head>
  <meta property="og:title" content="Was ist der Title Tag?">
  <meta property="og:description" content="Der Title Tag ist das title-Element im head: Er bestimmt die Überschrift im Suchergebnis, kann aber von Google umgeschrieben werden.">
  <!-- empfohlen: 1200x630px -->
  <meta property="og:image" content="https://www.zds.es/de/img/og/was-ist-der-title-tag.jpg">
  <meta property="og:url" content="https://www.zds.es/de/was-ist-der-title-tag/">
  <meta property="og:type" content="article">
</head>

Wie es funktioniert

Die og:-Tags stehen im <head> des HTML, genau wie der Title Tag oder die Meta Description, erfüllen aber eine andere Aufgabe: Während diese beiden Tags beeinflussen, wie die Seite im Google-Ergebnis erscheint, legen die og:-Tags ausschließlich die Vorschau beim Teilen in sozialen Netzwerken fest. Es sind eigenständige Meta Tags, und eine Seite kann alle drei gleichzeitig haben, ohne dass sie sich gegenseitig stören.

Fügt jemand einen Link bei Facebook, LinkedIn oder WhatsApp ein, schickt jede Plattform ihren eigenen Crawler los, liest die og:-Tags im <head> aus und baut daraus die Vorschau. Das Ergebnis landet meist im Cache: Wird Bild oder Titel später geändert, kann die alte Vorschau weiter erscheinen, bis ein Tool wie der Sharing Debugger von Meta ein erneutes Crawling erzwingt. Je nach Plattform hält dieser Cache Stunden oder sogar Tage, was bei einer dringenden Korrektur, etwa nach einem falschen Bild in einer Kampagne, schnell zum echten Problem wird.

X, das frühere Twitter, nutzt ein eigenes System mit dem Präfix twitter:, ursprünglich gedacht, um sich von Facebook abzugrenzen. In der Praxis existieren beide Systeme parallel auf derselben Seite: Fehlen die twitter:-Tags, greift X ersatzweise auf die Werte von og:title, og:description und og:image zurück, sodass kaum eine Website den Inhalt doppelt pflegen muss.

Warum es wichtig ist

Open Graph ist kein Rankingfaktor bei Google: Die Suchmaschine ignoriert die og:-Tags bei der Frage, an welcher Position eine Seite erscheint. Es mit dem Title Tag oder der Meta Description zu verwechseln, die tatsächlich das Suchergebnis beeinflussen, ist das häufigste Missverständnis rund um dieses Protokoll.

Sein Wert liegt woanders: Eine Vorschau mit klarem Titel, erkennbarem Bild und stimmiger Beschreibung bringt mehr Menschen dazu zu klicken, wenn der Link in sozialen Netzwerken oder Messenger-Apps kursiert, ganz ähnlich wie eine gute Meta Description die CTR im Google-Ergebnis verbessert. Der Gewinn ist indirekt, aber in echten Klicks messbar, nicht in Positionen.

Für jede Strategie im Social Media Marketing bedeuten schlecht gepflegte og:-Tags geteilte Links ohne Bild, mit generischem Titel oder falschem Text, genau in dem Moment, in dem der erste Eindruck am meisten zählt. Bei einer bezahlten Kampagne oder einem Launch, bei dem viele Menschen gleichzeitig denselben Link teilen, summiert sich dieser kleine Fehler schnell zu spürbar weniger Klicks über alle Kanäle hinweg.

Best Practices

  • Immer og:title, og:description, og:image, og:url und og:type angeben; das sind die fünf Eigenschaften, die praktisch jede Plattform ausliest.
  • Ein Bild mit mindestens 1200 x 630 Pixel und einem Seitenverhältnis nahe 1,91:1 verwenden, damit es in der Vorschau nicht beschnitten oder verpixelt wirkt.
  • og:description mit 2 bis 4 Sätzen füllen, die den tatsächlichen Seiteninhalt zusammenfassen, nicht mit einem generischen Slogan, der auf der ganzen Website wiederkehrt.
  • Die Vorschau vor der Veröffentlichung mit dem Sharing Debugger prüfen, besonders nach einer Änderung des Beitragsbilds.
  • Nach einer Inhaltsänderung an einer bereits geteilten URL ein erneutes Crawling erzwingen; sonst bleibt die alte Vorschau womöglich wochenlang im Cache.
  • Bei Bedarf zusätzlich die grundlegenden twitter:-Tags ergänzen, falls X ein relevanter Kanal ist, auch wenn sie die og:-Werte als Ersatz übernehmen können.

Häufige Fehler

  • og:image weglassen, sodass die Plattform ein zufälliges Bild von der Seite wählt oder gar keines anzeigt.
  • Ein Bild verwenden, dessen Inhalt nicht zur tatsächlich geteilten Seite passt, was manche Plattformen als irreführend einstufen.
  • og:title und og:description leer lassen und darauf hoffen, dass der Crawler den Text selbst aus dem sichtbaren Inhalt zieht.
  • og:url mit der URL verwechseln, unter der der Crawler die Seite findet, statt mit der kanonischen URL, die als Quelle gelten soll.
  • Nach einem Domainumzug oder einer Änderung der URL-Struktur vergessen, die Vorschau erneut zu prüfen.
Manuel Riveiro Rodriguez CEO & Digital Strategist

Eine technische Prüfung sieht sich das und alles Weitere in einem Durchgang an.

Audit anfragen

Häufige Fragen

Beeinflusst Open Graph das Google-Ranking?

Nein. Google nutzt die og:-Tags nicht, um über die Position einer Seite in den Suchergebnissen zu entscheiden; dafür zählen der Title Tag, die Meta Description und der tatsächliche Inhalt. Open Graph steuert nur, wie der Link aussieht, wenn er in sozialen Netzwerken oder Messenger-Apps geteilt wird, mit einem indirekten Effekt auf die CTR außerhalb von Google.

Was passiert, wenn og:image auf meiner Seite fehlt?

Die meisten Plattformen versuchen dann, automatisch ein Bild von der Seite selbst auszuwählen, mit wenig verlässlichem Ergebnis: mal ein kleines Logo, mal ein dekoratives Icon, manchmal gar kein Bild. Der geteilte Link wirkt neben anderen mit vollständiger Vorschau optisch schwächer, was die Chance verringert, dass jemand ihn öffnet.

Sind Open Graph und Twitter Cards dasselbe?

Nein, es sind zwei technisch getrennte Systeme: Open Graph nutzt das Präfix og: und stammt von Facebook, während X Tags mit dem Präfix twitter: verwendet. In der Praxis überschneiden sie sich, weil X auf die Werte von og:title, og:description und og:image zurückgreift, sobald die spezifischen twitter:-Tags auf der Seite fehlen.

Wo prüfe ich, wie meine Seite beim Teilen aussieht?

Das Standardwerkzeug ist der Sharing Debugger von Meta: URL eingeben und genau sehen, welche og:-Tags der Crawler erkennt, plus die daraus entstehende Vorschau. Damit lässt sich auch ein erneutes Crawling erzwingen, wenn Bild oder Titel geändert wurden und die Plattform noch eine alte, zwischengespeicherte Version zeigt.

Muss der Titel in og:title und im Title Tag identisch sein?

Nicht wortwörtlich, aber beide sollten dieselbe Geschichte erzählen. Der Title Tag enthält meist den Markennamen und Keywords für die Suchmaschine; og:title funktioniert besser kürzer und direkter, fokussiert auf das, was den Klick im Social-Feed attraktiv macht, ohne die Marke zu wiederholen, wenn sie schon im Bild steht.