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 mussen Plattformen wie Facebook, LinkedIn und 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 verstummelten 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 fur Social Sharing wichtig sind

Jedes Mal, wenn jemand einen Link auf Facebook, LinkedIn, Twitter 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 enthalt normalerweise einen Titel, eine Beschreibung und ein Bild. Wenn deine OG-Tags fehlen oder falsch konfiguriert sind, wird moglicherweise das falsche Bild aus einer Sidebar-Werbung gezogen, die Meta-Beschreibung mitten im Satz abgeschnitten oder gar keine Vorschau angezeigt.

Die Zahlen sprechen fur sich. Beitrage mit Vorschaukarten erzielen deutlich mehr Engagement als reine Text-Links. Auf Facebook bekommen Beitrage mit Bildern etwa 2-3x mehr Engagement als solche ohne. Auf LinkedIn erhalten Artikel mit uberzeugenden 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 uberzeugenden 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 gebundelt werden.
• og:type: Der Inhaltstyp. Verwende article fur Blogbeitrage, website fur deine Startseite und product fur E-Commerce-Artikel.
• og:image: Das Vorschaubild. Dies ist der wichtigste OG-Tag fur Engagement. Mehr zu Best Practices fur 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 fur Blogbeitrage.

og:image Best Practices fur maximale Wirkung

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

• Große: Verwende Bilder mit mindestens 1200x630 Pixeln. Facebook empfiehlt dies als Minimum fur hochauflosende Displays. Fur LinkedIn funktionieren 1200x627 Pixel am besten.
• Seitenverhaltnis: Halte dich an 1.91:1 fur die beste plattformubergreifende Kompatibilitat. Dieses Verhaltnis funktioniert gut auf Facebook, LinkedIn, Twitter und Messaging-Apps.
• Dateiformat: JPEG und PNG werden uberall unterstutzt. Vermeide WebP fur OG-Bilder, da einige Plattformen und Crawler es noch nicht unterstutzen.
• Dateigroße: Halte Bilder unter 5 MB. Facebook uberspringt moglicherweise 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 fur 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 fur jede Seite deiner Website. So konfigurierst du es:

Fur seitenweite Einstellungen:

1. Installiere und aktiviere Yoast SEO.
2. Gehe zu Yoast SEO, dann Social im Admin-Menu.
3. Aktiviere auf dem Facebook-Tab "Open Graph Metadaten hinzufugen."
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 wahle entweder "Zusammenfassung" oder "Zusammenfassung mit großem Bild" als Standard-Kartentyp.

Fur einzelne Beitrage 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 fur Social Sharing an.
4. Setze unter "Twitter-Vorschau" bei Bedarf einen anderen Titel, eine andere Beschreibung oder ein anderes Bild (ansonsten verwendet Twitter 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 ahnlich 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 hinzufugen."
4. Setze ein Standard-Social-Share-Bild fur Beitrage ohne Beitragsbild.

Fur 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 fur Facebook und Twitter festlegen.

Open Graph Tags manuell uber functions.php hinzufugen

Wenn du kein SEO-Plugin verwenden mochtest, kannst du OG-Tags uber die functions.php deines Themes hinzufugen. Dieser Ansatz gibt dir die volle Kontrolle uber 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 konnen Social-Media-Crawler verwirren.

Open Graph Tags fur WooCommerce-Produkte

Wenn du einen WooCommerce-Shop betreibst, profitieren deine Produktseiten von zusatzlichen 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 Verfugbarkeit einbeziehen.

Fur 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 Anderungen vorgenommen hast.
• LinkedIn Post Inspector: Besuche linkedin.com/post-inspector und gib deine URL ein. LinkedIn cached aggressiv, nutze dieses Tool also, um nach dem Aktualisieren deiner OG-Tags eine Aktualisierung zu erzwingen.
• Twitter Card Validator: Besuche cards-dev.twitter.com/validator. Gib deine URL ein, um eine Vorschau deiner Twitter Card zu sehen.
• InspectWP-Scan: Fuhre einen Scan durch, um zu verifizieren, dass deine OG-Tags in der HTML-Ausgabe der Seite vorhanden sind.

Social-Media-Caches nach Anderungen 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." Moglicherweise musst du bei hartnackigen 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 naturlich zu aktualisieren.
• Twitter: Verwende den Card Validator, um ein neues Crawling anzufordern. Twitter aktualisiert 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 naturlich ablauft (normalerweise 24-72 Stunden).

Haufige Open Graph Fehler vermeiden

• Fehlendes og:image: Der haufigste 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 moglicherweise 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, fuhren zu widerspruchlichen Metadaten. Verwende nur eine Quelle fur deine OG-Tags.
• og:url stimmt nicht uberein: Die og:url sollte mit deiner kanonischen URL ubereinstimmen. Wenn sie auf verschiedene URLs zeigen, konnen Social-Media-Plattformen verwirrt werden, welcher Seite das Engagement zugeordnet wird.
• og:type nicht gesetzt: Manche Plattformen verwenden standardmaßig website, wenn og:type fehlt. Das ist fur deine Startseite in Ordnung, aber nicht ideal fur Blogbeitrage. Setze article fur Beitrage, damit Plattformen Veroffentlichungsdatum und Autorinformationen anzeigen.
• Twitter-spezifische Tags vergessen: Obwohl Twitter auf OG-Tags zuruckgreifen kann, geben dir twitter:card und twitter:site Tags mehr Kontrolle uber das Twitter-Vorschauformat.