Skip to content

Open Graph Protocol – Website optimieren für Facebook

Bild Open Graph Protocol

Um was handelt es sich dabei, für was ist es gut?

Einige kennen es ja vielleicht, man will einen Beitrag von einer Website auf Facebook teilen, plötzlich ist ein Bild da, welches man gar nicht wollte, der Text passt nicht usw...

Die Lösung ist simple, "og meta tags" implementieren und es kommt das rüber, was man wollte!

Das Protokoll "Open Graph" definiert anhand von "og meta tags", was auf der Social Media Plattform Facebook angezeigt werden soll.

Damit Beiträge genau so angezeigt werden wie du es gerne hättest, ist es notwendig die entsprechenden Werte auf seiner Website oder Beiträgen zu hinterlegen.

Wir sprechen im wesentlichen von einer korrekten Übermittlung von:

  • Title
  • Beschreibung
  • Bild

Und so sieht es dann aus, anhand der Website "webfokus.at", inkl. Rechtschreibfehler 🙂

screenshot fuer beitrag open graph protocol

Wo hinterlege ich "og meta tags"?

Die "og meta tags" hinterlegst du im "header" deiner Website. Bei Beträgen über ein CMS System wie z.B. WordPress, hinterlegst du dies im Beitrag selbst, oder auf der erstellten Seite - den Rest erledigt das CMS - sofern alles gut geht.

Um mir das Leben einfacher zu machen, lasse ich das über ein SEO Plugin ( hier klicken um zum Yoast SEO Plugin zu gelangen) erledigen.

Das Plugin hat viele weitere Vorteile, aber das ist hier nicht das Thema - grundsätzlich kann ich es sehr empfehlen.

Manuell eingepflegt in einer Website, im header Bereich

Dazu öffnest du den Editor deiner Wahl und schreibst den Eintrag hinein. Sollte Facebook danach aber immer noch falsche Werte anzeigen, musst du Facebook anweisen, den Beitrag neu zu laden. Dazu gehst du auf den Facebook Debugger, gibst die Url ein und schon sollte es klappen. Hier klicken um zum Facebook Debugger zu gelangen

<meta property="og:title" content="Dein Titel"/>
<meta property="og:url" content="Website Url"/>
<meta property="og:description" content="Beschreibung" />
<meta property="og:image" content="gewünschtes Bild - Url" />
<meta property="og:locale" content="de_DE" />
<meta property="og:type" content="Website" />
<meta property="og:site_name" content="Seitenname" />

Dies ist nur eine Auswahl der "og meta tags", welche ich aktuell verwende. Viele weitere Möglichkeiten findest du auf dieser Website vor: Hier klicken um die Website "Open Graph" zu besuchen 

Einpflegen bei WordPress mit Hilfe des Yoast SEO Plugin

Solltest du dich für das Yoast SEO Plugin entscheiden, fügst du für jeden Beitrag ganz einfach im unteren Bereich die entsprechenden Werte hinzu (sofern du etwas anderes haben möchtest, ansonsten erledigt das Plugin die Aufgabe ganz gut selbst), dies sieht dann so aus (bitte auf das Bild klicken, du siehst es dann in voller Größe):

screenshot fuer beitrag open graph protocol 2 yoast plugin

Auch hier gilt, bei Problemen den Debugger von Facebook aufrufen, vollständige Url eingeben und schon sollte es klappen!


Linksammlung

The Open Graph - Ausführliche Erklärung, auf Englisch

Yoast Plugin für WordPress - sehr empfehlenswert

Facebook Debugger - wenn es etwas "Hilfe" braucht

Facebook Seite von WebFokus - freuen uns über Besuch!

Bitte hinterlasse eine Bewertung, gerne auch ein Kommentar, vielen Dank!

Sending
User Review
5 (11 votes)

2 Kommentare

  1. Veröffentlich von Peter Steiner am Januar 30, 2016 um 8:52 am

    Lieber Roman!

    Danke für den Beitrag, hat uns / mir sehr sehr viel weitergeholfen!
    Nun sind wir endlich in der Lage, Beiträge auch auf Social Media Kanälen optimal zu präsentieren,

    Alles Liebe, Peter Steiner

    • Veröffentlich von Roman Fischer am Januar 31, 2016 um 1:25 pm

      Gerne, freut mich!

      Liebe Grüße
      Roman Fischer

Kommentar verfassen

Scroll To Top