Open Graph Tags in WordPress hinzufügen

Open Graph Tags sind kleine Metadaten-Elemente im HTML deiner Seite, die steuern, wie dein Inhalt erscheint, wenn ihn jemand in sozialen Medien teilt. Ohne sie müssen Plattformen wie Facebook, LinkedIn und X (vormals Twitter) raten, welchen Titel, welche Beschreibung und welches Bild sie anzeigen sollen, und sie liegen dabei oft falsch. Ein geteilter Link mit fehlendem Bild oder einem verstümmelten Titel wirkt unprofessionell, und die Klickbereitschaft sinkt deutlich. Open Graph Tags richtig einzurichten dauert nur wenige Minuten und macht einen echten Unterschied beim Social-Media-Traffic.

Warum Open Graph Tags für Social Sharing wichtig sind

Jedes Mal, wenn jemand einen Link auf Facebook, LinkedIn, X oder in Messaging-Apps wie WhatsApp und Telegram teilt, rufen diese Plattformen die Open Graph Metadaten von deiner Seite ab, um eine Vorschaukarte zu erstellen. Diese Karte enthält normalerweise einen Titel, eine Beschreibung und ein Bild. Wenn deine OG-Tags fehlen oder falsch konfiguriert sind, wird möglicherweise das falsche Bild aus einer Sidebar-Werbung gezogen, die Meta-Beschreibung mitten im Satz abgeschnitten oder gar keine Vorschau angezeigt.

Die Zahlen sprechen für sich. Beiträge mit Vorschaukarten erzielen deutlich mehr Engagement als reine Text-Links. Auf Facebook bekommen Beiträge mit Bildern etwa 2-3x mehr Engagement als solche ohne. Auf LinkedIn erhalten Artikel mit überzeugenden Vorschaubildern mehr Klicks und Shares. Deine OG-Tags richtig einzurichten ist einer der einfachsten Wege, die Sichtbarkeit deiner geteilten Inhalte zu steigern.

Die Checkliste der wichtigsten Open Graph Tags

Nicht alle OG-Tags sind gleich wichtig. Diese solltest du immer einbinden:

• og:title: Der Titel deiner Seite, wie er in Social-Media-Shares erscheinen soll. Halte ihn unter 60 Zeichen, um Abschneiden auf den meisten Plattformen zu vermeiden.
• og:description: Eine kurze Zusammenfassung des Seiteninhalts. Strebe 120-200 Zeichen an. Das ist deine Chance, einen überzeugenden Teaser zu schreiben, der Leute zum Klicken bringt.
• og:url: Die kanonische URL der Seite. Das stellt sicher, dass alle Shares auf dieselbe URL verweisen und die Engagement-Metriken gebündelt werden.
• og:type: Der Inhaltstyp. Verwende article für Blogbeiträge, website für deine Startseite und product für E-Commerce-Artikel.
• og:image: Das Vorschaubild. Dies ist der wichtigste OG-Tag für Engagement. Mehr zu Best Practices für Bilder weiter unten.

Optionale, aber empfohlene Tags sind og:site_name (dein Website-Name), og:locale (Sprache und Region, z.B. de_DE) und article:published_time für Blogbeiträge.

og:image Best Practices für maximale Wirkung

Das Vorschaubild ist das Erste, was Menschen beim Scrollen durch ihre Social-Media-Feeds bemerken. Es lohnt sich, hier sorgfältig zu arbeiten:

• Größe: Verwende Bilder mit mindestens 1200x630 Pixeln. Facebook empfiehlt dies als Minimum für hochauflösende Displays. Für LinkedIn funktionieren 1200x627 Pixel am besten.
• Seitenverhältnis: Halte dich an 1.91:1 für die beste plattformübergreifende Kompatibilität. Dieses Verhältnis funktioniert gut auf Facebook, LinkedIn, X und Messaging-Apps.
• Dateiformat: JPEG und PNG werden überall unterstützt und sind die sicherste Wahl für maximale Kompatibilität. WebP funktioniert inzwischen auf den großen Plattformen (Facebook, LinkedIn, X), einige ältere Crawler und Nischenplattformen haben damit aber weiterhin Probleme.
• Dateigröße: Halte Bilder unter 5 MB. Facebook überspringt möglicherweise Bilder, deren Download zu lange dauert.
• Inhalt: Vermeide Bilder mit zu viel Text. Saubere Bilder mit minimalem Text performen in der Regel besser.
• Fallback-Bild: Setze immer ein seitenweites Standard-OG-Bild für Seiten, die kein Beitragsbild haben. Ein Markenbild mit deinem Logo funktioniert gut als Fallback.

Open Graph Tags mit Yoast SEO einrichten

