Was sind OG Open Graph Tags für Facebook?



Letzte Aktualisierung: 12:34 30.08.2017

Damit Deine Blogbeiträge bei Facebook richtig dargestellt werden können, ist es notwendig die richtigen Open Graph Tags (OG) in der Meta Daten Deines Blogbeitrags zu hinterlegen.
Aber was sind Open Graph Tags für Facebook und warum sind sie so wichtig?

Facebook hat Open Graph Meta Tags im Jahr 2010 entwickelt, um es Usern einfacher zu machen, Links zu Webseiten mit ihren Freunden und Followern auf Facebook zu teilen.
Open Graph Tags sind Parameter im HTML-Code deiner Webseite, durch die Facebook weiß, welches Bild, welcher Titel und welche Beschreibung in der Link-Vorschau angezeigt werden soll. Open Graph Tags sorgen also dafür, dass ein Link, den du in Dein Status Update kopiert hast, vernünftig dargestellt wird.

Warum brauche ich Open Graph Tags für Facebook?

Facebook hat die Richtlinien für die Darstellung von geposteten Link Posts geändert. Facebook stellt nicht mehr standardmäßig das Beitragsbild oder das ausgewählte Bild für die Postvorschau dar, sondern ausschließlich Bilder, die über die Open Graph (OG) Meta Tags auf der Webseite des Blogbeitrags definiert sind. Falls keine OG Meta Tags gesetzt sind, zieht sich Facebook ein beliebiges Bild des Beitrags oder des Blogs. Erfüllen die in den OG Meta Tags genannten Images nicht Facebooks Anforderungen an die Bildgröße, wird ebenfalls ein beliebiges anderes Bild gewählt.
Bitte stell sicher, dass das ausgewählte Bild die Voraussetzungen für die Bildgrößen auf Facebook erfüllt.

Hier findest Du mehr zur Informationen zur optimalen Bildgröße für Facebook Posts.

Was sind die wichtigsten Open Graph (OG) Tags für Facebook?

Damit Facebook alle wichtigen Informationen hat, die es braucht, um aus Deinem Link eine Link-Vorschau mit dem richtigen Bild, Titel und der richtigen Beschreibung zu generieren, solltest Du die folgenden wichtigen Open Graph Tags festlegen:

  • og:image
  • og:image:width
  • og:image:height
  • og:image:alt
  • og:image:type
  • og:title
  • og:description
  • og:locale

Einige Open Graph Tags werden Beitrags spezifisch automatisch gesetzt bei aktivierten Einstellungen in Blog2Social und erfordern keine Konfiguration:

  • og:type
  • og:article:published_time
  • og:article:modified_time
  • og:article:tag

Der Open Graph Tag: og:image

Der og:image tag ist der wichtigste Open Graph Tag oder zumindest der, bei dem es am meisten auffällt, wenn er fehlt oder fehlerhaft ist. Wie bereits erwähnt, ist dieser OG Tag für Bildinformationen verantwortlich. Die Open Graph Tags og:image:width und og:image:height übergeben Bild-spezifische Informationen über die Höhe und die Breite eines Open Graph Images. Der Open Graph Tag og:image:alt gibt die Alt-Beschreibung des verwendeten Beitragbildes an. Der Alt-Tag oder auch “Alternativer Tag” wird von Screen-Readern, Social-Media-Netzwerken und Suchmaschinen verwendet, falls verwendete Grafiken nicht angezeigt werden können. Der Open Graph-Tag og:image:alt enthält die alternative Text-Kurzbeschreibung des Bildes, die in der WordPress-Mediengalerie definiert werden kann. Wenn Facebook diesen Parameter nicht finden kann, durchsucht es den Code Deiner kompletten Webseite nach einem Bild, was dazu führen kann, dass ein zufälliges Bild in der Linkvorschau angezeigt wird.

Beispiel:

<meta property="og:image" content="https://www.blog2social.com/de/blog/wp-content/uploads/2018/03/blog2social-webapp-beitragsbild.png" />
<meta property="og:image:width" content="1000"/>
<meta property="og:image:height" content="1000"/>
<meta property="og:image:type" content="image/jpeg"/>
<meta property="og:image:alt" content="Blog2Social"/>

Der Open Graph Tag: og:title

Jeder gute Facebook Link-Post braucht einen interessanten Titel, den Deine Follower anklicken wollen.
Genau dafür ist der og:title tag zuständig. Er stellt Facebook die Information zur Verfügung, welcher Text fettgedruckt in der automatischen Link-Vorschau als Titel dargestellt werden soll.

Beispiel:

<meta property=”og:title” content=”A Complete Guide To Social Media Sharing” />

Der Open Graph Tag: og:description

Neben dem Titel deines Link-Posts, entscheidet auch eine kurze, interessante Beschreibung Deines Blogartikels darüber, ob Dein Link geklickt wird oder nicht.
Der og:description tag legt fest, welchen Beschreibungstext Deine Follower unter dem Titel in der Facebook Link-Vorschau sehen.

Tipp: Bleibe unter 200 Zeichen, aber gestalte den Beschreibungstext möglichst interessant, um damit die Aufmerksamkeit Deiner Leser zu erwecken.

Beispiel:

<meta property=”og:description” content=”Social media automation tools can boost your efficiency.” />

Wie lege ich Open Graph Tags für Facebook fest?

Es gibt verschiedene Möglichkeiten Open Graph Tags in den Meta Daten Deiner Webseite festzulegen, sowie Tools, die Dir dabei helfen.
Die einfachste und effizienteste Möglichkeit ist die, Deine Open Graph Tags festzulegen, während Du Deine Blogartikel mit dem Social Media Automatisierungs Plugin Blog2Social auf Facebook teilst.  

Mit Blog2Social ist es möglich, das Bild für den Link Post gezielt auszuwählen. Blog2Social übergibt die Daten automatisch als OG Meta Tags Parameter an die Seite des Beitrags, sodass das Bild als Vorschaubild zum Link Post korrekt dargestellt wird.

Klicke dazu einfach auf das Bild, das Dir im Blog2Social Editor angezeigt wird und wähle das gewünschte Bild aus.
Selbiges gilt für das Festlegen des Texts für die og:title und og: description tags für Deine Blogposts.
Klicke dazu einfach in die entsprechenden Felder in der Blog2Social Post-Vorschau und tippe einen passenden Titel und eine interessante Beschreibung ein, die im Facebook-Feed Deines Profils, Deiner Seite oder Deiner Gruppe angezeigt werden soll.

Wenn Du nicht willst, dass Blog2Social die OG Meta Tags Deiner Beitragsseite ändert, dann deaktiviere diese Funktion. Gehe dazu in die Blog2Social Einstellungen, wähle den Reiter “Social Meta Data” aus und entferne den Haken im Kontrollkästchen. Bitte bedenke, dass dann Facebook die Änderungen, die Du in der Beitragsvorschau an Bild, Titel und Beschreibung vornimmst, nicht übernimmt.

Pfad: Deine WordPress-Installation -> Blog2Social -> Einstellungen -> Social Meta Angaben

Tags: Facebook, OG, Open Graph Parameter