Home Blog Tips, Facebook >> WordPress und Facebook – Artikel automatisch mit Facebook Open Graph Metatags versorgen

WordPress und Facebook – Artikel automatisch mit Facebook Open Graph Metatags versorgen

25. Juni 2012

1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading ... Loading ...

Wenn Artikel auf Facebook geteilt und publiziert werden, dann ist oft ein falsches Bild oder was anderes falsch voreingestellt. Facebook bietet mit speziellen Metatags ein Lösung dafür an. Wie das funktioniert beschreibt dieser Artikel.

Facebook versucht natürlich von sich aus, die verlinkte Seite so gut wie möglich darzustellen. Dazu „besucht“ Facebook die Seite und sammelt sich die relevanten Daten. Dazu gehören der Titel der Seite, das Bild und natürlich auch ein Auszug des Textes.

So intelligent Facebook auch sein mag, manchmal geht das in die Hose. Deshalb hat Facebook mit speziellen OpenGraph MetaTags eine Möglichkeit geschaffen den besuchenden Bot zu steuern. Die MetaTags selber sind recht einfach und leicht zu integrieren.

Es gibt zwei Möglichkeiten, die Facebook OpenGraph Metatags in WordPress einzufügen. Zum Einen kann man selber in das Theme eingreifen und zum Anderen einfach ein Plugin installieren. Ich beginne mal mit dem Plugin.

facebook-open-graph-einsatz

Facebook MetaTags via Plugin einfügen

Das Plugin für Facebook MetaTags ist von Shailan geschrieben worden und befindet sich auch im WordPress Plugin Verzeichnis. Da es dort schon recht gut erklärt ist, spare ich mir hier auf die einzelnen Funktionen einzugehen und verweise einfach auf die beiden Seiten.

Facebook Metatags Plugin bei WordPress
Facebook Metatags Plugin Autorenseite

Ich denke damit kommt jeder klar, und ich muss nicht mehr erklären, wie man ein Plugin installiert. Gehen wir also zum nächsten Schritt: Den Eingriff ins Template.

Facebook MetaTags via Template einfügen

Grundsätzlich ist es ja kein Problem mit Hilfe der WordPress Filter und Actions eine Funktion zu schreiben, mit der die Facebook MetaTags in das Template eingefügt werden können. Folgende Funktion verwende ich in meinem Thesis Theme:

function blogverdiener_opengraph() {
$blogverdiener_image_url = wp_get_attachment_image_src( get_post_thumbnail_id(), 'large');
?>
<meta property="og:title" content="<?php the_title(); ?>" />
<meta property="og:url" content="<?php the_permalink(); ?>" />
<meta property="og:site_name" content="<?php bloginfo('name'); ?>" />
<meta property="og:description" content="<?php echo strip_tags(get_the_excerpt($post->ID)); ?>" />
<meta property="fb:app_id" content="APP ID HIER">
<meta property="fb:admins" content="DEINE FB USER ID (ODER USERNAME) HIER"/>
<meta property="og:image" content="<?php echo $blogverdiener_image_url[0] ?>"/>
<?php }

add_action('wp_head', 'blogverdiener_opengraph');

Diese Funktion schreibt man einfach in die functions.php des WordPress Blogs. Wer das Thesis Theme nutzt schreibt die Funktion natürlich in die custom_functions.php hinein.

Eine kleine Erweiterung für alle, die nicht immer ein Bild in ihre Posts einbauen. Es ist möglich auch ein „Default“ Image einzubinden. Dazu ändert man einfach den Bild Link und übergibt eine Variable:

if(!has_post_thumbnail( $post->ID )) { //Kein Bild, dann bitte Default auswählen
        $default_image="http://example.com/image.jpg"; //Hier das Default Bild  einbauen – Logo oder Bild aus der Media-Bibleothek
        echo '<meta property="og:image" content="' . $default_image . '"/>';
    }
    else{
        $thumbnail_src = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'medium' );
        echo '<meta property="og:image" content="' . esc_attr( $thumbnail_src[0] ) . '"/>';
    }
    echo "\n";

