Open Graph Tags: Wie Sie Ihre Social Media Links optimieren

von Stephanie Denker 0
Headerbild Open Graph Tags

Durch das Teilen von Links in sozialen Netzwerken wie Facebook oder Twitter werden die eigenen Inhalte einem breiteren Publikum zugänglich gemacht. Eine ungünstige Darstellung der Links, etwa das Fehlen eines Vorschaubildes oder unstimmiger Text, kann sich hierbei negativ auf die Klickattraktivität auswirken. Mithilfe von sog. Open Graph Tags können Sie derartige Probleme vermeiden und Ihre Inhalte optimal für das Teilen vorbereiten.

1. Was sind Open Graph Tags?

Open Graph wurde 2010 von Facebook eingeführt, um das Zusammenspiel mit anderen Websites zu verbessern. Es bietet ein gewisses Maß an Kontrolle darüber, wie Informationen von der eigenen Website an Facebook übertragen werden. Dies geschieht mithilfe von Open Graph Tags (Meta-Daten), die im Bereich einer Website eingebunden werden können. Neben einem Titel, einer Beschreibung und der URL können hier auch eine Kategorie sowie ein Vorschaubild definiert werden.

Andere Social Media Seiten wie Twitter und Google+ greifen ebenfalls auf Metadaten zurück und haben mitunter ihre eigenen Systeme entwickelt (z. B. Twitter Cards). Ungeachtet dessen können alle größeren Plattformen Open Graph Tags erkennen und interpretieren.

2. Einbindung von Open Graph Tags

og:title
Titel, der beim Teilen einer Seite angezeigt werden soll. Dieser sollte möglichst kurz und aussagekräftig sein und etwa 60-90 Zeichen umfassen. Sobald ein Link mehr als 50 Interaktionen („Gefällt mir“, Teilen, Kommentare) erhalten hat, kann der Titel nicht mehr geändert werden.

<meta property=”og:title” content=”Hier steht dein Titel”/>

og:description
Eine kurze und aussagekräftige Beschreibung des Seiteninhalts. Im Gegensatz zur Meta-Description beeinflusst die og:description das SEO Ranking jedoch nicht. Daher ist es nicht notwendig, allzu viel Zeit für die Suche nach optimalen Keywords zu investieren. Die maximale Textlänge beträgt ungefähr 300 Zeichen. Es empfiehlt sich allerdings eine kürzere Beschreibung, damit diese auch auf kleineren Displays vollständig angezeigt wird.

<meta property=”og:description” content=”Hier steht deine Beschreibung.”/>

og:type
Mit diesem Tag wird die Art des Objekts beschrieben, z. B. article, movie oder blog. Eine vollständige Liste finden Sie hier. Wird kein Wert definiert, interpretiert Facebook den Link standardmäßig als „website“.

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

og:url
Hiermit lässt sich die kanonische URL für eine Seite definieren. Wenn man etwa mehrere URLs mit ähnlichem Content hat (z. B. ein Artikel, der sich über mehrere Seiten erstreckt), lässt sich mit diesem Tag eine Seite festlegen, auf die alle Links hinführen (z. B. die Startseite des Artikels).

<meta property=“og:url“ content=“http://www.deinedomain.de/“ />

og:image
Hier wird das Vorschaubild als absolute URL hinterlegt. Für eine optimale Darstellung wird eine Größe von 1200 x 630 Pixeln bei einem Seitenverhältnis von 1,91:1 empfohlen. Außerdem sollte das Bild nicht zu viel Text enthalten, obgleich die einst gültige 20%-Regel im Juni 2016 abgeschafft wurde. Eine automatische Erkennung des Textanteils bietet das Text-Overlay-Tool von Facebook.

<meta property=“og:image“ content=“http://www.deinedomain.de/bildname.jpg“/>

Beispiel: Für den nachfolgenden Link zum Artikel des t3n Magazins wurden unter anderem folgende Open Graph Tags verwendet:

<meta property=“og:title“content=“17 nützliche Social-Media-Tools, -Apps und -Plugins, die deinen Alltag erleichtern“>

<meta property=“og:description“content=“Social-Media-Professionals aufgepasst! In dieser Liste haben wir 17 Helferlein aufgeführt, die euren Arbeitsalltag bereichern.“>

<meta property=“og:type“ content=“article“>

<meta property=“og:url“ content=“http://t3n.de/news/social-media-tools-apps-plugins-609849/“>

Link zum Artikel des t3n Magazins
Abbildung 1: Darstellung von geteilten Links auf Facebook

3. Der Open Graph Debugger

Ein hilfreiches Tool zum Überprüfen von Links ist der Facebook Sharing Debugger (erfordert ein Facebook-Account). Dieser ermöglicht eine Vorschau und gibt Hinweise auf etwaige Fehler.

Eine Abfrage der Startseite von amazon.de liefert beispielsweise folgendes Ergebnis:

Link-Vorschau für die Startseite von amazon.de
Abbildung 2: Link-Vorschau (Sharing Debugger) für die Startseite von amazon.de

Zumal kein Vorschaubild definiert wurde, hat Facebook dieses automatisch generiert. Unglücklicherweise wird das Wort „kindle“ im linken Bereich abgeschnitten.

Werden Änderungen an Open Graph Tags vorgenommen, empfiehlt es sich die Daten mithilfe der Funktion „Fetch new scrape information“ neu zu laden. Andernfalls kann es vorkommen, dass Änderungen in der Vorschau nicht sichtbar sind.

Haben Sie Fragen, Ideen oder Anregungen?

Wir freuen uns auf Ihre Kommentare!

Der Beitrag gefällt? Brüllen Sie ihn heraus!

Einen Kommentar schreiben

Datenschutzerklärung*: Sie erklären sich damit einverstanden, dass Ihre Daten zur Bearbeitung Ihres Anliegens gemäß der Datenschutzerklärung verwendet werden. Weitere Informationen und Widerrufshinweise gibt es in der Datenschutzerklärung.

Zurück