Skip to main content

Open Graph Tags für SEO & Social Media sinnvoll nutzen

  • SEO-Küche Logo


PDF herunterladen

Mit Open Graph Meta-Tags werden die in Sozialen Netzwerken geteilten Inhalte ansprechend dargestellt und optimiert. Somit ist Open Graph ein wichtiger Bestandteil des Social-Media-Marketings und unterstützt Webmaster dabei, die Darstellung der Vorschau genau zu definieren: Die Meta Tags optimieren das geteilte Bild, die Beschreibung und den Namen der Seite.

Das Internet-Protokoll, Open Graph, wurde von Facebook entwickelt, wird aber mittlerweile auch auf allen anderen sozialen Plattformen genutzt. Wie die Optimierung mithilfe der Meta-Tags genau funktioniert und worauf Ihr achten solltet, erklären wir Euch nun.

open graph logo

Was ist Open Graph?

Open Graph – eigentlich Open Graph Protocol (OGP) – ist ein Internet-Protokoll, mithilfe dessen beeinflusst werden kann, wie eine Webseite dargestellt wird, wenn sie in Sozialen Netzwerken geteilt wird. Hierfür werden Meta Tags auf der Webseite integriert, um ein Standardformat für die verschiedenen Social-Media-Kanäle zu erhalten.

Ursprünglich wurde Open Graph von Facebook entwickelt, mittlerweile wird es aber auch von anderen Sozialen Netzwerken wie Twitter, Pinterest, LinkedIn genutzt.

Durch die Nutzung der Tags müssen die Netzwerke nicht mehr herausfinden, welche Daten wichtig sind oder nicht; sie nutzen die Vorgaben, die der Webmaster angegeben hat. Je klarer die Inhalte für die Vorschau mithilfe von Open Graph definiert sind, desto weniger Fehler entstehen.

Open Graph ist nicht nur für all diejenigen wichtig, die Social-Media-Marketing gezielt nutzen, sondern für alle Webmaster. Denn nur so haben sie die Kontrolle, wie die Inhalte Ihrer Webseite in Sozialen Netzwerken geteilt werden, selbst wenn sie diese nicht selbst geteilt haben. Außerdem haben optimierte Snippets immer eine bessere Click Through Rate (CTR) und Konversionsrate.

Welche Bedeutung hat Open Graph für SEO?

Open Graph wirkt sich zwar nicht direkt auf die Suchmaschinenoptimierung (SEO) Eurer Webseite aus, kann aber die Ergebnisse der OffPage-Optimierung beeinflussen. Durch eine ansprechende Darstellung der auf sozialen Netzwerken geteilten Inhalte kann der Traffic, die Click-Through-Rate (CTR), die Shares und die Conversion Rate erhöht werden.

Ferner können die Social-Media-Kanäle die geteilten Inhalte besser verstehen und dem entsprechenden Publikum ausstrahlen.

Funktion: Wofür wird Open Graph verwendet?

Ein in einem sozialen Netzwerk geteilter Link enthält meist eine Überschrift, ein Beitragsbild und die URL. Die Vorschau und der dazugehörige Text sollten die Inhalte und Ziele der Webseite bestmöglich darstellen und Nutzer zu einem Besuch anregen: Mehr Traffic, höhere Click-Through-Rate (CTR) und Conversion Rate.

facebook post ogp
Abb. 1: Geteilter Beitrag auf Facebook.

Meist wird die Darstellung von den Netzwerken aus den vorhandenen Daten der Webseite automatisch generiert, doch mithilfe der Open-Graph-Meta-Tags habt Ihr Einfluss auf diese Darstellung. Somit könnt Ihr eine ansprechende Darstellung der Inhalte gewährleisten, sodass diese Inhalte wiederum viele Klicks erhalten. Außerdem entstehen durch die automatische Generierung der sozialen Plattformen meist Fehler, die Ihr dadurch verhindern könnt.

