Open-Graph-Tags richtig einsetzen - für mehr Reichweite

Wer Inhalte im Internet veröffentlicht, will Aufmerksamkeit. Doch der beste Content nützt wenig, wenn er in sozialen Netzwerken nicht auffällt. Der erste Eindruck – Titel, Beschreibung, Vorschaubild – entscheidet, ob Nutzerinnen und Nutzer klicken oder weiterscrollen.

Genau hier kommen Open-Graph-Tags ins Spiel. Damit steuern Sie präzise, wie Ihre Inhalte auf Facebook, LinkedIn, X und anderen Plattformen dargestellt werden. Open-Graph-Tags sind ein mächtiges Werkzeug, um die Sichtbarkeit Ihrer Inhalte zu steigern und die Interaktionen in sozialen Medien deutlich zu verbessern. Erfahren Sie, wie das funktioniert und wie Sie Open-Graph-Tags richtig einsetzen.

Was ist Open Graph?

Open Graph – genauer: das Open Graph Protocol (OGP) – ist ein zuerst von Facebook 2010 auf seiner Entwicklerkonferenz F8 vorgestellter Standard, der das Teilen von Webseiten auf Facebook erleichtern und verbessern soll. Mithilfe von HTML-Meta-Elementen – auch als Meta-Tags bezeichnet – wird die Struktur von Webseiteninhalten so abgebildet, dass daraus beim Teilen eine informative, visuell ansprechende Vorschau erzeugt werden kann – und nicht nur das.

Der Name „Open Graph“ leitet sich vom Konzept des „Social Graph“ ab, das ein soziales Netzwerk als abstrakte Struktur von Personen und Beziehungen zwischen ihnen modelliert. In der Informatik bezeichnet ein Graph generell eine Datenstruktur aus Knoten (Objekten) und Kanten (Beziehungen zwischen Objekten).

Facebook speichert alle Informationen über seine Nutzer als Social Graph – diese Struktur steht im Zentrum von Facebooks Strategie. In Facebooks Social Graph sind aber die Objekte nicht nur Personen (User-Profile), sondern auch z. B. Facebook-Seiten, Fotos, Veranstaltungen, Fotos und mehr; zwischen allen diesen Objekten können Beziehungen bestehen. Open Graph öffnet dieses Netzwerk auch für externe Webseiten. Nicht umsonst wurde auf der gleichen Konferenz auch erstmals Facebooks berühmtestes „Social Plugin“ vorgestellt, der Like-Button. Wer darauf klickt, macht die gerade angesurfte Webseite zu einem weiteren Objekt im Social Graph. Die möglichen Eigenschaften dieses Objekts regelt das Open Graph Protocol.

Heute nutzen neben Facebook auch viele andere Plattformen die Open-Graph-Tags auf Webseiten zur Darstellung von Linkvorschauen, darunter LinkedIn, X (ehemals Twitter), WhatsApp oder Pinterest. Allerdings behandeln nicht alle Plattformen die Tags gleich (zum Beispiel beim Abschneiden zu langer Titel oder Beschreibungen) und manche Plattformen unterstützen auch einige proprietäre Tags.

Mehr Kontrolle, mehr Reichweite

Trotzdem haben Sie mit Open Graph deutlich mehr Kontrolle darüber, wie Social-Media-Plattformen die Vorschau auf Ihre Inhalte gestalten. Denn ohne Open-Graph-Tags nutzen Facebook & Co. interne Heuristiken, um den mutmaßlichen Inhalt von Webinhalten zu erkennen, daraus Objekteigenschaften abzuleiten und eine Standardvorschau zu generieren. Das führt häufig zu unpassenden, wenig attraktiven Ergebnissen, die seltener geklickt werden – die Reichweite Ihres Inhalts sinkt.

Eine informative und ansprechende Vorschau hebt sich deutlich von solchen Standardlinks ab und erzielt mehr Aufmerksamkeit und Klicks. Zudem ermöglicht die korrekte Repräsentation als Objekt es den sozialen Netzwerken, Inhalte intelligent zu analysieren und besser passenden Interessenten auszuspielen.

Kurz zusammengefasst bieten Ihnen Open-Graph-Tags diese Vorteile:

Volle Kontrolle über die Vorschau – statt zufälliger Titel oder falsch zugeschnittener Bilder definieren Sie exakt, wie Ihr Inhalt in einem Feed erscheint.
Mehr Reichweiten – gut gestaltete Snippets steigern die Klickrate für Ihre Inhalte.
Indirekter SEO‑Effekt – höhere Verweildauern und Social Signals können sich positiv auf Suchrankings auswirken.

Was sind Open-Graph-Tags?

Open-Graph-Tags sind also spezielle Meta-Tags im <head>-Bereich einer HTML-Seite. Sie geben Auskunft über wichtige Eigenschaften der Seite, die für die Einschätzung ihres Inhalts und ihre Einordnung in soziale Kontexte nützlich sein können. Wird eine Seite auf einer Plattform geteilt, liest deren Crawler diese Informationen aus und die Plattform verwendet sie bei der Generierung der Vorschau.