Yoast SEO generiert automatisch Open Graph und Twitter Card Tags für jede Seite deiner Website. So konfigurierst du es:

Für seitenweite Einstellungen:

1. Installiere und aktiviere Yoast SEO.
2. Gehe zu Yoast SEO, dann Social im Admin-Menü.
3. Aktiviere auf dem Facebook-Tab "Open Graph Metadaten hinzufügen."
4. Lade ein Standardbild hoch, das verwendet wird, wenn ein Beitrag oder eine Seite kein Beitragsbild hat.
5. Aktiviere auf dem Twitter-Tab die Twitter Card Metadaten und wähle entweder "Zusammenfassung" oder "Zusammenfassung mit großem Bild" als Standard-Kartentyp.

Für einzelne Beiträge und Seiten:

1. Bearbeite den Beitrag oder die Seite.
2. Klicke in der Yoast-SEO-Metabox auf den Tab "Social" (das Teilen-Symbol).
3. Passe unter "Facebook-Vorschau" den Titel, die Beschreibung und das Bild für Social Sharing an.
4. Setze unter "Twitter-Vorschau" bei Bedarf einen anderen Titel, eine andere Beschreibung oder ein anderes Bild (ansonsten verwendet X die Facebook-OG-Werte).

Yoast verwendet automatisch das Beitragsbild als og:image, wenn du kein benutzerdefiniertes Bild setzt. Es generiert auch den og:title aus dem SEO-Titel und die og:description aus der Meta-Beschreibung, sodass deine Social Shares konsistent mit deinen SEO-Einstellungen bleiben.

Open Graph Tags mit Rank Math einrichten

Rank Math handhabt OG-Tags ähnlich wie Yoast:

1. Installiere und aktiviere Rank Math.
2. Gehe zu Rank Math, dann Allgemeine Einstellungen, dann Social Meta.
3. Aktiviere "Open Graph Metadaten zum Header deiner Seite hinzufügen."
4. Setze ein Standard-Social-Share-Bild für Beiträge ohne Beitragsbild.

Für die individuelle Beitragsanpassung klicke beim Bearbeiten eines Beitrags auf das Rank-Math-Symbol und navigiere zum Tab "Social". Du kannst separate Titel, Beschreibungen und Bilder für Facebook und X festlegen.

Open Graph Tags manuell über functions.php hinzufügen

Wenn du kein SEO-Plugin verwenden möchtest, kannst du OG-Tags über die functions.php deines Themes hinzufügen. Dieser Ansatz gibt dir die volle Kontrolle über jeden Tag:

function custom_open_graph_tags() {
    if (is_singular()) {
        global $post;
        $title = get_the_title();
        $description = has_excerpt() ? get_the_excerpt() : wp_trim_words($post->post_content, 30);
        $url = get_permalink();
        $image = get_the_post_thumbnail_url($post->ID, 'large');
        $site_name = get_bloginfo('name');

        echo '<meta property="og:title" content="' . esc_attr($title) . '" />' . "\n";
        echo '<meta property="og:description" content="' . esc_attr($description) . '" />' . "\n";
        echo '<meta property="og:url" content="' . esc_url($url) . '" />' . "\n";
        echo '<meta property="og:type" content="article" />' . "\n";
        echo '<meta property="og:site_name" content="' . esc_attr($site_name) . '" />' . "\n";
        if ($image) {
            echo '<meta property="og:image" content="' . esc_url($image) . '" />' . "\n";
            echo '<meta property="og:image:width" content="1200" />' . "\n";
            echo '<meta property="og:image:height" content="630" />' . "\n";
        }
    } elseif (is_front_page()) {
        $site_name = get_bloginfo('name');
        $description = get_bloginfo('description');
        echo '<meta property="og:title" content="' . esc_attr($site_name) . '" />' . "\n";
        echo '<meta property="og:description" content="' . esc_attr($description) . '" />' . "\n";
        echo '<meta property="og:url" content="' . esc_url(home_url('/')) . '" />' . "\n";
        echo '<meta property="og:type" content="website" />' . "\n";
    }
}
add_action('wp_head', 'custom_open_graph_tags');

Stelle sicher, dass du dies nicht parallel zu einem SEO-Plugin verwendest, das bereits OG-Tags ausgibt. Doppelte OG-Tags können Social-Media-Crawler verwirren.

Open Graph Tags für WooCommerce-Produkte

Wenn du einen WooCommerce-Shop betreibst, profitieren deine Produktseiten von zusätzlichen OG-Tags. Sowohl Yoast SEO als auch Rank Math haben WooCommerce-Integrationen, die automatisch og:type auf product setzen und produktspezifische Metadaten wie Preis und Verfügbarkeit einbeziehen.