Mit dieser einfachen Schleife wird abgefragt ob ein Post Bild vorhanden ist. Falls nicht, soll ein Default Bild ausgegeben werden. Das wird dann automatisch in die OpenGraph MetaTags geschrieben.

Warum die Ausgabe via OpenGraph MetaTags steuern?

Wie schon gesagt, findet Facebook nicht immer die richtigen Zusammenhänge. Wenn man sich aber viel Mühe mit den Beiträgen gibt und dann feststellt, dass die Bilder nicht stimmen, oder schlimmstenfalls der Excerpt etwas völlig anderes ausgibt als er soll, dann kann das durchaus ärgerlich sein, und erfordert wieder Arbeitszeit für die Korrektur.
Facebook zu sagen, was es darstellen soll, ist also eine Arbeitserleichterung für beide Seiten. Ich weiß sicher, dass immer alles richtig ausgelesen wird, und Facebook bekommt die Ausgabe auf dem Silbertablett serviert. Besser geht’s nicht.

Code oder Plugin?

Ein Plugin macht die Arbeit leichter, aber direkt im Template zu coden ist schneller und spart Ressourcen. Es werden sicherlich noch viele nützliche Erweiterungen kommen. Und mehr Services, die in den Blog integriert werden möchten.
Ich persönlich ziehe daher immer vor, solche Dinge im Template zu erledigen, denn dann kann ich nötigenfalls auch Korrekturen daran vornehmen ohne erst im Plugin arbeiten zu müssen, was beim nächsten Update wieder hinfällig wäre. Und die Facebook OpenGraph Metatags werden sicherlich auch noch erweitert. So könnte ich mir vorstellen, dass Facebook demnächst Videos besser einbindet und Bilder Galerien zulässt. Dann sind das bei mir ein paar Zeilen Code, alle anderen müssen auf ein Ugrade des Plugins warten.

Facebook OpenGraph MetaTags – Fazit

Die richtige Darstellung der eigenen Blogartikel auf Facebook kann man mit Hilfe der Facebook OpenGraph MetaTags steuern. Diese Möglichkeit spart Arbeit und Ärger, wenn mal etwas falsch dargestellt wird.
Ich hoffe das ich euch mit dem Artikel ein wenig weiterhelfen konnte. Viel Spaß beim einbauen! Übrigens – wem diese Facebook Open Graph Metatags noch nicht ausreichen, der kann sich hier die volle Breite der Möglichkeiten anschauen!

Bleib in Verbindung via...

RSS abonnieren Facebook Fan werden Follow Me

{ 8 comments… read them below or add one }

1 Luigi Juni 25, 2012 um 18:53

Hallo!
Sehr gut erklärt. Werde ich bei mir versuchen – ohne Plugin versteht sich. Gibt es so etwas auch für Google+ ?

2 Luigi Juni 25, 2012 um 19:13

Ha, wo bekomme ich denn die App ID her?

3 Sascha Juni 25, 2012 um 22:28

@Luigi, entschuldige hab ich glatt vergessen. Reiche ich morgen in einem anderen Artikel nach. Wers nicht erwarten kann: Facebook Developer Center, da bekommt man die APP ID

4 Simone Juni 26, 2012 um 10:14

Also ich hatte auch schon oft Probleme mit Facebook, dass einfach das Bild nicht richtig angezeigt wurde. Ich werde auf jeden Fall mal deine Methode gleich mal testen.

5 Armin Schmethuesen Juni 26, 2012 um 16:53

Hallo Sascha,
danke für den informativen Artikel. Da ich mich derzeit selbst ein wenig mit Wordpress beschäftige ist diese Information sehr wichtig.

Mit freundlichen Grüßen

6 Sascha Juni 26, 2012 um 22:19

Freut mich, wenn es Dir hilft.

LG

7 Karsten Juni 27, 2012 um 11:34

Erst einmal vielen Dank für das Tutorial.

Leider funktioniert es bei mir aber nicht denn ich bekomme einfach keine Beschreibung des Posts zustande. Titel und Titelbild sowie url des Artikels werden angezeigt aber anstatt dem Text im Artikel bekomme ich folgendes:

Du kannst folgende HTML-Tags benutzen:

Was mache ich falsch?

8 Sascha Juni 27, 2012 um 12:03

Hallo Karsten,
ohne Einblick in Deine Einstellungen lässt sich das schwer sagen, aber ich vermute einfach mal, dass Du keinen Excerpt nutzt. Dieser Auszug aus dem Artikel ist Bestandteil der Funktion. Vielleicht schickst Du mir einen Link? Gerne auch per Email. Ein Angabe des Themes wäre auch nicht verkehrt. Vorher einfach mal versuchen den “Auszug” des Artikel mit ein paar Sätzen zu füllen, vielleicht liegt es daran.

LG
Sascha

Leave a Comment

Hinweis: Nur echte Namen verwenden | Keine Verweise auf Unterseiten! Ich lösche solche Kommentare!

Previous post:

Next post:

Letzte Artikel

  • spielcasino.net Für Zwischendurch – Online zocken und Zeit vertreiben
    Verauchte Säle, Whiskey und Pokerkarten. Dazu viele verruchte Gestalten, die an dem Spieltisch ihr letztes Hab und Gut einsetzen. Der Stoff aus dem viele Filme geschmiedet sind. Waren es früher die restlichen Dollars, die von den Cowboys verzockt w...Mehr lesen...
  • Social-Bookmarking-Ranking SEO Case Study #11 – Eine Woche gar nichts mehr
    Eine ganze Woche lang habe ich überhaupt nichts gemacht. Das lag zum einen einer Operation an meinem Knie, die ich auskuriert habe, und zum anderen an dem Testtool, das mir einfach keine neuen Werte ausgegeben hat. Jede Serie braucht einen Abschl...Mehr lesen...
  • Premium Themes aus Deutschland WordPress Theme gesucht? Hier wirst Du fündig!
    Immer mal wieder bastelt ein Blogger am eigenen Blog herum, weil er vielleicht die Optik nicht mehr ertragen kann. Mir geht das regelmäßig einmal im Jahr so. Und oft schaue ich mir dann die ganzen Theme Schmieden an, um herauszufinden, was es denn...Mehr lesen...
  • Social-Bookmarking-Ranking SEO Case Study #10 – Halbzeit
    Die Hälfte ist geschafft. Social Bookmarking im 20 Tage oder 20 Bookmarks Test. Wie viel Ranking bringen Social Bookmarks? Was bringen sie überhaupt? Diese Frage soll diese Case Study beantworten. Deshalb habe ich mir einen Artikel aus meinem Ar...Mehr lesen...
  • Social-Bookmarking-Ranking SEO Case Study #9 – Leichter Abfall des Rankings
    Ein neuer Tag in meiner SEO Case Study. Das Social Bookmarking hat mich bisher um rund 50 Plätze nach oben verschoben und heute ging es wieder ein wenig bergab. Glücklicherweise nur um einen einzigen Platz, den ich hoffentlich heute wieder aufho...Mehr lesen...
  • Social-Bookmarking-Ranking SEO Case Study #8 – Bergsteiger Artikel
    Das Social Bookmarking, das in den letzten Monaten so furchtbar an Strafen von Google gelitten hat, wird derzeit auf die Probe gestellt. Welche Auswirkungen hat es noch auf das Ranking? Und wirkt es überhaupt? Google ist sehr streng gegen alle m...Mehr lesen...
  • Social-Bookmarking-Ranking SEO Case Study #7 – Erneut ein Stückchen hoch
    Nachdem ich gestern über Stagnation geklagt habe, scheint Google meinen Ruf gehört zu haben und schiebt den Artikel wieder drei Plätze nach oben auf Platz 68. Damit habe ich Seite sechs im Ranking erreicht. Das nächste Ziel muss also lauten ...Mehr lesen...
  • Social-Bookmarking-Ranking SEO Case Study #6 – Stagnation
    Social Bookmarking hat nach dem Google Penguin Update an Bedeutung verloren. Darin sind sich fast alle einig. Die Kommentare, die ich hier im Blog oder per Email bekommen habe, belegen das. Dennoch soll meine Case Study dahingehend für mich Klarheit...Mehr lesen...