Syntax und Standard-Vokabular für Open-Graph-Tags regelt das Open Graph Protocol (die offizielle Dokumentation finden Sie auf ogp.me). Es basiert auf RDFa (für Resource Description Framework in attributes), einer Auszeichnungssprache, die semantische Informationen in HTML 5 und ähnliche Sprachen integriert.

OGP erweitert die Standard-HTML-Metadaten mit name-Attribut wie author, description oder keywords durch eine Reihe festgelegter Eigenschaften (mit property-Attribut: <meta property=“…“… />). Ein Open-Graph-Tag weist einer solchen Eigenschaft einen Wert zu (content=“…“) – beispielsweise der in einer Vorschau gewünschte Titel:

<meta property="og:title" content="Open-Graph-Tags richtig einsetzen" />

Die meisten Content-Management-Systeme (CMS) nehmen Ihnen die Arbeit ab, Open-Graph-Tags händisch unterzubringen. Sie bringen dafür meist Plugins mit, die die Tags automatisch generieren, zum Beispiel Yoast SEO für WordPress und Typo3.

Die wichtigsten Open-Graph-Tags im Überblick

Es gibt zahlreiche Open-Graph-Tags, von denen aber laut OGP nur vier Tags obligatorisch sind: für Titel, Typ, Vorschaubild und URL. Die folgenden Tags sind die relevantesten für die tägliche Praxis:

og:type – Objekt-Typ des geteilten Inhalts

Obligatorisch (Facebook verwendet website, wenn kein Type angegeben wird). Dieser Tag entscheidet, als welche Art Objekt Ihr Inhalt in den Social Graph eingegliedert wird. Dies hat auch Einfluss auf das Layout der Vorschauansicht. Das OGP gibt eine Anzahl „globaler“ Typen vor, z. B.:

website
article
book
profile
song
album
movie
episode

Beispiel:

<meta property="og:type" content="article" />

Zum Teil ist die Angabe von zugehörigen Metadaten zu Objekten möglich, zum Beispiel:

<meta property="article:author" content= "https://www.facebook.com/autor-profilseite"/>

og:title – Titel der Seite

Obligatorisch. Dies ist die Überschrift, die bei einem geteilten Beitrag angezeigt wird. Sie sollte Neugier wecken und den geteilten Beitrag prägnant beschreiben. Empfohlene Länge: 60 bis 80 Zeichen.

Beispiel:

<meta property="og:title" content="So steigern Sie Ihre Sichtbarkeit auf LinkedIn" />

og:image – Vorschaubild

Obligatorisch. Ihr Eyecatcher: Ein aufmerksamkeitsstarkes Bild erhöht die Chance, dass Ihr Beitrag auffällt und geklickt wird. Das og:image-Tag bestimmt die URL des Bildes, welches beim Teilen angezeigt werden soll. Achten Sie auf eine ausreichende Auflösung, empfohlen werden mindestens 1200 x 630 Pixel. Facebook empfiehlt mindestens 1080 Pixel Breite und das Format 1,91:1 sowie bei Link-Ads mindestens 600 Pixel und 1:1-Format. Breite und Höhe können ebenfalls per Tag angegeben werden, um das Laden zu optimieren.

Beispiel:

<meta property="og:image" content="https://www.beispiel.de/bild.jpg" /> <meta property="og:image:width" content="1200" /> <meta property="og:image:height" content="630" />

og:url – Zieladresse

Obligatorisch. Hier legen Sie fest, auf welche URL der Klick führen soll. Wählen Sie die kanonische URL der Ressource (also die bei Google repräsentativste Adresse, auf die Sie SEO-optimieren). Die URL wird gleichzeitig zur festen ID des geteilten Objekts im Social Graph.

Beispiel:

<meta property="og:url" content="https://www.beispiel.de/spannender-artikel" />

og:description – Beschreibung des Inhalts

Nicht obligatorisch, aber empfohlen: Eine kurze und prägnante Beschreibung, gern mit Call to Action, macht neugierig, hilft bei der inhaltlichen Einordnung und steigert die Klickrate. Empfohlene Länge: bis maximal 200 Zeichen. Wenn Sie sicher gehen wollen, dass alles angezeigt wird, fassen Sie sich noch kürzer, einige Plattformen kürzen schon nach deutlich unter 100 Zeichen.

Beispiel:

<meta property="og:description" content="So steigern Sie mit Open Graph Tags Ihre Reichweite: die wichtigsten Fakten." />

Weitere nützliche Tags

Je nach Art der Inhalte können zusätzliche Open-Graph-Tags für Sie nützlich sein, etwa:

