...
webhosting logo

WordPress Open Graph Tags richtig einsetzen: So klappt’s mit Social Sharing

wordpress open graph steuert, wie deine Beiträge als Vorschau auf Facebook, X, LinkedIn oder Pinterest erscheinen. Ich zeige dir, wie du die richtigen Open-Graph-Tags setzt, fehlerfrei prüfst und so mehr Klicks, Verweildauer und Interaktionen erzielst.

Zentrale Punkte

  • OG-Tags bestimmen Titel, Beschreibung und Bild deiner Vorschau
  • og:image liefert das entscheidende Vorschaubild für Klicks
  • Plugins wie RankMath oder OG nehmen dir viel Arbeit ab
  • Testing mit Debuggern verhindert falsche Snippets
  • Performance und Hosting beeinflussen Ladezeit und Bildqualität

Was sind Open Graph Tags und warum helfen sie beim Teilen?

Open Graph-Tags sind Meta-Angaben im Head deiner Seite, die Netzwerke für die Link-Vorschau auslesen. Ich lege fest, welcher Titel, welche Kurzbeschreibung, welches Bild und welcher Inhaltstyp angezeigt wird. So wirkt die Vorschau einheitlich und verständlich, statt zufällig zusammengewürfelt. Gerade das Bild-Tag og:image entscheidet oft über Aufmerksamkeit und Klicks. Sauber gepflegte OG-Tags steigern die Professionalität deiner Snippets und zahlen auf Engagement ein.

Die wichtigsten OG-Tags für WordPress

Kerntags sind og:title, og:description, og:url, og:site_name, og:type und og:image. Mit og:type markiere ich den Inhalt als Artikel, Produkt, Video oder Seite, was die Darstellung verbessert. og:url zeigt die kanonische Adresse, damit Shares nicht auf Varianten verstreut werden. og:site_name verankert deine Marke in jeder Vorschau. Mit sorgfältig gewählten Werten lieferst du einen klaren Nutzen-Teaser statt beliebiger Textausschnitte.

Open Graph in WordPress mit Plugins einrichten

Plugins wie RankMath, Yoast SEO oder OG — Better Share on Social Media setzen die wichtigsten Tags automatisch. In den Social-Einstellungen hinterlege ich pro Beitrag eine eigene Vorschau, inklusive individuellem Titel, Kurzbeschreibung und Bild. Das OG-Plugin ergänzt OG-Tags und Twitter Cards ohne Konfiguration und erkennt auch Produkte und Seiten zuverlässig. Für Shops und mehrsprachige Websites spare ich viel Zeit, weil Felder und Vorlagen schon bereitstehen. In meiner Social Media Strategie 2025 spielt ein konsistentes Snippet-Design eine zentrale Rolle.

Manuelle Integration: volle Kontrolle im Theme

Code-Freunde tragen die Tags über wp_head ein, etwa in functions.php oder via Snippet-Plugin. Ich frage dynamische Werte ab und sorge für ein sauberes Fallback-Bild, falls ein Beitrag keines hat. Wichtig bleibt die eindeutige kanonische URL, damit jede Vorschau auf die korrekte Adresse zeigt. Nach Änderungen lösche ich Caches und prüfe das Ergebnis im Debugger. So halte ich die Ausgabe schlank und vermeide doppelte Tags aus mehreren Quellen.

<meta property="og:title" content="<?php echo esc_attr( get_the_title() ); ?>" />
<meta property="og:description" content="<?php echo esc_attr( wp_strip_all_tags( get_the_excerpt() ) ); ?>" />
<meta property="og:type" content="article" />
<meta property="og:url" content="<?php echo esc_url( get_permalink() ); ?>" />
<meta property="og:site_name" content="<?php echo esc_attr( get_bloginfo( 'name' ) ); ?>" />
<meta property="og:image" content="<?php echo esc_url( $img_src ); ?>" />

Das richtige Bild für og:image wählen

Bilder sind der stärkste Hebel für Klicks auf Social-Plattformen. Ich nutze ein Format mit 1200×630 Pixeln als Ausgangspunkt, weil es auf vielen Plattformen gut skaliert. Die Datei komprimiere ich verlustarm und gebe sinnvolle ALT-Texte, um Kontext zu liefern. Texte im Bild halte ich knapp und gut lesbar, damit auch auf mobilen Feeds nichts abgeschnitten wirkt. Ein einheitlicher Stil stärkt die Wiedererkennbarkeit deiner Marke.

Vorschauen prüfen und neu laden

