Was sind Open Graph Tags?

Beim Teilen von Inhalten auf Facebook und anderen sozialen Netzwerken kommt es, wie auch auf Suchergebnisseiten, auf die Klickattraktivität an.

Neben Title und Description können in sozialen Netzwerken noch weitere Elemente wie Vorschau-Bilder definiert werden. Eine optimierte und auf die Zielgruppe zugeschnittene Vorschau des geteilten Artikels führt zu deutlichen Verbesserungen der CTR. Diese Attribute für das attraktive Ausspielen der Inhalte auf sozialen Netzwerken wie Facebook werden Open Graph genannt.

Ein weiterer Vorteil von Open Graph Tags: Wenn Nutzer Links Ihrer Website in sozialen Netzwerken teilen, wird automatisch eine optimale Vorschau generiert.

Welche Open Graph Tags gibt es?

meta property=“og:image“ content=“BILD-URL“
Hier tragen Sie die URL eines Bildes an, das beim Teilen oder Liken Ihrer Seite angezeigt werden soll. Das ausgewählte Bild muss mindestens 600x315px, ideal sind 1200x630px. Facebook empfiehlt, sich an einem Seitenverhältnis von 1.91:1 Verhältnis zu orientieren. Sie können auch mehre Bilder gleichzeitig zur Verfügung stellen was insbesondere Shop Produkte oder Immobilien besonders attraktiv anzeigt.

meta property=“og:title“ content=“AUSSAGEKRÄFTIGER TITEL“
Hier tragen Sie den Titel ein, der beim Teilen einer Seite angezeigt werden soll.

meta property=“og:description“ content=“KURZE BESCHREIBUNG DES INHALTS“
Hier tragen Sie eine kurze, ansprechende Beschreibung des Seiteninhalts ein.

meta property=“og:type“ content=“ART DES INHALTS“
Mit diesem Tag geben Sie an, um welche Art von Inhalt es sich handelt. In der Regel wird hier „Website“ hinterlegt, weitere Möglichkeiten finden Sie auf der offizielle Open Graph Protocol-Seite unter http://ogp.me.

meta property=“og:url“ content=“URL“
Hier hinterlegen Sie die URL, die geteilt werden soll. Dadurch stellen Sie sicher, dass konsequent dieselbe URL geteilt wird und verhindern eine Verfälschung durch Session-IDs, Suchparameter oder ähnliches.

meta property=“og:site_name“ content=“Allgemeiner Name der Seite“
Hier tragen Sie den offiziellen Namen Ihrer Seite ein.

Mit Open Graph Meta Tags übernehmen Sie die Kontrolle darüber, wie soziale Netzwerke Ihre Inhalte anzeigen.

• 

• 

Es lohnt sich also nicht nur, die allgemeinen Meta Tags für Suchmaschinen zu optimieren. Zusätzlich sollten Sie die Möglichkeit nutzen, auch Meta Daten für ansprechende Snippets in den Sozialen Netzwerken wie Facebook, Linkedin, Xing und Twitter zu hinterlegen.

Implementierung

Möglichkeit 1:
Über ein Plugin z.B. Yoast – Hier reicht die kostenlose Version.

Möglichkeit 2:
Manuelle Implementierung – Modifizierung der vorhandenen functions.php Ihrer Website.

Bei dieser Methode müssen Sie Ihr Theme bearbeiten. Stellen Sie daher sicher, dass Sie über ein Backup verfügen, bevor Sie Änderungen vornehmen.

Kopieren Sie diesen Code einfach und fügen Sie ihn in die functions.php Ihres Themes ein.

//Adding the Open Graph in the Language Attributes
function add_opengraph_doctype( $output ) {
        return $output . ' xmlns:og="http://opengraphprotocol.org/schema/" xmlns:fb="http://www.facebook.com/2008/fbml"';
    }
add_filter('language_attributes', 'add_opengraph_doctype');
 
//Lets add Open Graph Meta Info
 
function insert_fb_in_head() {
    global $post;
    if ( !is_singular()) //if it is not a post or a page
        return;
        echo '<meta property="fb:admins" content="IHRE USER ID"/>';
        echo '<meta property="og:title" content="' . get_the_title() . '"/>';
        echo '<meta property="og:type" content="article"/>';
        echo '<meta property="og:url" content="' . get_permalink() . '"/>';
        echo '<meta property="og:site_name" content="DER NAME IHRER WEBSITE"/>';
    if(!has_post_thumbnail( $post->ID )) { //Wird ein Beitrag ohne Bild ausgewählt. Können Sie ein Standardbild verwenden.
        $default_image="http://example.com/image.jpg"; //Ersetzen Sie diese URL durch die eines Standard Bildes auf Ihrem Server oder ein Bild in Ihrer Medienbibliothek
        echo '<meta property="og:image" content="' . $default_image . '"/>';
    }
    else{
        $thumbnail_src = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'medium' );
        echo '<meta property="og:image" content="' . esc_attr( $thumbnail_src[0] ) . '"/>';
    }
    echo "
";
}
add_action( 'wp_head', 'insert_fb_in_head', 5 );

Denken Sie daran, den NAMEN IHRER WEBSITE zu ändern und ändern Sie auch die Standard Bild URL mit Ihrem Bild. Wir empfehlen, hier ein Bild mit Ihrem Logo zu platzieren. Wenn Ihr Beitrag also kein Vorschaubild enthält, wird das Logo Ihrer Website gezogen. Vergessen Sie auch nicht, IHRE USER ID hinzuzufügen. Sie finden Ihre Facebook User ID unter folgender URL: https://graph.facebook.com/againstmedia.at (Ersetzen Sie againstmedia.at einfach durch Ihren eigenen Benutzernamen).

Sobald Sie Ihre functions.php speichern können Sie ihre ersten Beiträge auf Facebook teilen.

Hoffentlich konnte Ihnen dieser Artikel helfen, Facebook Open Graph Metadaten in WordPress hinzuzufügen. Dies ist eine großartige Möglichkeit, um Nutzer auf Facebook für Ihre Inhalte zu begeistern.

Möchten Sie einen Schritt weiter gehen und Ihre Posts mit Logo versehen oder genau passende Bildgrößen generieren stehen wir Ihnen für weitere Fragen gerne zur Verfügung.

Tipp für perfekte Open Graph Meta Tags: Facebook bietet ein Tool an, mit dem Sie im Vorhinein prüfen können, welche Informationen beim Teilen oder Liken einer Seite angezeigt werden: https://developers.facebook.com/tools/debug/.

Sie haben Fragen oder Anregungen zum Thema Open Graph? Wir freuen uns auf Ihr Feedback.