og:site_name – der Name der übergeordneten Website oder Marke
og:locale – die Sprachversion der Seite, z. B. de_DE
og:audio – URL zu einer begleitenden Audiodatei für das geteilte Objekt
og:video -URL zu einer begleitenden Videodatei für das geteilte Objekt

Praxisbeispiel: Open-Graph-Tags für einen Blogartikel

Nehmen wir an, Sie betreiben einen Blog über Ernährung und veröffentlichen dort einen neuen Artikel zum Thema „Konzentrationsfördernde Lebensmittel“. Beim Teilen in sozialen Netzwerken soll der Beitrag interessant und vertrauenswürdig erscheinen. Konkret wünschen Sie sich für die Vorschau:

ein hochauflösendes Vorschaubild, etwa eine Auswahl gesunder Snacks, das angenehme Assoziationen weckt
einen neugierig machenden Titel: „5 Lebensmittel für mehr Konzentration im Alltag“
eine kurze, ansprechende Beschreibung mit Nutzenversprechen: „Diese fünf Geheimtipps sind ideal für Prüfungen und lange Arbeitstage.“

Das erreichen Sie durch folgende Open-Graph-Metadaten:

HTML

<head> ... <meta property="og:type" content="article" /> <meta property="og:title" content="5 Lebensmittel für mehr Konzentration im Alltag" /> <meta property="og:description" content=" Diese fünf Geheimtipps sind ideal für Prüfungen und lange Arbeitstage." /> <meta property="og:image" content="https://www.ihrblog.de/images/konzentration.jpg" /> <meta property="og:image:width" content="1200" /> <meta property="og:image:height" content="630" /> <meta property="og:url" content="https://www.ihrblog.de/konzentration-5-lebensmittel" /> meta property="og:site_name" content="Corpore Sano - Gesund & Fit" /> <meta property="og:locale" content="de_DE" /> </head>

Häufige Fehler vermeiden

Um aus Open Graph Tags das Optimum herauszuholen, sollten Sie einige Best Practices beachten (mehr Infos bei Facebook: Teilen: Best Practices). Vermeiden Sie insbesondere diese Fehler:

Fehlende obligatorische Tags

Bei fehlenden obligatorischen Tags ignorieren manche Plattformen vorhandene Tags ganz oder nutzen als Ersatz einen Standard-Typ, Facebook zum Beispiel website für den Type. Um die volle Kontrolle zu behalten, sollten Sie mindestens og:type, og:title, og:image und og:url nutzen.

Fehlende Breiten- und Höhentags

Ohne og:image:width und og:image:height lädt Facebook Ihr Bild bei der ersten Vorschau womöglich verzögert. Hinterlegen Sie daher möglichst beide Werte.

Zu generische Titel und Beschreibungen

Nutzen Sie aussagekräftige Texte und vermeiden Sie generische Begriffe wie „Startseite“ oder „Artikel“. Vermitteln Sie klar und prägnant den Mehrwert Ihres Inhalts.

Ungeeignete Bildformate

Plattformen schneiden Bilder automatisch zu. Nutzen Sie lieber das empfohlene Format Ihrer Lieblingsplattform oder unsere Standardempfehlung (1200 x 630 Pixel).

Doppelte Meta-Beschreibungen

Falls Sie bereits meta name=“description“ nutzen, stimmen Sie diese mit og:description ab. Vermeiden Sie widersprüchliche Informationen im Seitenkopf.

Teilen ohne Tests

Mit diversen Tools können Sie die Wirkung Ihrer Tags auf die jeweilige Vorschau testen und Fehler aufspüren. Beispiele sind der Facebook Sharing Debugger oder der LinkedIn Post Inspector. Nutzen Sie diese Werkzeuge, um Ihre Vorschau zu optimieren – insbesondere für geteilte Inhalte auf Ihnen besonders wichtigen Plattformen.

Tipp: Unser Experte gibt hier eine Einführung in die Entwicklung von A/B-Tests

Fazit: Kleine Tags, große Wirkung

Open-Graph-Tags sind kein Hexenwerk – aber ein unterschätztes Werkzeug im digitalen Marketing. Investieren Sie also ein paar Minuten in gut gepflegte Open-Graph-Tags und überlassen Sie die Wirkung Ihrer Inhalte nicht irgendwelchen Algorithmen. Wer Open Graph konsequent und strategisch einsetzt, holt sich die Kontrolle über die Darstellung seiner Inhalte in sozialen Netzwerken zurück, steigert die Klickzahlen und stärkt seine Marke.

Titelmotiv: Photo by Berke Citak on Unsplash

Über
Letzte Artikel

Host Europe

Hinter Ihrem Web-Erfolg steht höchste Leistung. Wir erfüllen auch Ihre Hosting-Wünsche – mit engagierten Experten und führenden Technologien. Host Europe - Professionelle Hosting Services für Privatkunden & Unternehmen.

Letzte Artikel von Host Europe (Alle anzeigen)