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

ki und nachhaltigkeit im marketing und unternehmen

KI und Nachhaltigkeit im Marketing und Unternehmen

Kaum ein anderes Thema wird so kontrovers diskutiert, wie die Nutzung von Künstlicher Intelligenz (KI). Dabei übersehen Kritiker nicht selten die zahlreichen Vorteile, Chancen und Möglichkeiten, die KI und Nachhaltigkeit für eine bessere Zukunft bereithält. Künstliche Intelligenz kann nicht nur Arbeits- und Produktionsprozesse effizienter und ökonomischer gestalten, sondern auch Vorteile […]

datenschutzrechtliche aspekte beim einsatz von tracking tools

Datenschutzrechtliche Aspekte beim Einsatz von Tracking Tools

Die Einhaltung von Datenschutzvorgaben ist ein zentraler Aspekt beim Einsatz von Tracking Tools in Websites, Online Shops und Apps. Dieser Artikel erläutert die wichtigsten Anforderungen, die bei der Nutzung von Tools wie Google Analytics, Matomo oder dem Meta Pixel beachtet werden müssen. Zudem bietet er praxisnahe Tipps zur datenschutzkonformen Implementierung […]

umgang mit spam mails

Umgang mit Spam-Mails – Das können Sie unternehmen!

Im Jahr 2023 hatten die beiden größten Mailanbieter web.de und GMX bekannt gegeben, dass rund 1,5 Milliarden Spam-Mails pro Woche kursieren. Zudem hat sich gezeigt, dass vor allem Künstliche Intelligenz (KI) das Problem noch verschlimmert, da sie Spam-Server aufsetzen und gute Texte formulieren kann. In der Vergangenheit konnten User Spam-Mails […]

Google Suche

Zero-Click-Suchen und Featured Snippets

Im Bereich der Suchmaschinenoptimierung (SEO) verwendet man die Begriffe Zero-Click-Suchen und Featured Snippets meist in engem Zusammenhang. Das liegt daran, weil Featured Snippets für einen Großteil der Zero-Click-Suchen verantwortlich sind. Statistiken sowie eine Studie von Semrush zeigen, dass 57 % der mobilen Suchanfragen und etwa ein Viertel der Desktop-Suchen zu […]

10 Webdesign-Tipps für eine ausgezeichnete Webseite

Mithilfe unserer Tipps und Regeln könnt Ihr eine ausgezeichnete Webseite gestalten, deren Absprungrate niedrig und Konversionsrate hoch ist. Nicht selten sieht man Webseiten, die visuell überladen wirken oder ästhetisch überhaupt nichts hermachen. Wer eine Webseite gestaltet, kann sich schnell in grafischen Irrgärten verlieren. Dies ist häufig schlecht für die Performance […]

person bei der bildbearbeitung am laptop

Die 11 besten kostenlosen Bildbearbeitungsprogramme

Mit Bildbearbeitungsprogrammen könnt Ihr Eure Bilder und Grafiken optimieren. Möchte man eine optisch ansprechende Webseite erstellen, benötigt man meist Bilder. Fotos, Abbildungen und Grafiken werden mit entsprechenden Programmen bearbeitet, um Fehler zu korrigieren oder spezielle Elemente zu entfernen. Dank dieser Software können auch Laien schöne Bilder erschaffen. Sie hilft Euch […]