Testing gehört zu jedem Veröffentlichungsprozess. Ich nutze die Debug-Tools der Plattformen, um die Vorschau manuell neu zu laden, falls noch alte Daten im Cache liegen. Dadurch siehst du sofort, ob Titel, Beschreibung und Bild korrekt greifen. Auch technische Probleme wie doppelte Tags oder falsche URLs fallen so früh auf. Für die Gesamtperformance und Indexierung hilft ein sauberes Tracking-Setup, das ich unter anderem mit dem Beitrag Search Console Setup vervollständige.

Spezialfälle: Produkte, Veranstaltungen und Videos

Produktsnippets profitieren von zusätzlichen Meta-Feldern wie Preis, Verfügbarkeit oder Marke. Bei Events helfen Datum, Ort und Veranstalter, damit die Vorschau den Nutzen auf den ersten Blick vermittelt. Für Videos ergänze ich Dauer, Vorschaubild und Videourl, damit Feeds eine attraktive Kachel erzeugen. Viele SEO-Plugins bieten passende Felder oder erkennen Inhalte automatisch, was den Workflow deutlich beschleunigt. Ich prüfe die Ausgabe stets auf Konsistenz mit den OG-Grundtags.

Performance, Caching und Bild-CDN

Performance spürt man bei jeder Vorschau, die schnell lädt und klar wirkt. Ich reduziere die Bildgröße, setze moderne Formate wie WebP ein und liefere die Grafik mit einem CDN aus. In Caching-Plugins schließe ich Vorschauseiten aus, wenn sie falsche Versionen festhalten, und leere den Cache nach Bildwechseln. Doppelte OG-Tags aus mehreren Plugins meide ich, indem ich nur eine Lösung aktiv lasse. So bleiben Auslieferung und Darstellung zuverlässig.

Hosting-Tipp: Schnelle Server für starke Social-Snippets

Hosting entscheidet mit, wie flott Bilder, HTML und Metadaten ausgespielt werden. Für OG-optimierte Projekte schaue ich auf PHP-Version, HTTP/2 oder HTTP/3, Object-Cache und Bild-Processing. Gute Anbieter liefern saubere Varnish- oder Nginx-Configs, die sich nicht mit WordPress-Caching beißen. Bei vielen Produktbildern zahlt sich ein performantes Storage-System aus. Die folgende Tabelle gibt eine kompakte Orientierung zur OG-Tauglichkeit.

Anbieter Open Graph Unterstützung SEO Tools & Social Meta Performance Platzierung
webhoster.de Sehr gut RankMath, OG, Yoast Sehr hoch 1
AnbieterB Gut OG, Yoast Hoch 2
AnbieterC Befriedigend Basic Mittel 3

Teilen-Buttons modern umsetzen

Sharing gelingt angenehmer, wenn Nutzer Inhalte nativ teilen können. Ich setze die systemeigene Teilen-Funktion im Browser oder auf dem Smartphone ein, statt nur auf Skript-Buttons zu vertrauen. Das verbessert die Nutzererfahrung und spart zusätzliche Requests externer Widgets. Wie das funktioniert, zeige ich im Beitrag zur Web Share API. In Kombination mit starken OG-Snippets wirkt das Ergebnis stimmig und klickstark.

Häufige Fehler und schnelle Lösungen

Doppelte OG-Tags entstehen oft, wenn mehrere Plugins die gleichen Metadaten ausgeben. Ich deaktiviere überflüssige Module und lasse nur eine Quelle schreiben. Falsch zugeschnittene Bilder führen zu abgeschnittenen Elementen in Feeds, daher prüfe ich Formate vorab. Veraltete Caches kaschieren Änderungen, also erzwinge ich eine Aktualisierung über die jeweiligen Debug-Tools. Unerwartete Titel kommen häufig von falschen Variablen, was ich mit festen Feldern pro Beitrag löse.

Twitter Cards (X) und Plattform-Unterschiede

X (Twitter) nutzt eigene Metatags, akzeptiert aber OG-Werte als Fallback. Für eine optimale Darstellung setze ich ergänzend Twitter Cards. Für Link-Previews ist summary_large_image die sicherste Wahl, weil sie großflächige Bilder zeigt. LinkedIn und Facebook lesen primär OG-Tags; Pinterest nutzt OG und eigene Rich-Pin-Felder. Einheitliche Werte über alle Plattformen verhindern widersprüchliche Snippets.

<!-- Twitter Cards -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="<?php echo esc_attr( get_the_title() ); ?>" />
<meta name="twitter:description" content="<?php echo esc_attr( wp_strip_all_tags( get_the_excerpt() ) ); ?>" />
<meta name="twitter:image" content="<?php echo esc_url( $img_src ); ?>" />
<!-- Optional: Account-Zuordnung -->
<meta name="twitter:site" content="@deinaccount" />
<meta name="twitter:creator" content="@autoraccount" />