Durch die Nutzung der Meta Tags können die sozialen Netzwerke auch die Inhalte besser analysieren und verstehen, um den Content bei relevanten Interessenten anzupreisen.

Die notwendigen Tags werden im Kopf des HTML-Dokuments als Meta-Property eingetragen. Zunächst wird der Typ des Tags definiert und anschließend erhält dieser einen Wert/Inhalt.

open graph title

Bevor man allerdings die Meta-Properties einfügen kann, muss man in einem Präfix folgende Zeile festlegen:

open graph prefix

Erst danach folgt der Head des Dokuments.

Die wichtigsten Open-Graph-Tags

Die Open-Graph-Meta-Tags sind die Codierung, die auf Eurer Webseite integriert werden, um einzelne Elemente und Inhalte der Webseite für die Vorschau zu definieren. Sie werden in den Header einer Webseite eingefügt und am Kürzel og: erkennbar.

Die am häufigsten genutzten Open-Graph-Meta-Tags sind im Folgenden grün markiert:

Open-Graph-Tag Beschreibung
og:title Ein kurzer und prägnanter Titel, der beim Teilen der Seite in sozialen Netzwerken angezeigt wird. Eine Länge von 95 Zeichen sollte nicht überschritten werden.
og:description Kurze Beschreibung des Inhalts nach der AIDA-Formel: Attention, Interest, Desire, Action. Wie Ihr die Formel einsetzt, könnt Ihr im Leitartikel nachlesen. Facebook sieht für die Beschreibung eine Länge von 300 Zeichen vor.
og:image Das Bild, welches geteilt werden soll und die Neugier der Nutzer weckt. Als optimales Format hat sich 1200 x 627 Pixel erwiesen.
og:url Welche URL beim Teilen verwendet wird. Facebook zeigt in der Vorschau nicht die komplette URL an, sondern nur die Domain.
og:type Definiert um welche Art von Inhalt es sich handelt (z.B. Website).
og:locale Sprache des Inhalts auf der Webseite
og:sitename Name der Webseite (Domain).

Titel – og:title

og:title

Bild – og:image

og:image

Der Image-Tag kann noch folgende weitere Informationen erhalten:

og:image
  • secure_url eignet sich immer dann, wenn man eine geeignete Alternative zur Verfügung stellen möchte, wenn die Webseite HTTPS verlangt.
  • type: Bei einem Bild ist der Medientyp immer „image“, wobei in dieser Zeile auch das Format angegeben wird. Welche Medientypen es gibt, könnt Ihr in der Liste von IANA
  • width: Diese Information definiert, wie breit das Bild in Pixeln ist.
  • height: Diese Information definiert, wie hoch das Bild in Pixeln ist.
  • alt: Der Alt-Text wird als Beschreibung des Bildinhalts genutzt, falls das Vorschaubild nicht angezeigt wird.

Art des Inhalts – og:type

og:type

Der Tag type definiert, um welche Art von Inhalt es sich handelt. Für die meisten Webseiten werden die Typen „website“, „blog“, oder „article“ verwendet. Es gibt jedoch weitere Typen:

  1. profile
  2. book
  3. video
    1. movie
    2. episode
    3. tv_show
    4. other
  4. music
    1. song
    2. album
    3. playlist
    4. radio_station

Einen Überblick über alle verfügbaren Typen erhaltet Ihr auf schema.org.

Einige Typen erlauben weitere Spezifikationen, die nach der Festlegung des Typs angeführt werden. Im folgenden Beispiel wird ein Artikel näher spezifiziert:

og type content article

URL – og:url

og:url

Beschreibung – og:description

og:description

Sprache – og:locale

og:locale

Überblick: Open-Graph-Tags

Im oberen Abschnitt haben wir Euch die wichtigsten Open-Graph-Meta-Tags vorgestellt, allerdings gibt es noch weitere, die Ihr auf Eurer Webseite integrieren könnt.

