Facebook Meta & WordPress

Im Artikel Meta Tags für Facebook habe ich vor kurzem Beschrieben, wie man den Header seiner Website fit für Facebook macht. Hier erkläre ich nun, wie man diese Angaben anpasst, damit sie unter WordPress dynamisch mit den angezeigten Inhalten befüllt werden.

Vor der Anpassung sollte man sich den Artikel Meta Tags für Facebook gründlich durchgelesen und die Erweiterung des <HTML> Tags, um die Seite zu einem Element des Open Graphs zu machen, vorgenommen haben.

Unterscheidung zwischen dynamischen und statischen Angaben

Ein Teil der Meta Tags für Facebook sind für jede Seite des Blogs gleich. Dazu gehören die Angaben zur Geolocation, der Seitentyp und die optionale Verknüpfung mit Fanpage und Admins.

og:locality Stadt des Blogs (“Stuttgart”)
og:country-name Land (“Germany”)
og:latitude und og:longitude geben die Längen/Breitenangaben an
og:type dient der Typisierung der Seite
og:site_name dies ist der Name der Homepage – nicht der Name des Artikels, der verlinkt wird.
fb:admins – die IDs der Admins, bei mehreren Admins mit Komma getrennt.
fb:page_id – die ID der Fanpage, mit der man die Website verbinden möchte.

Bleiben die Angaben, die man möglichst dynamisch für jeden Artikel individuell angibt:

og:image gibt den Pfad zu dem Thumbnail an, das später neben dem Eintrag angezeigt werden soll.
og:title gibt den Titel der Seite an
og:description eine Kurze Beschreibung des Inhaltes
og:url gibt die URL der zu verlinkenden Website an.

Ziel ist es, diese individuellen Angaben dynamisch mit Inhalten aus dem Artikel zu füllen.

WordPress Meta Tag für “og:title”

Für die Angabe der Artikelüberschrift genügt der einfacher Tag the_title(). Damit wird die im Editor angegebene Artikelüberschrift als Title-Tag an den Open Graph übergeben.

<meta property="og:title" content="<?php the_title(); ?>"/>

WordPress Meta Tag für “og:url”

Auch für die Angabe der URL, also des Permalinks zum Artikel genügt ein einfacher WordPress Tag the_permalink().

<meta property="og:url" content="<?php the_permalink() ?>"/>

WordPress Meta Tag für “og:description”

Um den hierfür vorgesehenen WordPress Tag the_excerpt() verwenden zu können ist schon etwas mehr Aufwand nötig. Da der Tag the_excerpt() allerdings die Kurzbeschreibung mit einem <p> Tag umschließt, verwendet man hier den für XML formatierten Ausdruck the_excerpt_rss(). Der Tag the_excerpt_rss() darf – wie the_excerpt() auch –  nur innerhalb eines Loops stehen. Dazu erzeugen wir einen kurzen Loop und fragen ab, ob es einen solchen the_excerpt_rss() überhaupt gibt:

<meta property="og:description" content="
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<?php the_excerpt_rss(); ?>
<?php endwhile; else: ?> Schade. keine Beschreibung verfügbar.
<?php endif; ?>
" />

WordPress Meta Tag für “og:image”

Hier kommt es stark auf die Architektur des WordPress Themes an. Ich verwende hier im Blog die Variante, dass ich jedem Artikel über die “Benutzerdefinierten Felder” ein großes und ein kleines Artikelbild hinzufüge. In dem folgenden Meta tag weise ich dem Open Graph das kleine Artikelbild als Image zu.

<meta property="og:image" content="
<?php $thumb= get_post_meta($post->ID, 'thumb', true); ?>
<?php if(!(empty($thumb))) { ?>
<?php echo $thumb; ?>
<?php } else { ?>
http://tocki.de/css-bilder/thumbnail-4-facebook.png <?php } ?>
"/>

Hierbei wird abgefragt, ob das kleine Artikelbild vorhanden ist und – falls ja – dessen URL ausgegeben. Sollte es kein Artikelbild geben, dann wird ein default Bild angezeigt (http://tocki.de/css-bilder/thumbnail-4-facebook.png).

Natürlich kann man diese Art von Abfrage auch für die seit WordPresss 3.0 verfügbaren Artikelbilder formulieren, oder einfach immer ein standard-Bild ausgeben lassen.

Die kompletten Meta Tags für Facebook unter WordPress

Hier seht ihr die kompletten Meta Tags, die für Facebook relevant sind, wie sie z.B. in diesem Blog hier verwendet werden.

<!-- Facebook Meta Data -->
<meta property="og:locality" content="Stuttgart"/>
<meta property="og:country-name" content="Germany"/>
<meta property="og:latitude" content="48.78502"/>
<meta property="og:longitude" content="9.16254"/>
<meta property="og:type" content="blog"/>
<meta property="og:site_name" content="Blog.Tocki.de"/>
<meta property="fb:admins" content="1237398503"/>
<meta property="fb:page_id" content="200185198887" />
<meta property="og:title" content="<?php the_title(); ?>"/>
<meta property="og:url" content="<?php the_permalink() ?>"/>
<meta property="og:description" content="
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
	<?php the_excerpt_rss(); ?>
	<?php endwhile; else: ?> Schade. Es gibt keinen Post hier.
	<?php endif; ?>
" />
<meta property="og:image" content="
<?php $thumb= get_post_meta($post->ID, 'thumb', true); ?>
	<?php if(!(empty($thumb))) { ?>
	<?php echo $thumb; ?>
	<?php } else { ?>http://tocki.de/css-bilder/thumbnail-4-facebook.png
	<?php } ?>
"/>

Testen mit dem URL Linter

Da Facebook beim einfügen von URLs eine Cache eingebaut hat, lassen sich Veränderungen am Markup nur zeitverzögert testen. Abhilfe schafft das Facebook-eigene Tool URL Linter. Damit können Änderungen sofort sichtbar gemacht werden und außerdem überprüft werden, ob alle Angaben richtig übermittelt werden. Zum Beispiel sieht die Auswertung zum Artikel Meta Tags für Facebook so aus: so aus.

Einfach mal ausprobieren

Damit ist der Blog also fit für Facebook. Besonders gut kann man die Auswirkungen dieses Tunings bei Facebooks “Share”-Funktion sehen. Also einfach gleich hier mal ausprobieren und sich ein Bild davon machen!



// Kommentar schreiben
// Trackback URL
// Kommentare als RSS 2.0

11 Kommentare zu "Facebook Meta & WordPress"

Schreibe einen Kommentar