Wichtig: Ich nutze absolute, öffentlich erreichbare Bild-URLs ohne Login-Barrieren. Einige Netzwerke folgen nicht jedem Redirect oder lehnen Bilder mit ungewöhnlichen MIME-Typen ab. Ein sauberer 200-OK-Status und die korrekte Content-Type-Angabe image/webp oder image/jpeg verhindern Fehlinterpretationen.

Erweiterte OG-Felder für Artikel und internationale Websites

Artikel-Metadaten helfen Netzwerken, Aktualität und Relevanz zu verstehen. Ich ergänze daher Zeitstempel und Kategorien, wenn ich manuell ausspiele oder ein Plugin dies unterstützt.

  • article:published_time und article:modified_time im ISO-8601-Format
  • article:author (Name oder Profil-URL, je nach Plugin)
  • article:section (z. B. Kategorie)
  • article:tag (mehrere Tags möglich)
<meta property="article:published_time" content="<?php echo get_post_time( DATE_W3C ); ?>" />
<meta property="article:modified_time" content="<?php echo get_post_modified_time( DATE_W3C ); ?>" />
<meta property="article:section" content="<?php echo esc_attr( get_primary_category_name() ); ?>" />
<?php foreach ( get_the_tags() ?: [] as $tag ) : ?>
<meta property="article:tag" content="<?php echo esc_attr( $tag->name ); ?>" />
<?php endforeach; ?>

Internationalisierung löse ich mit og:locale und og:locale:alternate. Für mehrsprachige Sites weise ich jedem Sprach-Dokument seine eigene og:url und Locale zu (z. B. de_DE, en_US) und ergänze Alternativen. So liefern Feeds Nutzern die passende Sprachversion.

<meta property="og:locale" content="de_DE" />
<meta property="og:locale:alternate" content="en_US" />
<meta property="og:locale:alternate" content="fr_FR" />

Wichtig bleibt, dass og:url auf die kanonische URL zeigt. Trackings wie UTM-Parameter füge ich nicht in og:url ein, sondern in den eigentlichen Share-Link. So bleibt die Vorschau konsistent und der Share-Graph bündelt Interaktionen nicht auf Varianten.

Mehrere Bilder, Dimensionen und Alt-Texte

Mehrere og:image-Einträge sind erlaubt. Netzwerke wählen daraus oft das passendste Motiv. Ich liefere zusätzlich Breite, Höhe, Typ und Alt-Text mit, damit Cropping und Auswahl sauber funktionieren.

<?php
$images = [];
if ( has_post_thumbnail() ) {
  $thumb_id = get_post_thumbnail_id();
  $images[] = wp_get_attachment_image_src( $thumb_id, 'full' );
}
$fallback = get_template_directory_uri() . '/assets/images/og-fallback.jpg';
$images[] = [ $fallback, 1200, 630, true ];

foreach ( $images as $img ) :
  $src = $img[0];
  $w   = $img[1] ?? null;
  $h   = $img[2] ?? null;
?>
<meta property="og:image" content="<?php echo esc_url( $src ); ?>" />
<?php if ( $w && $h ) : ?>
<meta property="og:image:width" content="<?php echo (int) $w; ?>" />
<meta property="og:image:height" content="<?php echo (int) $h; ?>" />
<?php endif; ?>
<meta property="og:image:alt" content="<?php echo esc_attr( get_the_title() ); ?>" />
<meta property="og:image:type" content="image/webp" />
<?php endforeach; ?>

Ich achte darauf, dass die Bilder öffentlich abrufbar sind (kein NoIndex/NoAuth), über HTTPS mit gültigem Zertifikat ausgeliefert werden und nicht an Cookies oder Referer-Prüfungen scheitern. CDNs dürfen Signaturen/Token nutzen, sollten Crawlern aber stabile, direkt abrufbare URLs bieten.

Technische Checks: Statuscodes, Redirects und Sicherheit

Saubere Auslieferung verhindert kaputte Previews. Ich prüfe für die Ziel-URL und og:image:

  • HTTP-Status 200 (keine Ketten aus 301/302, keine 403/404)
  • Korrekte Content-Types (text/html, image/webp/jpeg/png)
  • Keine robots-Tags, die die Vorschau blockieren (kein noimageindex auf Bildern)
  • Maximale Dateigröße moderat halten (zu große Bilder können abgelehnt werden)
  • Server-Firewalls lassen User-Agents wie facebookexternalhit, Twitterbot, LinkedInBot, PinterestCrawler durch

Bei aggressivem Rate-Limiting und WAFs whiteliste ich gängige Crawler-IPs oder -Agents. Hotlink-Schutz und signierte CDN-URLs konfiguriere ich so, dass Share-Crawler nicht ausgesperrt werden. Mixed Content (http-Bilder auf https-Seiten) vermeide ich konsequent.

Headless, Block-Themes und doppelte Metadaten

