Open Graph: Alles Wissenswerte im Überblick

Das Open Graph Protocol (OGP) stellt sicher, dass Ihre geteilten URLs auf Social Media nutzerfreundlich dargestellt werden. So erkennt zum Beispiel der jeweilige Crawler alle zielgruppenrelevanten Informationen des Links und spielt sie attraktiv im Feed von Facebook, LinkedIn, Twitter oder Pinterest aus.

Wir klären hier, was das Open Graph Protocol genau ist, welche Vorteile es Ihnen und Ihrer Kundschaft bietet und welche grundlegenden Open Graph Tags Sie kennen sollten.

Was ist Open Graph?

Open Graph-Metadaten helfen einem Crawler bei der Identifikation von relevanten Inhalten für Social Media wie Blogbeiträge, Produktseiten oder Websites. Die ursprünglich eigens für Facebook Posts entwickelte Technik stellt eine Vorschau dar, die optimal auf die Bedürfnisse einer Zielgruppe zugeschnitten ist: mit knackiger Überschrift, einem passenden Bild und Text.

Mit Open Graph Tags die Kontrolle über geteilte URLs zurückerhalten

Sicher sind auch Ihnen häufig schon Posts begegnet, die keine richtige Aussage hatten und auf denen Sie nicht auf den ersten Blick erkennen konnten, worum es sich bei dem Link handelt. Was passiert dann? Sie scrollen direkt weiter und verpassen womöglich einen wertvollen Link-Tipp aus Ihrem Netzwerk.

Open Graph Tags, auch OG Tags genannt, verwandeln Webseiten in ein soziales Objekt, welches die Social Media Plattformen auslesen können. Links von externen Quellen erhalten eine umfassende Vorschau, die bei Nutzern und Nutzerinnen Neugierde weckt und sie zum Teilen und Liken animiert.

Facebook liest Webseiten, Onlineshops und Blogs automatisch aus. Bei der Suche nach passenden Informationen zu der definierten URL wählt der Crawler zufällig Bild und Text aus, wenn keine Open Graph-Metadaten im HTML-Code der Website hinterlegt wurden. Ein Glücksspiel! Denn selten gelingt die Darstellung in den sozialen Netzwerken im Sinne der Websitebetreiber.

Mit Open Graph Meta Tags sparen Sie Facebook und anderen Plattformen das Rätselraten. Die Facebook-Suchmaschine erkennt anhand der eingebauten OG-Tags sofort, welche Inhalte zu der geteilten URL gehören.

Die Open Graph Tags werden hierzu im Quellcode des HTML-Headers Ihrer Website eingebaut. Für die Nutzer und Nutzerinnen sind diese OG-Tags nicht sichtbar. Beim Teilen der URLs wird ihnen automatisch eine optimierte Link-Vorschau mit Titel, Beschreibung und passendem Bild angezeigt.

So fügen Sie das Open Graph Protocol zu Ihrer Website hinzu

Bei statischen Webseiten werden die Metadaten über <meta/>-Tags im HTML-Header hinterlegt. Das braucht Ressourcen und kostbare Zeit. Verwenden Sie WordPress oder das HubSpot CMS, gestaltet sich diese Anpassung deutlich einfacher. Für das Open Souce CMS WordPress ist das Plugin Yoast SEO die erste Wahl.

Über die Open Graph Tags im Quellcode wird zum Beispiel ein Blogbeitrag als Artikel spezifiziert, Titel, Beschreibung und Bild zu dem jeweiligen Blogpost festgelegt. Weitere Informationen können Sie auf der offiziellen The Open Graph Protocol Infoseite von Facebook nachlesen.

Diese Open Graph Meta Tags sollten Sie kennen

Open Graph Meta Tags helfen Ihnen, ein bestimmtes Zielpublikum auf Ihre Website zu locken. Sie sorgen zudem für eine höhere Verweildauer auf der URL. Für eine gute Darstellung der geteilten Inhalte bei Facebook, Pinterest, LinkedIn oder Twitter ist es ausreichend, die Standard Open Graph Tags zu kennen.

Die Übermittlung der Informationen erfolgt, wie üblich bei HTML, in englischer Sprache. Dazu zählen die folgenden vier Standard OG Tags:

• og:title: Vergeben Sie einen Titel, der Leser und Leserinnen neugierig macht.
• og:image: Wählen Sie ein zur URL passendes Bild aus.
• og:type: Zeigen Sie an, worum es sich bei dem Objekt handelt – Blogartikel, Website, Video oder Audio.
• og:url: Wählen Sie eine passende URL, die Nutzer und Nutzerinnen unter dem angegebenen Link erwarten.