OG-Tags Beschreibung
og:title Titel Eurer Webseite
og:determiner Grammatikalischer Artikel vor dem Titel
og:description Beschreibung der Webseite
og:site_name Name der Webseite/Domain bzw. des Internetauftritts
og:url Kanonische URL
og:locale Sprache der Webseite
og:locale:alternate Alternative Länderangabe
og:type Art des Inhalts
og:image Quelle für ein Bild
og:image:secure_url Alternative, gesicherte URL (HTTPS)
og:image:type Medientyp des Bildes
og:image:width Breite in Pixeln
og:image:height Höhe in Pixeln
og:image:alt Alternativer Text zum Bild
og:audio Quelle für eine Audiodatei
og:audio:secure_url Alternative, gesicherte URL (HTTPS)
og:audio:type Medientyp der Audiodatei
og:audio:alt Alternativer Text zur Audiodatei
og:video Quelle für ein Video
og:video:secure_url Alternative, gesicherte URL (HTTPS)
og:video:type Medientyp des Videos
og:video:width Breite des Videos in Pixeln
og:video:height Höhe des Videos in Pixeln
music:duration Dauer des Lieds in Sekunden
music:album Album, auf dem sich das Lied befindet
music:album:disc Disc (CD, LP-Seite), auf welchem sich das Lied befindet
music:album:track Nummer des Lieds auf dem Album
music:musician Name des Interpreten
music:song Track auf dem Album
music:song:disc Disc (CD, LP-Seite), auf welchem sich der Track befindet
music:song:track Nummer des Tracks auf dem Album
music:release_date Veröffentlichungsdatum des Albums
music:creator Ersteller der Playlist oder des Radiosenders
video:actor Schauspieler im Film
video:actor:role Rolle eines Schauspielers
video:director Regisseure des Films
video:writer Drehbuchschreiber des Films
video:duration Dauer des Films in Sekunden
video:release_date Veröffentlichungsdatum des Films
video:tag Schlüsselbegriffe rund um das Video
video:series Serie, zu der die Episode gehört
article:published_time Veröffentlichungsdatum des Artikels
article:modified_time Letzte Änderung des Artikels
article:expiration_time Ablaufdatum des Artikels
article:author Autor des Artikels
article:section Kategorie des Artikels
article:tag Schlüsselbegriffe rund um den Artikel
book:author Autor des Buches
book:isbn ISBN des Buches
book:release_date Veröffentlichungsdatum des Buches
book:tag Schlüsselbegriffe rund um das Buch
profile:first_name Vorname einer Person
profile:last_name Nachname einer Person
profile:username Pseudonym einer Person
profile:gender Geschlecht einer Person

Anleitung: So integriert Ihr Open-Graph-Tags

Mithilfe der Open-Graph-Tags definiert man das Dokument als Artikel, legt den Titel fest, wählt ein passendes Bild, formuliert eine Beschreibung und bestimmt die URL. Ferner liefert man sowohl zum Artikel selbst als auch zum Bild weitere Informationen. Um zu prüfen, ob der Code bzw. die Tags von Facebook korrekt übernommen wird, könnt Ihr den Sharing Debugger nutzen.

Open Graph könnt Ihr im Quelltext Eurer Webseite integrieren; genauer gesagt gehören die Meta-Tags in den Header-Bereich, d.h. zwischen die tags <head> und </head>. Zunächst startet Ihr aber mit der Codezeile <html prefix=og: http://ogp.me/ns#“>, um anzuzeigen, dass Ihr mit Open Graph arbeiten möchtet.

open graph headbereich

Open-Graph-Tags mit dem WordPress-Plugin Yoast SEO integrieren

Arbeitet Ihr mit einem Content-Management-System (CMS) wie WordPress, könnt Ihr ein Plugin wie Yoast SEO herunterladen, um die Änderungen vorzunehmen. Dies ist insbesondere für all diejenigen hilfreich, die sich ungern an den Quelltext herantrauen.

yoast seo ogp tags
Abb. 2: Open-Graph-Meta-Tags mithilfe des WordPress-Plugins Yoast SEO definieren.