Für manuelle Implementierungen kannst du dich in die WooCommerce-Produktdaten einklinken:

function woo_product_og_tags() {
    if (is_product()) {
        global $product;
        $price = $product->get_price();
        $currency = get_woocommerce_currency();
        echo '<meta property="og:type" content="product" />' . "\n";
        echo '<meta property="product:price:amount" content="' . esc_attr($price) . '" />' . "\n";
        echo '<meta property="product:price:currency" content="' . esc_attr($currency) . '" />' . "\n";
    }
}
add_action('wp_head', 'woo_product_og_tags');

Open Graph Tags testen

Nachdem du deine OG-Tags eingerichtet hast, solltest du sie testen, bevor du etwas Wichtiges teilst. Hier sind die Tools, die du brauchst:

• Facebook Sharing Debugger: Besuche developers.facebook.com/tools/debug und gib deine URL ein. Das Tool zeigt genau, was Facebook sieht, einschließlich Titel, Beschreibung und Bild. Klicke auf "Erneut scrapen", um den Cache zu aktualisieren, wenn du Änderungen vorgenommen hast.
• LinkedIn Post Inspector: Besuche linkedin.com/post-inspector und gib deine URL ein. LinkedIn cacht aggressiv, nutze dieses Tool also, um nach dem Aktualisieren deiner OG-Tags eine Aktualisierung zu erzwingen.
• X (Twitter) Card Preview: Der frühere Card Validator unter cards-dev.twitter.com/validator wurde nach der Übernahme durch X eingestellt und funktioniert nicht mehr zuverlässig. Eine praktikable Alternative ist ein Test-Post im geschützten oder privaten Modus oder ein Drittanbieter-Tool wie opengraph.xyz oder metatags.io, das die Preview simuliert.
• InspectWP-Scan: Führe einen Scan durch, um zu verifizieren, dass deine OG-Tags in der HTML-Ausgabe der Seite vorhanden sind.

Social-Media-Caches nach Änderungen leeren

Social-Media-Plattformen cachen deine OG-Daten stark. Wenn du deine OG-Tags aktualisierst und beim Teilen immer noch die alte Vorschau angezeigt wird, musst du den Cache leeren:

• Facebook: Verwende den Sharing Debugger und klicke auf "Erneut scrapen." Möglicherweise musst du bei hartnäckigen Caches zweimal klicken.
• LinkedIn: Verwende den Post Inspector, um ein erneutes Scraping zu erzwingen. LinkedIn kann manchmal bis zu 7 Tage brauchen, um seinen Cache natürlich zu aktualisieren.
• X (Twitter): Da der frühere Card Validator nicht mehr verfügbar ist, bleibt als zuverlässigster Weg, ein erneutes Crawling zu triggern, einen Test-Post mit dem Link abzusetzen (ggf. direkt wieder löschen). X aktualisiert die Vorschau danach normalerweise innerhalb weniger Minuten.
• WhatsApp und Telegram: Diese Apps cachen Vorschauen clientseitig. Bitte die Leute, ihren App-Cache zu leeren, oder warte, bis der Cache natürlich abläuft (normalerweise 24-72 Stunden).

Häufige Open Graph Fehler vermeiden

• Fehlendes og:image: Der häufigste Fehler. Ohne Bild sehen Social Shares langweilig aus und werden ignoriert. Setze immer ein Beitragsbild oder einen seitenweiten Standard.
• Bild zu klein: Bilder unter 200x200 Pixeln werden auf Facebook möglicherweise gar nicht angezeigt. Strebe mindestens 1200x630 Pixel an.
• Doppelte OG-Tags: Zwei SEO-Plugins gleichzeitig, oder ein SEO-Plugin plus ein Social-Media-Plugin, die beide OG-Tags ausgeben, führen zu widersprüchlichen Metadaten. Verwende nur eine Quelle für deine OG-Tags.
• og:url stimmt nicht überein: Die og:url sollte mit deiner kanonischen URL übereinstimmen. Wenn sie auf verschiedene URLs zeigen, können Social-Media-Plattformen verwirrt werden, welcher Seite das Engagement zugeordnet wird.
• og:type nicht gesetzt: Manche Plattformen verwenden standardmäßig website, wenn og:type fehlt. Das ist für deine Startseite in Ordnung, aber nicht ideal für Blogbeiträge. Setze article für Beiträge, damit Plattformen Veröffentlichungsdatum und Autorinformationen anzeigen.
• X-spezifische Tags vergessen: Obwohl X auf OG-Tags zurückgreifen kann, geben dir die Tags twitter:card und twitter:site (die aus historischen Gründen weiterhin diesen Namen tragen) mehr Kontrolle über das X-Vorschauformat.