Open Graph und Twitter Cards: Social SEO richtig

Wenn jemand Ihren Link auf LinkedIn, Facebook oder X teilt, bestimmen Open Graph und Twitter Card Meta-Tags was andere sehen: Titel, Bild, Beschreibung. Ohne diese Tags greifen Netzwerke auf beliebige Seitenelemente zurück – mit oft unprofessionellen Ergebnissen. Richtig implementiert, ist das Social SEO in der Praxis: Klickraten bei geteilten Links steigen erheblich.

Was sind Open Graph Tags?

Open Graph (OG) ist ein Protokoll von Facebook das standardisiert welche Informationen beim Teilen eines Links angezeigt werden. Die wichtigsten OG-Tags:

<meta property="og:title" content="Seitentitel für soziale Netzwerke">
<meta property="og:description" content="Beschreibung für den Link-Preview (max. 200 Zeichen)">
<meta property="og:image" content="https://domain.de/og-bild.jpg">
<meta property="og:url" content="https://domain.de/seite/">
<meta property="og:type" content="website">

Neben Facebook nutzen auch LinkedIn, WhatsApp, Slack, Discord und viele andere Plattformen Open Graph Tags.

Twitter Cards

Twitter (jetzt X) verwendet ein eigenes System – Twitter Cards – das ähnlich funktioniert:

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Seitentitel">
<meta name="twitter:description" content="Kurzbeschreibung">
<meta name="twitter:image" content="https://domain.de/twitter-bild.jpg">

Card-Typen:

• summary: Kleines quadratisches Bild + Text
• summary_large_image: Großes Bild über dem Text (empfohlen für Content-Marketing)
• app: Für App-Downloads
• player: Für Videos

Seiten mit optimierten Open Graph Bildern (richtige Größe, ansprechendes Design) erzielen auf LinkedIn und Facebook bis zu 3-mal mehr Klicks aus geteilten Links als Seiten ohne OG-Tags oder mit automatisch gewählten Bildern.

OG-Bild: Die wichtigste Komponente

Das OG-Bild ist das Erste was beim geteilten Link auffällt. Anforderungen:

Facebook/LinkedIn:

• Mindestgröße: 1200 × 630 Pixel
• Empfohlenes Verhältnis: 1.91:1
• Format: JPG oder PNG (JPG bevorzugt, kleinere Dateigröße)
• Maximale Dateigröße: 8 MB (praktisch: unter 200 KB halten)

Twitter/X:

• Für summary_large_image: Mindestens 600 × 314 Pixel
• Empfohlen: 1200 × 628 Pixel

WhatsApp:

• Nutzt OG-Tags, empfiehlt quadratische Bilder für beste Darstellung

In WordPress implementieren

Mit Yoast SEO: Yoast generiert OG-Tags automatisch. Unter SEO → Social können Sie Standard-OG-Bild und Twitter-Account konfigurieren. Pro Seite anpassen unter „SEO” → „Facebook” und „Twitter” im Beitrags-Editor.

Mit Rank Math: Äquivalente Social-Media-Einstellungen unter „Edit Post” → „General” → Open Graph Details.

Manuell in PHP:

add_action('wp_head', function() {
    if (is_singular()) {
        $post = get_queried_object();
        $image = get_the_post_thumbnail_url($post->ID, 'full');
        echo '<meta property="og:title" content="' . esc_attr(get_the_title()) . '">';
        echo '<meta property="og:description" content="' . esc_attr(get_the_excerpt()) . '">';
        if ($image) {
            echo '<meta property="og:image" content="' . esc_url($image) . '">';
        }
        echo '<meta property="og:url" content="' . esc_url(get_permalink()) . '">';
    }
});

Open Graph für verschiedene Seiten-Typen

Artikel (Blog, News):

<meta property="og:type" content="article">
<meta property="article:published_time" content="2025-01-15T10:00:00+01:00">
<meta property="article:author" content="https://domain.de/autor/">

Website (Startseite, statische Seiten):

<meta property="og:type" content="website">

Produkte:

<meta property="og:type" content="product">
<meta property="product:price:amount" content="29.99">
<meta property="product:price:currency" content="EUR">

Testen und Debuggen

Facebook Sharing Debugger: Zeigt exakt was Facebook beim Crawlen Ihrer URL sieht. Kann auch den Cache leeren um aktualisierte OG-Daten zu laden.

LinkedIn Post Inspector: Äquivalent für LinkedIn.

Twitter Card Validator: Prüft Twitter Cards und zeigt eine Vorschau.

Open Graph Checker: Viele Browser-Extensions und Online-Tools prüfen OG-Tags direkt.

Seiten mit korrekt implementierten OG-Tags und hochwertigen Bildern werden auf LinkedIn um durchschnittlich 40 % häufiger geteilt als Seiten ohne oder mit fehlerhaften OG-Tags – ein indirekter SEO-Vorteil durch mehr Backlinks und Brand-Awareness.