Open Graph in WordPress verwenden
Von Jonas In diesem Beitrag findet ihr den Code und ein Plugin um den Open Graph in WordPress zu integrieren.
Der sog. Open Graph ist ein Protokoll, mit dessen Hilfe ihr u.a. Informationen an Social Media-Plattformen übermitteln könnt. Über spezielle meta-Befehle im <head> der Seite werden die Informationen übermittelt. Eure Seite bzw. die einzelnen Beiträge eures Blogs werden anschließend prominenter bei Facebook, Twitter oder Google angezeigt. Mit dem in diesem Beitrag archivierten Snippet, integriert ihr den Open Graph in WordPress.
Open Graph-Code für WordPress
Das folgende Snippet liest den Titel, den Artikel-Auszug und das Beitragsbild aus, und verwendet die Informationen für den Open Graph. Fügt das Snippet in der functions.php oder über ein seitenspezifisches Plugin ein. Beachtet bitte, dass für statische Seiten normalerweise kein Auszug (the_excerpt) eingetragen werden kann, da das Eingabefeld in WordPress nicht angezeigt wird. Wie ihr das Feld aktiviert steht in diesem Beitrag.
Details zum Open Graph entnehmt ihr bitte dieser Seite.
add_action( 'wp_head', 'kb_load_open_graph' );
function kb_load_open_graph() {
global $post;
// Standard-Grafik für Seiten ohne Beitragsbild
$kb_site_logo = get_stylesheet_directory_uri() . '/img/wp/logo-open-graph.png';
// Wenn Startseite
if ( is_front_page() ) { // Alternativ is_home
echo '<meta property="og:type" content="website" />';
echo '<meta property="og:url" content="' . get_bloginfo( 'url' ) . '" />';
echo '<meta property="og:title" content="' . esc_attr( get_bloginfo( 'name' ) ) . '" />';
echo '<meta property="og:image" content="' . $kb_site_logo . '" />';
echo '<meta property="og:description" content="' . esc_attr( get_bloginfo( 'description' ) ) . '" />';
}
// Wenn Einzelansicht von Seite, Beitrag oder Custom Post Type
elseif ( is_singular() ) {
echo '<meta property="og:type" content="article" />';
echo '<meta property="og:url" content="' . get_permalink() . '" />';
echo '<meta property="og:title" content="' . esc_attr( get_the_title() ) . '" />';
if ( has_post_thumbnail( $post->ID ) ) {
$kb_thumbnail = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'large' );
echo '<meta property="og:image" content="' . esc_attr( $kb_thumbnail[0] ) . '" />';
} else
echo '<meta property="og:image" content="' . $kb_site_logo . '" />';
echo '<meta property="og:description" content="' . esc_attr( get_the_excerpt() ) . '" />';
}
}
Open Graph als WordPress-Plugin
Ihr könnt den oben gezeigten Code auch über ein individuelles Plugin integrieren. Ich habe dazu ein Plugin vorbereitet, die ihr hier herunterladen könnt.
Open-Graph testen
Wenn ihr den Open Graph in eure Website integriert habt, solltet ihr prüfen ob auch die gewünschten Informationen übermittelt werden. Dazu stellen u.a. Facebook und Google einen Debugger bereit. Tools zum Thema »Open Graph«
Geschrieben von Jonas
Jonas ist Gründer der Webdesign Agentur kulturbanause® und des kulturbanause® Blogs. Er übernimmt Projektleitung, UX/UI und Frontend-Development und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Als Dozent leitet er Schulungen und Workshops. Am liebsten beschäftigt er sich mit Projekten und Themen, die ihn gleichermaßen konzeptionell als auch gestalterisch und technisch fordern.
Mich interessiert das Gegenteil: Kann ich die Open-Graph-Infos von anderen auf meiner Webseite nutzen? Beispiel: http://www.pinkchannel.net/friedrich-merz-kanns-nicht-lassen/
Man beachte: Ich nehme oben ein Bild von Wikipedia, nehme also kein Open-Graph-Bild für den eigenen Post. Im Beitrag baue ich dann etwas Ähnliches, wie Facebook das auch macht. Gleiches Recht für alle! Ist das ok? – Wolfgang Krömer
[…] Für Experten: Im Blog kulturbanause.de wird ein PHP-Code für die funktions.php bereitgestellt, mit dessen Hilfe diese Tags automatisch in Ihre WordPress Seiten und Beiträge integriert und diese so teilbar gemacht werden: Open Graph in WordPress verwenden. […]
Hallo
Danke für den Code, der im Prinzip funktioniert. Einzig, das zugeordnete Artikelbild wird nicht korrekt angezeigt, sondern ein anderes Bild genommen.
Vielleicht haben Sie da noch einen Tipp?
Gruß
Hansjörg Leichsenring
Da hat sich wohl ein Fehler eingeschlichen. Statt go:type oder go:url sollte es doch og:type und og:url lauten.
Ansonsten schöner Beitrag. Durch diverse Plugins läuft das bei vielen WordPress Seiten automatisch im Hintergrund und viele denken nicht mehr daran, oder wissen überhaupt was das ist. Aber open graph meta-tags sind wichtig.
Hallo Christian, vielen Dank für die Info. Ich habe den eingebetteten Code und das Plugin korrigiert. Seltsamerweise scheint der Open Graph fehlertolerant zu sein?! – ich hatte das Plugin vorab getestet und die Daten sind korrekt übertragen worden. Aber so ist es natürlich korrekt jetzt.
Für mich gehört die Open-Graph-Auszeichnung mittlerweile fest zu einer Website dazu. Titel, Beschreibungstext und Bild sind frei definierbar. So bleibt es einem erspart, dass zu einem Link auf Facebook plötzlich ein völlig deplatziertes Bild angezeigt wird, nur weil dieses auch irgendwo auf der Seite steht.