Wenn jemand deine WordPress-Seite auf X (ehemals Twitter) teilt, sucht die Plattform nach Twitter Card Meta-Tags, um eine ansprechende Vorschau mit Bild, Titel und Beschreibung zu generieren. Ohne diese Tags erscheinen geteilte Links als einfache Text-URLs, was die Klickrate und das Engagement drastisch reduziert. Twitter Cards sind eine der einfachsten Methoden, um deine Inhalte in Social-Media-Feeds hervorzuheben, und die Einrichtung dauert nur wenige Minuten.
Twitter Card-Typen und ihre Wirkung verstehen
Bevor du mit der Implementierung beginnst, solltest du die verschiedenen Twitter Card-Typen kennen und wissen, wann du welchen einsetzt:
- Summary Card: Zeigt ein kleines quadratisches Thumbnail neben Titel und Beschreibung. Eignet sich gut fuer Startseiten, Kategorieseiten und Inhalte, bei denen das Bild zweitrangig ist.
- Summary Card mit grossem Bild: Zeigt ein grosses, prominentes Bild ueber dem Titel und der Beschreibung. Die beste Wahl fuer Blogbeitraege, Artikel, Produktseiten und alle Inhalte, bei denen eine visuelle Vorschau das Engagement steigert.
- Player Card: Bettet einen Video- oder Audio-Player direkt in den Tweet ein. Erfordert eine Genehmigung von X und wird von Medienplattformen wie YouTube oder SoundCloud verwendet.
- App Card: Konzipiert fuer die Bewerbung mobiler Apps mit einem direkten Download-Link. Erfordert ebenfalls eine Genehmigung von X.
Fuer die meisten WordPress-Seiten ist die Summary Card mit grossem Bild die beste Standardeinstellung. Studien zeigen konsistent, dass Tweets mit grossen Bild-Cards zwei- bis dreimal mehr Engagement erzielen als reine Text-Tweets. Das visuelle Element faengt den Blick ein, waehrend Nutzer durch ihren Feed scrollen, und erhoeht die Wahrscheinlichkeit, dass sie anhalten und klicken.
Erforderliche Twitter Card Meta-Tags im Detail
Jede Twitter Card benoetigt bestimmte Meta-Tags im <head>-Bereich deiner Seite. Hier ist die Funktion jedes Tags:
twitter:card: Definiert den Card-Typ. Setze diesen aufsummaryodersummary_large_image.twitter:title: Der in der Card angezeigte Titel. Halte ihn unter 70 Zeichen, um Abschneidung zu vermeiden.twitter:description: Eine kurze Zusammenfassung des Inhalts. Halte sie unter 200 Zeichen. Dieser Text erscheint unter dem Titel in der Card-Vorschau.twitter:image: Die URL zum Bild in der Card. Fuer summary_large_image Cards verwende Bilder mit mindestens 1200 x 628 Pixeln. Fuer Summary Cards sollten Bilder mindestens 144 x 144 Pixel gross sein. Die maximale Dateigroesse betraegt 5 MB.twitter:image:alt: Alternativer Text fuer das Bild, wichtig fuer die Barrierefreiheit. Beschreibe den Bildinhalt in unter 420 Zeichen.twitter:site: Der X-Handle deiner Website (z. B.@DeineSite). Optional, hilft aber bei der Zuordnung.twitter:creator: Der X-Handle des Inhaltsautors. Nuetzlich fuer Blogs mit mehreren Autoren.
X unterstuetzt auch einen Fallback-Mechanismus. Wenn Twitter Card Tags fehlen, versucht die Plattform, stattdessen Open Graph Tags (og:title, og:description, og:image) zu verwenden. Das bedeutet, dass deine Links grundlegende Vorschauen erhalten, wenn du bereits Open Graph Tags eingerichtet hast, auch ohne dedizierte Twitter Card Tags. Explizite Twitter Card Tags geben dir jedoch mehr Kontrolle darueber, wie deine Inhalte speziell auf X erscheinen.
Twitter Cards mit Yoast SEO einrichten
Yoast SEO ist das beliebteste WordPress-SEO-Plugin und enthaelt eine integrierte Twitter Card-Unterstuetzung. Wenn du Yoast bereits verwendest, sind Twitter Cards mit wenigen Klicks aktiviert:
- Gehe zu SEO > Social in deinem WordPress-Admin-Panel.
- Klicke auf den Tab X (Twitter).
- Aktiviere "Twitter Card Meta-Daten hinzufuegen".
- Waehle den Standard-Card-Typ. Fuer die meisten Seiten empfiehlt sich Summary mit grossem Bild.
- Speichere deine Aenderungen.
Ab diesem Zeitpunkt generiert Yoast automatisch Twitter Card Tags fuer jeden Beitrag und jede Seite auf deiner Website, indem es Titel, Beschreibung und Beitragsbild aus deinem Inhalt verwendet.
Um die Twitter Card fuer einen bestimmten Beitrag anzupassen, oeffne den Beitragseditor und scrolle zur Yoast-Meta-Box. Klicke auf den Social-Tab (das Teilen-Symbol) und waehle dann den X-Tab. Hier kannst du den Standardtitel, die Beschreibung und das Bild fuer diese bestimmte Seite ueberschreiben. Das ist nuetzlich, wenn die Social-Vorschau sich vom SEO-Titel auf der Seite unterscheiden soll, zum Beispiel mit einer aufmerksamkeitsstarkeren Ueberschrift fuer das Social-Sharing.
Twitter Cards mit Rank Math einrichten
Rank Math ist ein weiteres beliebtes SEO-Plugin mit umfassender Social-Media-Integration:
- Gehe zu Rank Math > Titel & Meta > Globale Meta.
- Scrolle zum Abschnitt Social Meta.
- Aktiviere den Twitter Card Typ und waehle dein bevorzugtes Card-Format.
- Optional: Gib deinen Standard-X-Benutzernamen in den Twitter-Feldern ein.
- Speichere deine Aenderungen.
Fuer die Anpassung einzelner Beitraege oeffne einen beliebigen Beitrag oder eine Seite im Editor. Klicke auf das Rank Math-Symbol in der oberen Werkzeugleiste und navigiere zum Social-Tab. Wechsle zum X-Bereich, um individuelle Titel, Beschreibungen und Bilder fuer diesen spezifischen Inhalt festzulegen.
Rank Math ermoeglicht es auch, verschiedene Social-Bilder pro Beitrag einzustellen, was hilfreich ist, wenn dein Beitragsbild nicht das richtige Seitenverhaeltnis fuer Twitter Cards hat. Du kannst ein separates 1200 x 628 Pixel grosses Bild hochladen, das speziell fuer das Social-Sharing optimiert ist.
Twitter Cards mit All in One SEO (AIOSEO) einrichten
All in One SEO bietet ebenfalls Twitter Card-Funktionalitaet:
- Navigiere zu All in One SEO > Soziale Netzwerke.
- Klicke auf den Tab X (Twitter).
- Aktiviere Twitter Card und waehle deinen Standard-Card-Typ.
- Gib den X-Benutzernamen deiner Seite ein.
- Konfiguriere die Standardeinstellungen fuer Beitraege und Seiten.
- Aenderungen speichern.
AIOSEO bietet auch Twitter Card-Einstellungen auf Beitragsebene im Editor unter dem AIOSEO-Einstellungen-Panel, Social-Tab.
Manuelle Twitter Card Implementierung ohne Plugin
Wenn du kein SEO-Plugin verwenden moechtest oder die volle Kontrolle ueber die Ausgabe benoetigs, kannst du Twitter Card Tags manuell ueber die functions.php deines Themes oder ein eigenes Site-spezifisches Plugin hinzufuegen:
function custom_twitter_cards() {
if (is_singular()) {
global $post;
$title = get_the_title();
$url = get_permalink();
// Beschreibung aus Auszug oder Inhalt generieren
$excerpt = has_excerpt()
? wp_strip_all_tags(get_the_excerpt())
: wp_trim_words(wp_strip_all_tags($post->post_content), 30);
// Beitragsbild holen
$image = get_the_post_thumbnail_url($post->ID, 'large');
// Twitter-Handle des Autors aus User-Meta holen
$author_twitter = get_the_author_meta('twitter', $post->post_author);
echo '<meta name="twitter:card" content="summary_large_image" />' . "
";
echo '<meta name="twitter:title" content="' . esc_attr($title) . '" />' . "
";
echo '<meta name="twitter:description" content="' . esc_attr($excerpt) . '" />' . "
";
echo '<meta name="twitter:url" content="' . esc_url($url) . '" />' . "
";
if ($image) {
echo '<meta name="twitter:image" content="' . esc_url($image) . '" />' . "
";
// Alt-Text vom Beitragsbild hinzufuegen
$thumbnail_id = get_post_thumbnail_id($post->ID);
$alt_text = get_post_meta($thumbnail_id, '_wp_attachment_image_alt', true);
if ($alt_text) {
echo '<meta name="twitter:image:alt" content="' . esc_attr($alt_text) . '" />' . "
";
}
}
// Twitter-Handle der Website
echo '<meta name="twitter:site" content="@DeinSiteHandle" />' . "
";
// Twitter-Handle des Autors (falls gesetzt)
if ($author_twitter) {
echo '<meta name="twitter:creator" content="@' . esc_attr($author_twitter) . '" />' . "
";
}
} elseif (is_front_page()) {
echo '<meta name="twitter:card" content="summary_large_image" />' . "
";
echo '<meta name="twitter:title" content="' . esc_attr(get_bloginfo('name')) . '" />' . "
";
echo '<meta name="twitter:description" content="' . esc_attr(get_bloginfo('description')) . '" />' . "
";
echo '<meta name="twitter:site" content="@DeinSiteHandle" />' . "
";
}
}
add_action('wp_head', 'custom_twitter_cards');Ersetze @DeinSiteHandle durch deinen tatsaechlichen X-Benutzernamen. Um die Twitter-Handles der Autoren zu speichern, kannst du ein benutzerdefiniertes User-Meta-Feld namens twitter zu jedem Benutzerprofil hinzufuegen oder ein Plugin wie "Extra User Details" verwenden.
Bildspezifikationen und Best Practices fuer Twitter Cards
Das Bild ist das wichtigste Element einer Twitter Card. Wenn du es richtig machst, hat das einen erheblichen Einfluss auf das Engagement:
- Summary Card mit grossem Bild: Verwende Bilder mit einem 2:1-Seitenverhaeltnis. Die empfohlene Groesse ist 1200 x 628 Pixel. Minimum ist 300 x 157 Pixel, aber groessere Bilder sehen deutlich besser aus, insbesondere auf hochaufloesenden Bildschirmen.
- Summary Card: Verwende quadratische Bilder mit einem 1:1-Seitenverhaeltnis. Die empfohlene Groesse ist 400 x 400 Pixel. Minimum ist 144 x 144 Pixel.
- Dateiformat: JPG, PNG, WEBP und GIF werden unterstuetzt. JPG ist die sicherste Wahl fuer Fotos. PNG eignet sich am besten fuer Bilder mit Text oder transparenten Bereichen (Transparenz wird allerdings auf weissem Hintergrund zusammengesetzt).
- Dateigroesse: Halte Bilder unter 5 MB. Groessere Dateien werden moeglicherweise nicht geladen oder vom Card-Prozessor ignoriert.
- Textlastige Bilder vermeiden: X beschneidet Bilder auf Mobil und Desktop unterschiedlich. Text an den Raendern eines Bildes kann abgeschnitten werden. Halte wichtige Inhalte zentriert.
- Einzigartige Bilder pro Beitrag verwenden: Verwende nicht dasselbe Bild fuer jeden Beitrag. Einzigartige Visuals helfen deinen Inhalten, sich abzuheben, und verhindern, dass deine Tweets monoton wirken.
Zusammenspiel von Twitter Cards und Open Graph Tags
X verwendet eine bestimmte Fallback-Hierarchie, wenn es entscheidet, was in einer Card-Vorschau angezeigt wird:
- Zuerst werden explizite
twitter:*Meta-Tags geprueft. - Wenn ein
twitter:*Tag fehlt, wird auf das entsprechende Open Graph Tag zurueckgegriffen (og:title,og:description,og:image). - Wenn beides fehlt, wird das
<title>-Tag der Seite verwendet und versucht, eine Beschreibung aus dem Inhalt zu extrahieren.
Das bedeutet, dass du nicht unbedingt beide Tag-Sets brauchst. Wenn deine Open Graph Tags bereits eingerichtet sind (z. B. fuer das Facebook-Sharing), funktionieren grundlegende Twitter Card-Vorschauen. Es gibt jedoch Faelle, in denen du unterschiedliche Inhalte auf verschiedenen Plattformen haben moechtest. Zum Beispiel koenntest du ein Querformat-Bild fuer X und ein quadratisches Bild fuer Facebook verwenden. In diesem Szenario gibt dir das Setzen von sowohl og:image als auch twitter:image auf verschiedene URLs plattformspezifische Kontrolle.
Der twitter:card-Tag hat kein Open Graph-Aequivalent, daher musst du ihn immer explizit einbinden, um den Card-Typ zu definieren. Ohne ihn rendert X ueberhaupt keine Card, selbst wenn alle anderen Tags vorhanden sind.
Twitter Cards testen und debuggen
Nachdem du die Tags hinzugefuegt hast, ueberprueefe, ob alles korrekt funktioniert:
- Meta-Tags mit InspectWP pruefen: Analysiere deine URL mit InspectWP, um zu verifizieren, dass alle Twitter Card Meta-Tags im Seitenquelltext vorhanden sind. InspectWP listet jeden gefundenen Meta-Tag auf, sodass du die korrekten Werte bestaetigen kannst.
- Direkt auf X testen: Poste einen Link in einem Tweet (du kannst ihn sofort danach loeschen). Die Card-Vorschau im Tweet-Composer zeigt dir genau, wie dein Link erscheinen wird. Wenn die Card nicht angezeigt wird, warte eine Minute und versuche es erneut. X kann etwas Zeit benoetigen, um Card-Daten fuer neue URLs abzurufen und zu cachen.
- Cache-Aktualisierung erzwingen: X cached Card-Daten aggressiv. Wenn du deine Tags aktualisiert hast, aber immer noch alte Daten siehst, haenge einen Query-Parameter wie
?v=2an deine URL an. Das zwingt X, sie als neue URL zu behandeln und die Card-Informationen neu abzurufen. - HTTPS-Probleme pruefen: Alle Bild-URLs in Twitter Card Tags muessen HTTPS verwenden. HTTP-Bild-URLs werden blockiert, und die Card wird ohne Bild gerendert.
- Bilddimensionen validieren: Wenn deine Card ein winziges Thumbnail statt der grossen Bildvorschau zeigt, ist dein Bild wahrscheinlich kleiner als die Mindestabmessungen. Pruefe das Seitenverhaeltnis und die Pixelgroesse.
Haeufige Twitter Card-Probleme und Loesungen
- Card wird gar nicht angezeigt: Stelle sicher, dass der
twitter:cardMeta-Tag vorhanden ist. Dieser Tag ist erforderlich. Ohne ihn ignoriert X alle anderen Twitter-Meta-Tags. Pruefe auch, ob deine Seite oeffentlich zugaenglich ist und nicht durch eine Login-Wand, Passwortschutz oder robots.txt blockiert wird. - Falsches Bild angezeigt: X cached Card-Daten, daher werden kuerzlich geaenderte Bilder moeglicherweise nicht sofort aktualisiert. Verwende einen Cache-Busting-Query-Parameter an der URL, um eine Aktualisierung zu erzwingen. Ueberprueefe auch, ob der
twitter:image-Tag auf die korrekte, oeffentlich zugaengliche URL zeigt. - Bild zu klein oder schlecht zugeschnitten: Verwende Bilder, die die Mindestgroessenanforderungen erfuellen. Fuer summary_large_image Cards bleibe bei oder ueber 1200 x 628 Pixel. Vermeide es, wichtige Inhalte nahe an den Raendern zu platzieren.
- Doppelte Meta-Tags: Wenn du ein SEO-Plugin verwendest und zusaetzlich manuellen Code hast, der Twitter Card Tags hinzufuegt, erhaltst du doppelte Tags. X verwendet typischerweise den ersten, den es findet, aber Duplikate koennen unvorhersehbares Verhalten verursachen. Entferne den manuellen Code, wenn ein Plugin das uebernimmt, oder umgekehrt.
- Caching-Plugin-Interferenz: Wenn du ein Seiten-Caching-Plugin verwendest, leere den Cache nach der Aktualisierung deiner Twitter Card-Konfiguration. Andernfalls enthaelt die gecachte Version deiner Seiten moeglicherweise noch die alten (oder fehlenden) Meta-Tags.
Best Practices fuer die WordPress Twitter Card-Optimierung
- Standard auf summary_large_image setzen: Das grosse Bildformat uebertrifft das kleine Thumbnail-Format konsistent bei den Engagement-Metriken. Verwende es fuer alle Blogbeitraege und Artikel.
- Ueberzeugende Beschreibungen verfassen: Der twitter:description-Text ist dein Pitch. Schreibe ihn wie eine Mini-Ueberschrift, die zum Klicken animiert. Halte ihn unter 200 Zeichen und stelle die wichtigsten Informationen an den Anfang.
- Sowohl OG- als auch Twitter-Tags einrichten: Auch wenn X auf OG-Tags zurueckfaellt, stellen beide Tag-Sets konsistente Vorschauen auf allen sozialen Plattformen sicher, einschliesslich Facebook, LinkedIn, Slack und Messaging-Apps.
- Nach Theme- oder Plugin-Updates testen: Theme- oder Plugin-Updates koennen manchmal die Meta-Tag-Ausgabe beeintraechtigen. Fuehre nach grossen Updates einen schnellen InspectWP-Scan durch, um zu verifizieren, dass deine Twitter Cards noch korrekt funktionieren.
- Standard-Fallback-Bild verwenden: Konfiguriere ein seitenweites Standardbild in den Einstellungen deines SEO-Plugins. Das stellt sicher, dass auch Seiten ohne Beitragsbild ein gebrandetes Visual in der Twitter Card anzeigen, z. B. dein Logo oder eine generische Markengrafik.