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 für Startseiten, Kategorieseiten und Inhalte, bei denen das Bild zweitrangig ist.
- Summary Card mit großem Bild: Zeigt ein großes, prominentes Bild über dem Titel und der Beschreibung. Die beste Wahl für Blogbeiträge, 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 für die Bewerbung mobiler Apps mit einem direkten Download-Link. Erfordert ebenfalls eine Genehmigung von X.
Für die meisten WordPress-Seiten ist die Summary Card mit großem Bild die beste Standardeinstellung. Studien zeigen konsistent, dass Tweets mit großen Bild-Cards zwei- bis dreimal mehr Engagement erzielen als reine Text-Tweets. Das visuelle Element fängt den Blick ein, während Nutzer durch ihren Feed scrollen, und erhöht die Wahrscheinlichkeit, dass sie anhalten und klicken.
Erforderliche Twitter Card Meta-Tags im Detail
Jede Twitter Card benötigt 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. Für summary_large_image Cards verwende Bilder mit mindestens 1200 x 628 Pixeln. Für Summary Cards sollten Bilder mindestens 144 x 144 Pixel groß sein. Die maximale Dateigröße beträgt 5 MB.twitter:image:alt: Alternativer Text für das Bild, wichtig für 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. Nützlich für Blogs mit mehreren Autoren.
X unterstützt 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 darüber, wie deine Inhalte speziell auf X erscheinen.
Twitter Cards mit Yoast SEO einrichten
Yoast SEO ist das beliebteste WordPress-SEO-Plugin und enthält eine integrierte Twitter Card-Unterstützung. 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 hinzufügen".
- Wähle den Standard-Card-Typ. Für die meisten Seiten empfiehlt sich Summary mit großem Bild.
- Speichere deine Änderungen.
Ab diesem Zeitpunkt generiert Yoast automatisch Twitter Card Tags für jeden Beitrag und jede Seite auf deiner Website, indem es Titel, Beschreibung und Beitragsbild aus deinem Inhalt verwendet.
Um die Twitter Card für einen bestimmten Beitrag anzupassen, öffne den Beitragseditor und scrolle zur Yoast-Meta-Box. Klicke auf den Social-Tab (das Teilen-Symbol) und wähle dann den X-Tab. Hier kannst du den Standardtitel, die Beschreibung und das Bild für diese bestimmte Seite überschreiben. Das ist nützlich, wenn die Social-Vorschau sich vom SEO-Titel auf der Seite unterscheiden soll, zum Beispiel mit einer aufmerksamkeitsstarkeren Überschrift für 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 wähle dein bevorzugtes Card-Format.
- Optional: Gib deinen Standard-X-Benutzernamen in den Twitter-Feldern ein.
- Speichere deine Änderungen.
Für die Anpassung einzelner Beiträge öffne 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 für diesen spezifischen Inhalt festzulegen.
Rank Math ermöglicht es auch, verschiedene Social-Bilder pro Beitrag einzustellen, was hilfreich ist, wenn dein Beitragsbild nicht das richtige Seitenverhältnis für Twitter Cards hat. Du kannst ein separates 1200 x 628 Pixel großes Bild hochladen, das speziell für das Social-Sharing optimiert ist.
Twitter Cards mit All in One SEO (AIOSEO) einrichten
All in One SEO bietet ebenfalls Twitter Card-Funktionalität:
- Navigiere zu All in One SEO > Soziale Netzwerke.
- Klicke auf den Tab X (Twitter).
- Aktiviere Twitter Card und wähle deinen Standard-Card-Typ.
- Gib den X-Benutzernamen deiner Seite ein.
- Konfiguriere die Standardeinstellungen für Beiträge und Seiten.
- Änderungen 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 möchtest oder die volle Kontrolle über die Ausgabe benötigst, kannst du Twitter Card Tags manuell über die functions.php deines Themes oder ein eigenes Site-spezifisches Plugin hinzufügen:
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 tatsächlichen X-Benutzernamen. Um die Twitter-Handles der Autoren zu speichern, kannst du ein benutzerdefiniertes User-Meta-Feld namens twitter zu jedem Benutzerprofil hinzufügen oder ein Plugin wie „Extra User Details" verwenden.
Bildspezifikationen und Best Practices für 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 großem Bild: Verwende Bilder mit einem 2:1-Seitenverhältnis. Die empfohlene Größe ist 1200 x 628 Pixel. Minimum ist 300 x 157 Pixel, aber größere Bilder sehen deutlich besser aus, insbesondere auf hochauflösenden Bildschirmen.
- Summary Card: Verwende quadratische Bilder mit einem 1:1-Seitenverhältnis. Die empfohlene Größe ist 400 x 400 Pixel. Minimum ist 144 x 144 Pixel.
- Dateiformat: JPG, PNG, WEBP und GIF werden unterstützt. JPG ist die sicherste Wahl für Fotos. PNG eignet sich am besten für Bilder mit Text oder transparenten Bereichen (Transparenz wird allerdings auf weißem Hintergrund zusammengesetzt).
- Dateigröße: Halte Bilder unter 5 MB. Größere Dateien werden möglicherweise nicht geladen oder vom Card-Prozessor ignoriert.
- Textlastige Bilder vermeiden: X beschneidet Bilder auf Mobil und Desktop unterschiedlich. Text an den Rändern eines Bildes kann abgeschnitten werden. Halte wichtige Inhalte zentriert.
- Einzigartige Bilder pro Beitrag verwenden: Verwende nicht dasselbe Bild für 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 geprüft. - Wenn ein
twitter:*Tag fehlt, wird auf das entsprechende Open Graph Tag zurückgegriffen (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. für das Facebook-Sharing), funktionieren grundlegende Twitter Card-Vorschauen. Es gibt jedoch Fälle, in denen du unterschiedliche Inhalte auf verschiedenen Plattformen haben möchtest. Zum Beispiel könntest du ein Querformat-Bild für X und ein quadratisches Bild für 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-Äquivalent, daher musst du ihn immer explizit einbinden, um den Card-Typ zu definieren. Ohne ihn rendert X überhaupt keine Card, selbst wenn alle anderen Tags vorhanden sind.
Twitter Cards testen und debuggen
Nachdem du die Tags hinzugefügt hast, überprüfe, ob alles korrekt funktioniert:
- Meta-Tags mit InspectWP prüfen: 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 bestätigen kannst.
- Direkt auf X testen: Poste einen Link in einem Tweet (du kannst ihn sofort danach löschen). 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 benötigen, um Card-Daten für 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, hänge 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 prüfen: Alle Bild-URLs in Twitter Card Tags müssen HTTPS verwenden. HTTP-Bild-URLs werden blockiert, und die Card wird ohne Bild gerendert.
- Bilddimensionen validieren: Wenn deine Card ein winziges Thumbnail statt der großen Bildvorschau zeigt, ist dein Bild wahrscheinlich kleiner als die Mindestabmessungen. Prüfe das Seitenverhältnis und die Pixelgröße.
Häufige Twitter Card-Probleme und Lösungen
- 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. Prüfe auch, ob deine Seite öffentlich zugänglich ist und nicht durch eine Login-Wand, Passwortschutz oder robots.txt blockiert wird. - Falsches Bild angezeigt: X cached Card-Daten, daher werden kürzlich geänderte Bilder möglicherweise nicht sofort aktualisiert. Verwende einen Cache-Busting-Query-Parameter an der URL, um eine Aktualisierung zu erzwingen. Überprüfe auch, ob der
twitter:image-Tag auf die korrekte, öffentlich zugängliche URL zeigt. - Bild zu klein oder schlecht zugeschnitten: Verwende Bilder, die die Mindestgrößenanforderungen erfüllen. Für summary_large_image Cards bleibe bei oder über 1200 x 628 Pixel. Vermeide es, wichtige Inhalte nahe an den Rändern zu platzieren.
- Doppelte Meta-Tags: Wenn du ein SEO-Plugin verwendest und zusätzlich manuellen Code hast, der Twitter Card Tags hinzufügt, erhältst du doppelte Tags. X verwendet typischerweise den ersten, den es findet, aber Duplikate können unvorhersehbares Verhalten verursachen. Entferne den manuellen Code, wenn ein Plugin das übernimmt, oder umgekehrt.
- Caching-Plugin-Interferenz: Wenn du ein Seiten-Caching-Plugin verwendest, leere den Cache nach der Aktualisierung deiner Twitter Card-Konfiguration. Andernfalls enthält die gecachte Version deiner Seiten möglicherweise noch die alten (oder fehlenden) Meta-Tags.
Best Practices für die WordPress Twitter Card-Optimierung
- Standard auf summary_large_image setzen: Das große Bildformat übertrifft das kleine Thumbnail-Format konsistent bei den Engagement-Metriken. Verwende es für alle Blogbeiträge und Artikel.
- Überzeugende Beschreibungen verfassen: Der twitter:description-Text ist dein Pitch. Schreibe ihn wie eine Mini-Überschrift, 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 zurückfällt, stellen beide Tag-Sets konsistente Vorschauen auf allen sozialen Plattformen sicher, einschließlich Facebook, LinkedIn, Slack und Messaging-Apps.
- Nach Theme- oder Plugin-Updates testen: Theme- oder Plugin-Updates können manchmal die Meta-Tag-Ausgabe beeinträchtigen. Führe nach größeren 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.