Warum dieser Blog?

  • Geld verdienen im Internet

    ist der Traum vieler. BlogVerdiener beschäftigt sich mit den Möglichkeiten und vor allem mit den einzelnen Anbietern, die das Geld verdienen im Internet möglich machen. Dabei werden die Anbieter vorgestellt und in gewissen Zeiträumen immer wieder getestet. Das Hauptaugenmerk liegt dabei auf Seriosität. Betreffend der Auszahlungen, aber auch den Support. BlogVerdiener propagiert nicht den schnellen Reichtum im Internet, sondern soll aufzeigen, wie durch Arbeit im Netz Geld verdient wird. Ob als Texter, über Social Media Profile bis hin zu Youtube Videos, hier steht alles auf dem Prüfstand.

    Zusätzlich veröffentliche ich regelmäßig Tutorials, die zeigen sollen, wie man die Anbieter zum Geld verdienen benutzt. Auch ist mir wichtig den Verdienst immer weiter zu steigern. Jeder getestete und hier eingesetzte Anbieter soll monatlich die Auszahlungsgrenze überschreiten. Das Ziel ist es sich ein Online Einkommen aufzubauen, dass so groß ist, und so dauerhaft ist, dass ich mir keine Sorgen um meine Rente machen muss und sogar bereits mit 40 Jahren meinen Antrag stellen kann.

    Geld verdienen im Internet – Mit Arbeit und viel Lernen verbunden, ist es doch eine Beschäftigung die Spaß macht, gleichgesinnte vernetzt und tolle Partnerschaften ermöglicht.

    Ursprünglich war BlogVerdiener ein Hobby. Ich wollte mich mit der Möglichkeit beschäftigen „Geld im Internet“ zu verdienen. Daraus ist aber so viel geworden, dass ich es irgendwann aufschreiben musste und wollte. Zunächst bin ich auf einem anderen Blog gestartet, der aber BlogVerdiener weichen musste.

    Das Geld verdienen im Internet ist eine sehr spannende Sache, die sich ständig entwickelt. Neue Anbieter kommen hinzu, alte verschwinden. Es gibt diverse Themengebiete, in denen man sich selber entwickeln und lernen kann. Das ist der Punkt, der auf mich eine so unglaublich große Faszination ausübt. Und nicht zuletzt natürlich mein stetig wachsender Kontostand.

    Es macht Spaß Anbieter zu testen und dann für den eigenen Blog die Optimierungsarbeit zu leisten. So kann ich lernen, ausprobieren und nebenbei noch Geld verdienen. Dieser Gedanke ist irgendwann aber zu Ende gewesen.

    Jetzt ist das Hauptziel von BlogVerdiener das Geld verdienen im Internet reproduzierbar zu machen, so dass es für jeden funktioniert. Der Aufwand soll minimiert werden und das Ergebnis stetig verbessert.

Highlights

  • Geld verdienen im Internet mit Beispielen zu Belegen gehört sicherlich zu den Highlights hier im Blog. Hin und wieder starte ich 30 Tage Tests, in denen mehrere Anbieter der gleichen Branche gegeneinander antreten müssen. So zum Beispiel Februar 2013. Für diesen Monat gibt es die Mini Verdienst Challenge, in der ich diverse Anbieter, mit denen auf Facebook Geld verdienen möglich ist, gegeneinander antreten ließ. Das Ergebnis ist eine Seite hier im Blog, die alle Details haarklein auflistet und einige Anbieter für jedermann empfiehlt.

    So kann sich auch die Hausfrau einen netten Nebenverdienst aufbauen, ohne vorher teure Produkte zu kaufen oder anders auf die Nase zu fallen.

    Ein weiteres Highlight sind sicherlich die Empfehlungen der getesteten Fachbücher. Geballtes Wissen für angehende Blogger und Webmaster. Hier stecke ich viel Arbeit und Mühe hinein.

    Das dritte erwähnenswerte Highlight sind Tutorials, in denen ich mich mit dem Thesis Theme, CSS3, HTML5 und Wordpress auseinander setze. Hier kann vieles für andere Blogs adaptiert werden.

50 Suchanfragen

Kontakt