Achtung: dieser Beitrag ist älter. Es kann sein, dass manche Inhalte nicht mehr aktuell sind.

Open Graph Meta Tags für WordPress-Artikel

Open Graph Logo
Open Graph Protokoll – semantische Auszeichnungssprache für eine Vielzahl von Inhaltstypen (Foto: Logo, The Open Graph protocol)

Es ist kein Geheimnis, dass soziale Netzwerke wie Facebook, Google+, Twitter, XING & Co mittlerweile äußerst lukrative Trafficquellen für jede Art von Webseite sind. Nur leider ist es noch immer bei vielen Webseiten (z. B. auch WordPress Blogs) ein Problem, dass die für's Teilen der Inhalte verwendeten Informationen oft nicht die eigentlich gewünschten Informationen sind. Ohne Open Graph Meta Tags besitzt man relativ wenig Einfluss auf die von dem jeweiligen Netzwerk gewählte Beschreibung + Bild, welche beim Teilen von Inhalten verwendet werden.

Die sozialen Netzwerke gehen bei der Auswahl von Informationen zum Teilen von Inhalten unterschiedlich vor. Facebook und Google+ wählen den Meta-Title und automatisch ein Bild der zu teilenden Seite aus. Das Bild kann dabei ein beliebiges der zu teilenden Seite sein. Wenn man Pech hat, ist das auserwählte Bild seitens des sozialen Netzwerks sogar ein Werbebanner. Das ausgewählte Bild wird dann als Vorschaubild (Thumbnail) im Empfehlungs-Post verwendet. XING, dass soziale Netzwerk für Beruf und Karriere, kann beispielsweise nur dann ein Bild beim Link-Teilen verwenden, wenn dieses explitzit mit Open Graph Meta Tags ausgezeichnet ist.

WordPress-Artikel ohne Open Graph Meta Tags

Die Informationen (z. B. ein Artikelbild) zum Teilen können von den sozialen Netzwerken sehr ungünstig gewählt werden, wenn diese nicht mithilfe der Open Graph Meta Tags korrekt hinterlegt werden. Nachfolgend dazu ein Beispiel (Bild vom Facebook Teilen-Dialog):

WordPress ohne Open Graph Meta Tags
Ein auf der Seite vorhandener Werbebanner wird anstelle des Artikelbildes beim Teilen von Facebook verwendet

WordPress-Artikel mit Open Graph Meta Tags

Nachfolgend der Facebook Teilen-Dialog mit entsprechend hinterlegten Open Graph Meta Tags:

WordPress-Artikel mit Open Meta Graph Tags
Das im WordPress festgelegte Artikelbild wird korrekt beim Teilen von Facebook verwendet

Exakte Informationen zum Teilen von Inhalten hinterlegen

Es existieren diverse Technologien und Schemata. Jedoch gibt es nicht eine einzige Technologie, die genügend Möglichkeiten zur Verfügung stellt, um eine beliebige Webseite komplett innerhalb des Social Graph zu repräsentieren. Das Open Graph Protokoll baut auf vorhandenen Technologien auf und bietet Entwicklern eine einfache Möglichkeit, Webseiten als Graph-Objekte zu definieren. Dazu müssen lediglich die gewünschten Informationen durch Meta-Tags auf der verweisenden Seite gesetzt werden.

Open Graph Meta Tags für WordPress-Artikel

Ich habe in letzter Zeit einige WordPress Plugins installiert, welche mir automatisch und korrekt Open Graph Meta Tags in WordPress-Artikel einfügen sollten. Das klappte mal mehr und weniger gut. Ausprobiert habe ich insgesamt eine Handvoll verschiedener Plugins, doch konnte mich keines davon überzeigen, geschweige denn zufriedenstellen.

Eines der getesteten Plugins hat statt dem Artikelbild lediglich immer das 1. Bild aus dem Artikeltext genommen. Ein Weiteres nahm aus dem Artikeltext den Caption-Shortcode (Bildbeschreibung eines eingefügten WordPress-Artikelbildes) nicht entfernt und somit in der Beschreibung mit ausgegeben. Aus diesen Gründen habe ich selbst die Finger über die Tastatur fliegen lassen und gebe nun nach meinen Vorstellung die Open Graph Meta Tags für diesen Blog aus. Damit für WordPress-Artikel die Open Graph Meta Tags korrekt erstellt werden, muss der nachfolgende Code einfach in die „functions.php„- zu finden im Ordnerpfad „/wp-content/themes/dein-theme-name/“ – eingefügt werden:

[show-sourcecode]

Sollte der Code zur Integration der Open Graph Meta Tags weitergeholfen haben, würde ich mich über einen Kommentar freuen. Auch bei Problemen oder Verbesserungsvorschlägen ist Feedback ausdrücklich erwünscht.

[Update, 31.05.2012 22:00 Uhr] Ich habe auf vielfachen Wunsch ein WordPress Plugin aus dem dargestellten Code erstellt. An mehreren Stellen habe ich den Code stark optimiert und mit weiteren Funktionen angereichert. Einfach auf der nachfolgenden Seite anschauen und via WordPress herunterladen / installieren: http://omaxis.de/wordpress-plugins/wp-open-graph-meta/

8 Antworten zu "Open Graph Meta Tags für WordPress-Artikel"

  1. Sehr schön, genau sowas habe ich gesucht. Denn ich habe auch verschiedene Plugins durchprobiert und nichts hat richtig funktioniert.

    Reply
  2. Danke Du bist einfach spitze!!! Habe etliche Plugins probiert, danach mir selbst meinen Code geschrieben aber irgendwie hat es nie geklappt…. manchmal fand er das Artikelbild, dann wieder mal nicht… also hab ich mal schnell Dein Plugin installiert und siehe da, auf Anhieb passt es… das kann man nicht besser machen!!! Ich werde Dich weiterempfehlen, kenne genug Leute die das gleiche Problem haben 😉

    Grüße aus Leipzig
    Tobias

    Reply
  3. Sehr geile Sache!
    Macht genau was es soll, Plugin hab ich nicht gebraucht. Mir gings nur um ne schnelle und einfache Einbindung des Thumbnails von Beiträgen als og:image… Und da hab ich bisher nix zu gefunden, sehr gut geschrieben. Code ist einwandfrei, auch wenn ich ihn ein wenig abgewandelt verwende. 🙂

    Grüße aus der Wetterau
    Pascal

    Reply

Schreibe einen Kommentar zu Jan Antworten abbrechen