Block-Themes und Headless-Setups erfordern klare Zuständigkeiten. In klassischen Themes hänge ich meine Ausgabe an wp_head. FSE/Block-Themes können bereits Metadaten generieren, die ich entweder erweitere oder gezielt deaktiviere. In Headless-Umgebungen stelle ich sicher, dass OG- und Twitter-Tags serverseitig gerendert werden, damit Crawler sie ohne JavaScript sehen.

Doppelte Metadaten verhindere ich, indem ich die OG-Ausgabe eines Plugins abschalte, sobald ich manuell rendere (oder umgekehrt). Beispiele:

<?php
// Yoast OG/Twitter entfernen (wenn ich eigene Tags ausgebe)
add_action( 'init', function() {
  if ( defined( 'WPSEO_VERSION' ) ) {
    remove_action( 'wpseo_head', [ 'WPSEO_OpenGraph', 'opengraph' ], 30 );
    remove_action( 'wpseo_head', [ 'WPSEO_Twitter', 'get_instance' ], 40 );
  }
});

// RankMath Social entfernen
add_action( 'init', function() {
  if ( class_exists( '\\RankMath\\Frontend\\Social' ) ) {
    remove_action( 'wp_head', [ \RankMath\Frontend\Social::get(), 'add_tags' ], 20 );
  }
});

Bei Page-Buildern prüfe ich, ob sie eigene Social-Module mitbringen. Ich entscheide mich bewusst für eine Quelle, die OG und Twitter konsistent liefert, um Konflikte zu vermeiden.

Workflow, Governance und Redaktion

Konsistenz entsteht, wenn OG-Felder Teil deines Workflows sind. Ich arbeite mit Vorlagen für Titel- und Beschreibungslängen (z. B. 55–70 Zeichen Titel, 110–160 Zeichen Beschreibung) und klaren Bild-Richtlinien. Redakteure erhalten ein kurzer Check vor Veröffentlichung: OG-Felder gesetzt, Bild geprüft, Debug-Tools aktualisiert.

  • Bild-Templates definieren (Rand, Logo, Typo, Kontrast, 1200×630 Basis)
  • OG-Felder in den Publish-Flow integrieren (Pflichtfelder im Plugin)
  • UTM-Parameter nur in Share-Links, nicht in og:url
  • Bei Updates modified_time pflegen und Vorschaubilder neu scrapen
  • Für Kampagnen konsistente Serienbilder und Hashtag-Strategie

Für Shops plane ich einen Produkt-Workflow: Standard-OG-Bild pro Kategorie, abweichende Einzelbilder bei Topsellern, regelmäßige Prüfung auf Verfügbarkeitswechsel. In mehrsprachigen Projekten halte ich Übersetzungen der OG-Felder strikt parallel, damit keine Sprachmischungen in Feeds entstehen.

DSGVO-freundliche Sharing-Implementierungen

Privacy beachte ich, indem ich auf schwergewichtige Social-Skripte verzichte. Die native Teilen-Funktion (Web Share API) oder einfache, selbst gebaute Share-Links sind ressourcenschonend und datensparsam. Zählfunktionen für Shares realisiere ich serverseitig oder verzichte bewusst darauf, um keine unnötigen Requests an Drittdienste zu senden. So bleiben Performance und Datenschutz im Lot.

Praktische Checkliste vor dem Teilen

  • og:title prägnant, markenkonform, ohne Ellipsen im Feed
  • og:description mit klarem Nutzen, keine reinen Keywords
  • og:url kanonisch, ohne Session-IDs/UTMs
  • og:image 1200×630 (oder größer im gleichen Seitenverhältnis), WebP/JPEG, unter 1–2 MB
  • og:image:width/height gesetzt, Alt-Text vorhanden
  • og:type korrekt (article, product, website, video)
  • article:published_time/modified_time gepflegt
  • Twitter Cards aktiv (summary_large_image)
  • Nur eine OG-Quelle aktiv (kein doppelter Output)
  • Debugger je Plattform ausführen, Cache refresh erzwingen
  • HTTP 200 für Seite und Bild, keine Redirect-Ketten
  • CDN/Firewall lässt Social-Crawler durch

Kurz zusammengefasst

Open Graph macht deine WordPress-Links auf Social Media klar, ansprechend und konsistent. Mit den Kerntags, einem passenden Bild und sauberem Caching steuerst du die Vorschau zuverlässig. Plugins erleichtern den Einstieg, manuelle Einbindung gibt dir maximale Feinabstimmung. Prüfe jede Änderung im Debugger, bevor du Inhalte bewirbst, und halte die Bildqualität hoch. So erzielst du mehr Klicks, stärkere Interaktion und eine sichtbare Steigerung deines Traffics.

Aktuelle Artikel