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.

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 zur Struktur des 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 Plugin integrieren. Wir haben dazu ein Plugin vorbereitet, das ihr hier herunterladen könnt. Auch Plugins wie Yoast SEO integrieren den Open Graph.

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.

Geschrieben von Jonas

Benutzerbild

Jonas ist Gründer der Agentur kulturbanause und des kulturbanause Blogs. Er arbeitet an der Schnittstelle zwischen UX/UI Design, Frontend und Redaktion und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Jonas Hellwig ist regelmäßig als Sprecher auf Fachveranstaltungen anzutreffen und unterstützt mit Seminaren und Workshops Agenturen und Unternehmen bei der Planung, der Gestaltung und der technischen Umsetzung von Web-Projekten.

Jonas Hellwig bei Xing

Feedback & Ergänzungen – 6 Kommentare

  1. Wolfgang Krömer
    schrieb am 04.10.2020 um 10:51 Uhr:

    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

    Antworten
  2. WordPress und Social Media · Elbnetz-Blog
    schrieb am 28.05.2017 um 11:11 Uhr:

    […] 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. […]

    Antworten
  3. Hansjörg Leichsenring
    schrieb am 15.11.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

    Antworten
  4. Christian
    schrieb am 23.01.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.

    Antworten
    • Jonas Hellwig
      schrieb am 24.01.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.

      Antworten
  5. Denis Potschien
    schrieb am 20.01.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.

    Antworten

Kommentar zu dieser Seite

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

WordPress-Projekte mit kulturbanause

Wir wissen wovon wir reden. Wir setzen WordPress seit über 10 Jahren erfolgreich ein und realisieren maßgeschneiderte Websites auf Basis dieses großartigen CMS.

WordPress-Leistungsangebot →

Schulungen von kulturbanause

Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.

Übersicht Schulungsthemen →