Open-Graph-Tags in WordPress

WordPress betreibt Millionen Sites, liefert aber standardmäßig keine Open-Graph-Tags. Teilst du einen Post ohne sie, wählt Facebook ein zufälliges Bild von der Seite. Yoast SEO, Rank Math und manuelle Theme-Anpassungen lösen das unterschiedlich. Mit dem richtigen Ansatz bekommt jeder Post eine kontrollierte Vorschau-Karte.

Kurzantwort

Installiere Yoast SEO oder Rank Math, um Open-Graph-Tags automatisch aus Titel, Auszug und Beitragsbild zu erzeugen. Beide Plugins setzen og:title, og:description, og:image und og:url auf jeder öffentlichen Seite. Für volle Kontrolle ohne Plugin Meta-Tags in header.php oder per Code-Snippet ergänzen. Setze ein Beitragsbild für jeden Post, den du teilst. Nach Änderungen die Live-URL mit OpenGraph Check scannen und die Vorschau vor dem Post prüfen.

Warum WordPress-Vorschauen out of the box scheitern

WordPress liefert Dokumenttitel und Meta-Description über Themes, Open Graph ist aber nicht im Core. Ohne Plugin oder Custom Code sehen Crawler kein og:image und raten aus dem Seiteninhalt. Folgen:

• Falsche oder beschnittene Thumbnails
• Fehlende Descriptions auf Archivseiten
• Logos statt Artikel-Grafik
• Alte Vorschauen nach Beitragsbild-Wechsel

Jede ernsthafte Content-Site braucht explizite OG-Tags.

Option 1: Yoast SEO

Yoast ist das meistinstallierte SEO-Plugin. Open-Graph-Support ist eingebaut und in aktuellen Versionen standardmäßig aktiv.

Einrichtung

1. Yoast SEO unter Plugins → Installieren
2. SEO → Einstellungen → Website-Funktionen → Social-Media-Vorschau
3. Open-Graph-Daten aktivieren
4. Standard-OG-Bild für Seiten ohne Beitragsbild hochladen
5. Facebook-App-ID setzen (optional, hilft bei Insights)

Pro-Post-Kontrolle

Post bearbeiten, Yoast-Sidebar oder Meta-Box öffnen:

• Tab Social-Media-Vorschau zeigt Facebook- und X-Vorschau
• Titel und Description für Social getrennt vom SEO-Titel überschreiben
• Beitragsbild wird automatisch og:image

Yoast-Stärken

• Ausgereift, gut dokumentiert
• Social-Vorschau im Editor
• WooCommerce-Produktseiten
• Google Search Console-Integration

Yoast-Schwächen

• Schweres Plugin, wenn du nur OG-Tags brauchst
• Social-Tab verwirrt Redakteure, die SEO-Titel ändern, aber Social vergessen
• Manche Themes duplizieren OG-Tags

Option 2: Rank Math

Rank Math ist eine starke Yoast-Alternative mit großzügigem Free-Tier und granularer Social-Kontrolle.

Einrichtung

1. Rank Math SEO installieren
2. Setup-Assistent, Social Meta aktivieren
3. Unter Rank Math → Allgemeine Einstellungen → Snippet bearbeiten → Social Standard-OG-Bild setzen
4. Facebook-App verbinden (optional)

Pro-Post-Kontrolle

Rank Math zeigt einen Social-Tab im Snippet-Editor:

• Eigener Facebook-Titel, Description und Bild pro Post
• Separate X (Twitter)-Card-Einstellungen
• Live-Vorschau beim Bearbeiten

Rank Math-Stärken

• Leichter als Yoast
• Schema-Markup neben Social-Tags
• Free-Version deckt OG für die meisten Sites
• Redirect-Modul hilft bei URL-Wechseln, die og:url brechen

Rank Math-Schwächen

• Kleineres Ökosystem als Yoast
• Advanced Features Richtung Pro
• Gleiches Theme-Konflikt-Risiko wie jedes Plugin

Yoast vs. Rank Math für Open Graph

Beide Plugins liefern korrekte Tags für typische Blogposts. Wähle nach dem breiteren SEO-Workflow, nicht nur OG. Installiere nicht beide. Doppelte Meta-Tags verwirren Crawler.

Option 3: Manuelle Implementierung

Ohne Plugin bei minimalem Overhead oder voller Theme-Kontrolle.

Tags in functions.php

function mytheme_open_graph_tags() {
  if ( is_singular() ) {
    global $post;
    $title = get_the_title();
    $description = has_excerpt() ? get_the_excerpt() : wp_trim_words( strip_tags( $post->post_content ), 30 );
    $url = get_permalink();
    $image = get_the_post_thumbnail_url( $post->ID, 'full' );
    if ( ! $image ) {
      $image = 'https://example.com/wp-content/uploads/default-og.jpg';
    }
    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:image" content="' . esc_url( $image ) . '" />' . "\n";
  }
}
add_action( 'wp_head', 'mytheme_open_graph_tags', 5 );

