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

WordPress Hosting

WordPress-Hosting: Die 5 besten Anbieter im Jahr 2023

Das richtige WordPress-Hosting zu finden, ist nicht immer ganze einfach. Wer mit dem Content-Management-System (CMS) WordPress eine Webseite oder einen Online-Shop erstellen möchte, benötigt das richtige Hosting für WordPress. Damit wir Euch eine Menge Ärger und Frustration bei der Suche nach einem passenden und günstigen WordPress-Hosting in Deutschland ersparen, haben […]

Bilder mit Dall-E erstellen

Wie erstelle ich KI-Bilder mit DALL-E?

KI-Bilder erstellen – längst keine Science-Fiction mehr. Zuvor waren zahlreiche Bildbearbeitungsfähigkeiten notwendig, um ansprechende Bilder mit Photoshop oder anderen Programmen zu erstellen. Mit dem Tool Canva wurde dies bereits ein wenig einfacher, doch nun ist es nahezu kinderleicht. Künstliche Intelligenz (KI) bzw. Artificial Intelligence (AI) bringt die Bildbearbeitung auf das […]

ChatGPT Texte schreiben

So erstellst Du perfekte SEO-Texte mit ChatGPT! (Tutorial + Tipps)

Seit Ende 2022 ist ChatGPT in aller Munde. Hierbei handelt es sich um eine künstliche Intelligenz, die für verschiedene Aufgaben herangezogen werden kann. Vor allem beantwortet sie Fragen, schreibt aber auch in wenigen Sekunden SEO-Texte, Beschreibungen, Newsletter oder andere Texte. Daher stellen sich viele Webseitenbetreiber nun die Frage, ob und […]

Online-Marketing-Ratgeber

Matomo Analytics Event Tracking mit dem Matomo Tag Manager einrichten

Schritt für Schritt Anleitung: Matomo Analytics Event Tracking einrichten Die Basisimplementierung von Matomo Analytics über den Matomo Tag Manager deckt das Tracking der Seitenaufrufe auf Websites und in Online-Shops ab. Damit können bereits viele wichtige Informationen aufgewertet werden, bspw. zur Abfolge der aufgerufenen Seiten, den Traffic-Quellen sowie technischen Informationen wie […]

Matomo mit der Google Search Console verbinden

Matomo mit der Google Search Console verbinden

Matomo Analytics bietet mit dem Plugin „Search Engine Keyword Performance” die Möglichkeit, Daten der Google-Suche aus der Google Search Console zu importieren. Durch die Verbindung via „OAuth” über die Google API Console kann sich Matomo Analytics mit der Google Search Console verbinden, um Zugriff auf Keywords der Google-Suche zu erhalten. […]

Baidu SEO – eine Fallstudie zu den Baidu Webmaster Tools

Baidu SEO – eine Fallstudie zu den Baidu Webmaster Tools

Google ist für viele bei der Internetrecherche zum selbstverständlichen, beinahe unverzichtbaren Werkzeug avanciert – und das nicht nur hierzulande, sondern auch global. Kein Wunder, denn laut Statista dominiert die Suchmaschine mit einem Anteil von rund 85 Prozent den weltweiten Markt. Wirft man einen Blick nach China, sieht dies allerdings ganz […]