Optionale OG Tags sind:

• og:audio: enthält die URL zu einer Audiodatei, die zu diesem Objekt gehört.
• og:description: beschreibt mit ein bis zwei Sätzen, wohin der Link führt.
• og:locale: Hinweis auf das Land, in dem das Objekt verfasst wurde, beispielsweise DE, EN oder US.
• og:site name: wenn der Link Teil einer größeren Website ist.
• og:video: enthält die URL zu einem passenden Video.

og:image Tag: Passende Bilder mit Facebook Open Graph zuordnen

Perfekt dargestellte Links sind heute Grundvoraussetzung, dass Nutzer und Nutzerinnen Ihre Inhalte mit anderen in ihrem Netzwerk teilen. Mit dem Tag og:image geben Sie die URL eines Bildes an, was angezeigt werden soll, wenn jemand Ihren Inhalt auf Facebook teilt.

Achten Sie bei der Bildauswahl auf das richtige Format und Größe des Bildes, denn das ist je nach Plattform unterschiedlich. Postings mit zu kleinen oder ungünstig abgeschnittenen Bilder wirken unprofessionell.

Facebook gibt zum Beispiel folgende Empfehlungen für das Teilen von Inhalten:

• Bevorzugtes Format bei Facebook ist 1,91:1
• Bilder müssen mindestens 200 x 200 Pixel groß sein
• Größe der Bilddatei darf 8 MB nicht übersteigen
• Die beste Anzeige auf Geräten mit hoher Auflösung erhalten Sie bei Bildern mit einer Größe von mindestens 1200 x 630 Pixel
• Für die Anzeige von Link-Seitenbeiträgen mit größeren Bildern sollten die Bilder mindestens eine Größe von 600 x 315 Pixel haben

og:title Tag: Ein fesselnder Titel macht die Kundschaft neugierig

Das Element og:title steht bei einem Social Media Post an prominenter Stelle, nämlich direkt neben dem Bild. Ein überzeugender Titel verleitet Interessenten dazu, Ihre Website, den Onlineshop oder das Onlinemagazin zu besuchen.

Die maximale Länge beträgt 95 Zeichen, ohne Zeilenumbruch sind beim og:title 50 Zeichen möglich.

Wie Sie den og:title Tag am besten in den Quellcode integrieren, zeigt Ihnen dieses Beispiel:

So sieht das Ganze dann als geteilter Post bei Facebook aus:

Quelle: Screenshot Facebook

Darauf sollten Sie bei der Verwendung von Twitter Open Graph Tags achten

Open Graph-Metadaten kommen auch bei Twitter zum Einsatz. Die sogenannten Twitter Cards sehen ähnlich aus wie Postings bei LinkedIn und Facebook.

Es handelt sich dabei um erweiterte Tweets, die mit zusätzlichem Content angereichert sind und auf eine externe Quelle verlinken. Auch sie sind ausgestattet mit einem Bild, Titel, der URL und einer kurzen Link-Beschreibung.

Um Twitter Cards nutzen zu können, muss die Anwendung erst eingerichtet werden. Wurde diese nicht installiert, greift Twitter auf vorhandene Open Graph Tags zurück. Der Aufbau der Twitter Tags unterscheidet sich nur minimal von den klassischen Open Graph Tags, wie diese Tabelle zeigt:

Bevor Sie Inhalte in Social Media teilen, sollten Sie alle Elemente mit dem Open Graph Debugger von Facebook auf mögliche Fehler und Darstellung überprüfen. Der Debugger ist ein hilfreiches Werkzeug, um URLs zu checken und die Link-Vorschau neu crawlen zu lassen.

Sie erhalten von dem Sharing Debugger nach Eingabe der URL Hinweise auf Fehler und Verbesserungen für die Meta Tags. Auch Fehler im HTML-Code Ihrer Website erkennt das Tool zuverlässig.

Fazit: Open Graph Meta Tags optimieren Ihren Social Media Auftritt

Es liegt an Ihnen, ob Ihre Posts bei Facebook und Co ansprechend aussehen und neue Kundschaft anziehen. Beim Teilen von Links im Social Web garantiert das Hinzufügen von Open Graph-Metadaten einen gelungenen Auftritt. Mit dem HubSpot CMS oder dem WordPress Plugin Yoast lassen sich diese Tags, auch ohne umfassende Programmierkenntnisse, schnell und leicht ergänzen.

Titelbild: BRO Vector/ iStock / Getty Images Plus