Open Graph Meta Informationen in WordPress Beiträge einfügen

Viktor Dite, Autor des Beitrags

Von - Publiziert in Webdevelopment Blog über MySQL & PHP
Dipl. Informatiker und Tech-Blogger seit 2006.


Open Graph in WordPress ohne Plugins

Was ist Open Graph?

Beim Teilen von Links in Social Media Netzwerken wie Facebook oder Google+ werden nicht nur die URL, sondern auch der Titel, die Beschreibung und ein Bild angezeigt. In den Google Suchergebnissen kann man die Beschreibung durch die Meta-Description und einen Titel durch den Meta-Title angeben. Fürs Social Media funktionieren diese Tags nur bedingt. Hier solltet Ihr den Open Graph Protocol benutzen.

Wozu Open Graph?


Benutze ich kein Open Graph, sucht sich Facebook und Google+ meistens „nur“ den Meta-Title und irgendein Bild von der Webseite aus und verwendet es als Thumbnail im Link-Post oder Like:

Damit das nicht passiert, muss unbedingt das wichtige Bild und der aussagekräftigste Titel (Post Title, anstatt dem Meta-Title) per Open Graph Facebook und Co mitgeteilt werden:
Open Graph in WordPress einbauen

Wie baue ich aber die Open Graph Metadaten in WordPress ein?

Ich habe schon zahlreiche Plugins ausprobiert, die mir jedoch bisher nicht geholfen haben. Entweder machen die murks oder spucken die Metatags zwei oder dreifach aus. Folge war, dass in den Beiträgen, Shares und Likes der Titel und die Description immer doppelt oder dreifach drin stand.

Open Graph lässt sich aber auch sehr leicht manuell in ein WordPress Theme einbauen.
Dazu musst Du nur in der header.php des Themes nur folgendes einfügen:

<?php if (is_single() || is_page() ) { ?>
  <meta property="og:title" content="<?php utf8_decode(single_post_title());?>"/>
  <?php if ( has_post_thumbnail()) { 
    $large_image_url = wp_get_attachment_image_src( get_post_thumbnail_id(), 'large'); ?>
    <meta property="og:image" content="<?php echo $large_image_url['0'] ?>"/>
  <?php }
        else{ ?>
    <meta property="og:image" content="[DEIN STANDARDBILD LINK HIER]"/>
  <?php } ?>
  <meta property="og:url" content="<?php echo get_permalink();?>?utm_source=social_media"/>
<?php } ?>	

Auf diese Weise werden die Open Graph Properties og:title, og:url und og:image eingefügt. Das Bild bedient sich dabei dem Artikelbild von WordPress. Dazu muss bei jedem Artikel ein Thumbnail hinzugefügt werden. og:url lohnt in diesem Fall eigentlich nur, um den Traffic von den gesharten und gelikten Posts mit dem utm_source messen zu können

Und was ist mit der Description?

Ich habe bisher beobachtet, dass die Meta Description genau so in Facebook und Google+ übernommen wird. Eine eigene Auszeichnung wäre hier nur sinnvoll, wenn für Social Media ein anderer Text benutzt werden soll, als für Google. Zudem lässt sich die Description bei WordPress bisher nur über Plugins realisieren (bspw. über wpSEO. Ein expliziter Zugriff auf die wpSEO Description ist jedoch erst ab Version 3.0 möglich)


Letzte Änderung: