Open Graph in WordPress verwenden

open-graph-icon-logo

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.

WordPress-Themes

Entwickeln und gestalten

Beim Verlag kaufen
Download, DVD

Bei Amazon kaufen
DVD

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.

Plugin herunterladen

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«