kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

Open Graph in WordPress verwenden

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.

Workshops und Seminare von kulturbanause

Unsere Berlin-Termine für Ende 2017 sind online!

Jetzt Tickets sichern!

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«

Jetzt bist du gefragt!

Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freuen wir uns auf deinen Kommentar.

Du kannst diesen Beitrag natürlich auch weiterempfehlen. Wir sind dir für jede Unterstützung dankbar!

Unterstützung bei WordPress-Projekten

Unsere WordPress Agentur ist auf die Entwicklung maßgeschneiderter WordPress-Themes und -Websites spezialisiert. Wenn du Unterstützung bei der Planung, Gestaltung und Entwicklung eines Projekts benötigst, helfen wir gerne weiter.
WordPress-Leistungsangebot →

Das könnte dich auch interessieren

5 Kommentare

  1. Denis Potschien

    Verfasst am 20. Januar 2015 um 21:45 Uhr.

    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.

  2. Christian

    Verfasst am 23. Januar 2015 um 10:45 Uhr.

    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.

    • Jonas Hellwig

      Verfasst am 24. Januar 2015 um 11:36 Uhr.

      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.

  3. Hansjörg Leichsenring

    Verfasst am 15. November 2015 um 11:34 Uhr.

    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

Kommentar verfassen

Dieser Blog lebt vom Feedback der Besucher! Also los, mach mit!
Bitte habe Verständnis dafür, dass Kommentare die mit dem Inhalt dieses Beitrags nichts zu tun haben, gelöscht werden.