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

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)

Kommentare:

Kommentare zum Beitrag lesen »
Schreibe selbst einen Kommentar »


Weitere Beiträge in dieser Kategorie:

Wer Slideshare nutzt muss jetzt sofort handeln!

Wer Slideshare auf einer deutschen Seite eingebettet hat, muss jetzt dringend handeln! Sonst besteht eine hohe Abmahnungsgefahr! Es hat sich nämlich herausgestellt, dass eine Einbindung von Slideshare-Präsentationen nach deutschem Recht datenschutzwidrig ist. Die Embedds enthalten Tracking-Codes, die Drittanbietern IP-Adresse der … Weiterlesen →

15 Kommentare » Schreibe einen Kommentar

  1. Danke für den Beitrag – mal eine Frage off topic:

    Mit welchem Plugin hast Du “Facebook Kommentare” unter dem Posting eingebunden?

  2. Hi Viktor,

    sowas in der Art hab ich gesucht, ich mag nämlich auch immer weniger irgendwelche Plugins installieren.

    Meine Idee war, das noch flexibler zu machen und das über benutzerdefinierte Felder zu lösen – hast Du da einen Tip wie man dabei vorgehen würde – am besten natürlich mit fallback Methode, damit man nicht alle Artikel nachrüsten muss?

    Danke & Gruß
    Tom

  3. hey, du beschreibst oben, dass du das problem hattest, wenn metatags über plugin gesetzt werden, dass die titelzeile auf google+ zuweilen doppelt und dreifach erscheint; gleiches problem habe ich gerade; laut debugger von facebook haben zwei plugin (YOAST SEO und WORDBOOKER) Metatags geschrieben. leider habe ich keine ahnung, wie und wo ich das rückgängig machen kann. in der header.php des themes stehen sie ja nicht.

    kannst du mir da irgendwie helfen?

    schöne grüße,

    fränk

  4. Dann benutzt Du mindestens 3 Plugins, die diese Metadaten schreiben. In der header.php sind die Einträge nicht drin, weil WordPress diese erst mit wp_head() aus den Plugins ausliest.

    Entweder man kann es in den Plugins deaktivieren, so dass es nur noch eines schreibt oder Du schmeißt die (doppelten) SEO Plugins runter oder nutzt wpSEO mit den hier beschriebenen Optionen

  5. Das mit der Beschreibung sehe ich genauso. Bei dem Code komplett crasht aber WordPress. Ansonsten eine gute Idee. Aber ich brauche es so das man nur ein Bild angeben kann wenn kein Artikel Bild gefunden wird. Lässt sich das realisieren (auch per PayPal…..) ?

    Was meinst Du eigentlich mit Large Thumbnail. Extra ein Plugin das Thumbnails erzeugt?

    Habe es bisher so gelöst, aber wie gesagt fehlt mir noch eine Lösung mit dem jeweiligen Artikelbild:

    <meta property="og:title" content="”/>

    <meta property="og:title" content=" | azella.de/blog”/>

    Grüße

  6. Hier ist alles Pluginfrei und bei mir funzt es auch. Ich schau mal wo es dran hängen könnte

    Das Large Thumbnail ist eins der drei von WordPress erzeugten Größen

    Wie jetzt? PayPal? he? Verstehe nur Bahnhof :)

  7. Mit PayPal war gegen Bezahlung gemeint, hehe. Danke Dir für die Anpassung, aber jetzt habe ich schon.

    Also bei deinem Code ging gar nichts mehr, wurde nur noch der Hintergrund geladen. Kann auch an meinem komischen Theme liegen. Habe öfter mal Probs, brauch oft eine Sonderlösung.

  8. das selbe für Google Plus:

    <!– Update your html tag to include the itemscope and itemtype attributes –>
    <html itemscope itemtype=”http://schema.org/Blog”>

    <!– Add the following three tags inside head –>
    <meta itemprop=”name” content=”Title of your content”>
    <meta itemprop=”description” content=”This would be a description of the content your users are sharing”>
    <meta itemprop=”image” content=”http://domain.de/test.jpg”>
    http://www.google.com/webmasters/+1/button/#customize-snippet

Hinterlasse eine Antwort

Pflichtfelder sind mit * markiert.


Du kannst folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>