3 häufige Fehler bei der Nutzung von Open Graph

  • Fehler 1: Die 4 wichtigen Open-Graph-Tags (title, type, image, url) fehlen. Dies sind sehr bedeutende Tags und sie entscheiden, ob ein Nutzer Euren Beitrag anklickt oder nicht. Sie geben Hinweise darüber, was den User erwartet und sollte seine Neugier wecken.
  • Fehler 2: Die Vollständigkeit der Open-Graph-Tags ist nicht zwingend notwendig, daher sollte man nicht mit Gewalt alle Tags verwenden wollen. Die Tags müssen nicht vollständig vorhanden sein, denn es gibt immerhin rund 20 Tags und nicht alle sind relevant.
  • Fehler 3: Kanonische URL. Identische kanonische URLs sind dann sinnvoll, wenn ein Unternehmen international agiert und die Webseite verschiedene Sprachvarianten von ein und derselben URL hat. In diesem Fall erhält die Canonical-URL jeweils eine Kennzeichnung der Sprache, aber die Open-Graph-URL ist die gleiche. Das liegt daran, weil Canonical-URLs zum Inhalt der Seite führen und Open-Graph-URLs auf ein Objekt verweisen. Eine weitere Ursache für sich unterscheidende URLs sind paginierte und gefilterte Resultate: Die Open-Graph-URL beinhaltet die Filtermöglichkeiten und die Canonical-URL weist auf die nicht paginierte oder ungefilterte Webversion hin.

Social Media Netzwerke, die Open Graph unterstützen

Viele Social-Media-Plattformen unterstützen Open Graph, sodass Webseitenbetreiber die Vorschau Ihrer geteilten Inhalte problemlos beeinflussen können. Facebook, LinkedIn, Pinterest und Twitter arbeiten mit dem Protokoll und andere werden dem Trend möglicherweise folgen. Einige soziale Netzwerke nutzen jedoch zusätzlich eigene Tags für kanalspezifische Funktionen.


Häufig gestellte Fragen

Open Graph ist ein Internetprotokoll, mit welchem Ihr beeinflussen könnt, wie Eure Webseite beim Teilen in sozialen Netzwerken dargestellt werden soll. Mithilfe von auf der Webseite integrierten Meta Tags wird ein Standartformat für verschiedene Social-Media-Kanäle erzielt.
Optimierte Snippets bzw. Vorschauen sind wichtig für die Klickraten und Conversion Rate. Ohne eine ausreichend vordefinierte Darstellung Eurer Vorschau mit allen relevanten Eckdaten verliert Ihr Traffic und wertvolle Klicks.
Die verschiedenen Open-Graph-Meta-Tags werden in den Quelltext Eurer Webseite eingefügt, genauer gesagt in den Header-Bereich. Wer ein CMS wie WordPress nutzt, kann entsprechende Plugins nutzen, um sich die Arbeit zu erleichtern.
Es gibt viele verschiedene Open-Graph-Meta-Tags, z.B. og:title (Titel der Webseite), og:image (Bild), og:type (Art der Webseite), og:url (URL der Seite), og:description (Beschreibung des Inhalts) oder og:locale (Sprache der Webseite).
Ursprünglich wurde Open Graph von Facebook entwickelt, wird aktuell aber von allen anderen sozialen Netzwerken wie LinkedIn, Twitter und Pinterest verwendet.

Weiterführende Informationen & Quellen

  • Sistrix betont, dass Open Graph wichtige Herausforderungen des Social Media Marketings löst; es ermöglicht Webmastern, genau zu definieren, wie die Vorschau aussehen soll.
  • Xovi sagt: „In sozialen Netzwerken werden Inhalte geteilt. Das Open Graph Protocol hat einen Standard geschaffen, um diese Inhalte optimal anzuzeigen. Ihr könnt mit Tags festlegen, wie die Links dargestellt werden sollen“.
  • Laut Ryte-Magazin könnt Ihr Euren Auftritt in sozialen Netzwerken mit Open Graph Tags optimieren – und zwar immer dann, wenn die URL Eurer Webseite geteilt wird. Hierfür werden nur wenige Handgriffe benötigt und Ihr könnt bei einem CMS wie WordPress ganz einfach mit Plugins arbeiten.
  • OMT empfiehlt den Facebook Debugger zu nutzen, denn wenn man in sozialen Netzwerken einen Link teilt, können Fehler auftreten. Der Debugger hilft Euch dabei, Fehler bei der Darstellung der Vorschau zu analysieren und zu beheben.

Ähnliche Beiträge

DSGVO-konform: Google Fonts lokal auf eigenem Webserver in WordPress einbinden!

Google Fonts solltet Ihr lokal in WordPress einbinden, denn dies ist aufgrund der DSGVO notwendig. Sollte Google Fonts standardmäßig eingebunden sein, d.h. über den Google-Server, werden Daten wie IP-Adresse, Browser oder Referrer an Google übermittelt. Zwar werden laut Google keine Cookies gespeichert, trotzdem könnte Google in der Theorie die Nutzeraktivitäten […]

B2B-Content-Marketing: Anleitung und Beispiele aus der Praxis

Content-Marketing ist auch für B2B (Business to Business) ebenso wichtig wie für B2C (Business to Customer). Dabei mögen grundlegende Aspekte zwar gleich sein, dennoch müsst Ihr bei B2B einige unterschiedlichen Herangehensweisen beachten. In diesen Beitrag erläutern wir Euch, welche Ziele hinter Content-Marketing für B2B stecken, welche Content-Formate nützlich sind und […]

B2B-SEO: Mehr Traffic & Sichtbarkeit für B2B-Unternehmen

Ein durchdachtes B2B-SEO und B2B-Content-Marketing sind wichtig, um mit der eigenen Webseite bei Google zu ranken. Hierbei geht es unter anderem um guten Content sowie eine professionelle Keyword-Recherche, aber auch um andere essenzielle SEO-Bereiche. Jedoch unterscheidet sich SEO für B2B und B2C insbesondere bei der Identifikation der Suchintentionen und Erstellung […]

e mail marketing grundlagen tipps

E-Mail-Marketing: Grundlagen und Tipps für Anfänger

E-Mail-Marketing ist ein wichtiger Bestandteil Eures Online-Marketings, der wichtig für Eure Reichweite und den Traffic ist. Es ist eine schnelle und günstige Möglichkeit, potenzielle Interessenten und Kunden zu erreichen. Mit nur wenig Aufwand könnt Ihr ansprechende Newsletter erstellen und Eure Zielgruppe über Rabattaktionen, Events und neue Produkte bzw. Beiträge informieren. […]

Die 8 besten WordPress Caching Plugins für mehr Pagespeed

Um den PageSpeed Eurer Webseite zu optimieren, müsst Ihr Daten im Cache (deutsch: Zwischenspeicher) speichern. Hierfür gibt es spezielle Caching-Plugins für WordPress. Wie wichtig die PageSpeed-Optimierung Eurer Website für das Ranking, die Absprungrate, Customer-Journey und andere SEO-Faktoren ist, müssen wir nicht mehr betonen. Mit den entsprechenden Caching-Tools könnt Ihr Eure […]

die besten shopsysteme

Shopsysteme im eCommerce: Die 7 besten Webshops 2022

Das beste Shopsystem für die Umsetzung eines E-Commerce-Projekts zu finden, kann eine Herausforderung darstellen. Es gibt viele verschiedene Systeme, wobei Euch einige mehr Freiheiten schenken als andere, aber dafür Verknüpfungsmöglichkeiten und Vorteile bieten. Ferner sind die einzelnen Shopsysteme nicht miteinander vergleichbar, da es verschiedene Arten gibt: SaaS-Lösungen, Komplettlösungen, Open-Source-Shopsysteme und […]