Früh in wp_head hooken. esc_attr und esc_url für Sicherheit nutzen.

Manuell: Pro und Contra

Pro: Keine Plugin-Abhängigkeit, exakte Kontrolle, schnelleres Admin

Contra: Keine Editor-Vorschau, Code-Pflege bei Theme-Wechsel, kein automatisches WooCommerce-/Archiv-Handling

Für eine Marketing-Site mit fünf Seiten reicht manuell. Für einen Blog mit zwanzig Posts pro Woche ein Plugin.

Beitragsbilder sind Pflicht

Plugins und manueller Code nutzen das Beitragsbild für og:image. Ohne Bild greift ein Site-weiter Default oder nichts.

Vor dem Veröffentlichen:

1. Beitragsbild mindestens 1200 × 630 px
2. JPG oder PNG unter 5 MB
3. Textlastige Bilder vermeiden, die auf Mobile schlecht croppen

Maße: Open-Graph-Bildgröße.

Typische WordPress-OG-Probleme

Doppelte og:image-Tags

Zwei Plugins oder Plugin plus Theme outputten OG-Tags. Social Meta an einer Quelle deaktivieren. Seitenquelltext prüfen, og:image zählen. Genau ein Set.

Cache-Plugins liefern altes HTML

WP Rocket, W3 Total Cache und LiteSpeed Cache cachen alte Meta-Tags. Cache nach Beitragsbild- oder Social-Änderung leeren. Siehe Link-Vorschau-Cache erklärt.

CDN oder Lazy-Load bricht Bild-URL

Manche Lazy-Load-Plugins tauschen src, OG-Tags zeigen auf Low-Res-Platzhalter. Prüfen, ob og:image im Quelltext auf die Full-Size-Attachment-URL zeigt.

Mehrsprachige Sites (WPML, Polylang)

Jede Sprachversion braucht eigene OG-Tags. Yoast und Rank Math unterstützen WPML. Jede Locale-URL separat mit OpenGraph Check prüfen.

og:url-Mismatch bei Redirects

HTTP zu HTTPS oder www-Redirects verwirren Crawler, wenn og:url das alte Format nutzt. WordPress-URL unter Einstellungen → Allgemein korrekt setzen.

Verifizierungs-Workflow für WordPress

1. Post veröffentlichen oder aktualisieren
2. WordPress- und CDN-Cache leeren
3. Seitenquelltext der öffentlichen URL anzeigen
4. Ein Set og:*-Tags mit absoluter HTTPS-Bild-URL bestätigen
5. Bild-URL im Browser öffnen
6. Mit OpenGraph Check scannen
7. Facebook Sharing Debugger vor Meta-Kampagnen

Voller Test-Guide: Open-Graph-Tags testen.

Wann Defaults überschreiben

Social-Titel überschreiben, wenn:

• SEO-Titel keyword-lastig ist, Social aber einen Hook braucht
• Beitragsbild vom gewünschten Share-Hero abweicht
• A/B-Tests für Paid Social laufen

Overrides im Plugin-Social-Tab halten, nicht im Post-HTML.

FAQ

Setzt WordPress Open-Graph-Tags automatisch?

Nein. Core WordPress outputtet keine OG-Tags. Plugin oder Custom Code nötig.

Yoast oder Rank Math nur für Open Graph?

Beides funktioniert. Rank Math ist leichter. Yoast hat breitere Adoption. Nicht beide parallel.

OG-Tags ohne Beitragsbild?

Ja, mit Site-weitem Default-Bild in den Plugin-Einstellungen. Pro-Post-Bilder performen besser.

Brechen Page Builder (Elementor, Divi) OG-Tags?

Selten, wenn das SEO-Plugin in wp_head lädt. Konflikte, wenn Builder eigene SEO-Module haben. Doppelten Social-Output im Builder deaktivieren.

Falsches Bild bei alten Facebook-Shares?

Bild ändern, Cache leeren, im Facebook Sharing Debugger erneut scrapen. Siehe Facebook-Vorschau nicht aktualisiert.

og:description getrennt von Meta-Description?

Optional. Sie können gleich sein. Social-Descriptions profitieren von aktivierender Copy unter 125 Zeichen.

Braucht WooCommerce spezielles OG-Setup?

Produktseiten brauchen og:type product und Produktbild. Yoast WooCommerce SEO und Rank Math Pro handhaben das. Produkt-URLs einzeln prüfen.

Fazit

WordPress braucht Hilfe für Open-Graph-Tags. Yoast und Rank Math automatisieren die Arbeit für Redaktionen. Manueller Code passt zu schlanken Sites mit Entwickler-Pflege. Beitragsbilder setzen, keine doppelten Plugins, Cache nach Edits leeren und jede wichtige URL mit OpenGraph Check prüfen, bevor du teilst.