avianex / Online Performance Marketing / Know-How / Facebook Opengraph Tags in WordPress integrieren

Facebook Opengraph Tags in WordPress integrieren

Post-Shares auf Facebook oder Twitter versprechen heute hohe Reichweiten. Wer seinen WordPress-Artikel perfekt vorbereiten möchte, arbeitet daher mit OpenGraph-Tags. Wie man die ohne Plugin einbaut, zeigt dieser Tipp.

Hinweis an unsere Kunden: Die hier beschriebene Funktion ist bereits standardmäßig in unserem WordPress Template Framework hinterlegt. Es muss hier an Ihrer Seite also nichts weiter angepasst werden 🙂

Die Nachfolgend beschriebene Funktion lässt sich ganz einfach in der functions.php-Datei des verwendeten WordPress-Templates hinterlegen. Die Funktion wird über das wp_head-Tag ausgegeben, somit erscheinen die Tags automatisch im Header der Seite.

function fb_og() {
global $post;
if ( !is_single())
return;
if ($excerpt = $post->post_excerpt)
{
	$excerpt = strip_tags($post->post_excerpt);
	$excerpt = str_replace("", "'", $excerpt);
} 
else 
{
	$excerpt = get_bloginfo('description');
}

echo '<meta property="fb:admins" content="[Profile-ID des Users]"/>';
echo '<meta property="fb:app_id" content="[App-ID der FB-Seite]"/>';
echo '<meta property="og:title" content="' . get_the_title() . '"/>';
echo '<meta property="og:description" content="' . $excerpt . '"/>';
echo '<meta property="og:type" content="article" />';
echo '<meta property="og:url" content="' . get_permalink() . '"/>';
echo '<meta property="og:site_name" content="'. get_bloginfo('name') .'"/>';

if(!has_post_thumbnail( $post->ID )) {
	$default_image="[hier ein Alternativbild verlinken, sofern kein Thumbnail definiert wurde]"; 
	echo '<meta property="og:image" content="' . $default_image . '"/>';
	echo '<meta property="og:image:alt" content="' . $excerpt . '"/>';
}
else{
	$thumbnail_src = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'Full Size' );
	echo '<meta property="og:image" content="' . esc_attr( $thumbnail_src[0] ) . '"/>';
	echo '<meta property="og:image:alt" content="' . $excerpt . '"/>';
}

echo '<meta name="twitter:card" content="summary" />';
echo '<meta name="twitter:site" content="[Name der Seite, z.B. @avianex]" />';
echo '<meta name="twitter:creator" content="[Name des Autors, kann auch eine Seite sein, z.B. @avianex]" />';

}
add_action( 'wp_head', 'fb_og', 5 );

Erklärung der Opengraph-Funktion

Die Funktion fb_og prüft zunächst, ob es sich bei der aufgerufenen Seite um eine Beitrags- oder Einzelseite handelt. Nur dann sollen die Tags geschmissen werden, denn nur diese Seiten werden üblicherweise geshared. Darauf wird in diesem Beispiel die Variable $excerpt mit dem Post Excerpt befüllt. Dieser dient uns als Description. Ist er nicht befüllt, wird die Blogbeschreibung eingelesen. Das ist natürlich eher suboptimal, da die Description als Bilduntertitel in Facebook idealerweise einen Bezug zum Artikel haben sollte. Daher: Post-Excerpt immer ausfüllen! 😉

Nun werden die OpenGrpah Meta-Tags ausgegeben und mit den notwendigen Inhalten befüllt. Einige Tags müssen jedoch vor Integration der Funktion manuell eingebene werden, dazu weiter unten mehr.

Beim Artikelbild gehen wird davon aus, dass ein Post Thumbnail vorhanden ist. Dieser sollte auch in der höchstmöglichen Auflösung bereitstehen, da viele mobil über hochauflösende Displays auf Social Media Content zugreifen. Ist kein Thumbnail vorhanden, besteht die Option ein Default-Bild zu hinterlegen.

Facebook IDs

Für die Tags fb:admins und fb:admins benötigen wir Seiten- und Admin-Profile ID. Die Seiten ID findet sich auf der jeweiligen Seite links bei den Tabs unter Info. Alternativ natürlich im Business-Manager in der Liste der verwalteten Seiten.

Wie kommt man an seine eigene Facebook Profile ID?

Sofern es keine Vanity-URL gibt, steht diese als Parameter hinter der Profil-URL. Wer bereits eine Vanity-URL hat, kommt nur über Umwege daran. Dafür gibt es einerseits Tools, die nach Eingabe des eigenen Profil-Namens die ID ausgeben. Hier muss mann allerdings die Indexierung des eigene Profils durch Third-Party Searchengines zulassen. Wer das nicht will (wer will das schon?) – kommt mit folgendem Trick dennoch an seine ID: Einfach das eigene Profil aufrufen und Mal Rechtsklick / Quelltext anzeigen wählen. Nun Mit Strg-F nach folgender Zeichenfolge suchen: fb://profile/. Die Nummer die dahinter steht, ist die persönliche Profil-ID 😉

Twitter

Tags für Twitter Cards sind „abwärtskompatibel“ zu OpenGraph-Tags. Das bedeutet, es reicht drei zusätzliche Twitter-spezifische Tags zu integrieren. Das Tweet-Bild, die Description etc. werden bei vorhandenen Opengraph-Tags auch von Twitter erkannt. Das spart Code (und Nerven).

Debugging

Wurde alles eingebaut, sollte sicherheitshalber mit dem Facebook-Debugger geprüft ob alle Infos erkannt werden. Hier findet sich der Facebook-Debugger.

War der Tipp hilfreich? Wir freuen uns über ein kurzes Feedback hier oder auf Facebook.

kommentieren