Wenn du einen Link auf X (ehemals Twitter) teilst, versucht die Plattform, eine Vorschau zu generieren, eine sogenannte Twitter Card. Ohne die richtigen Meta-Tags erscheint dein Link als nackte URL. Mit korrekt eingerichteten Twitter Cards zieht X dagegen Titel, Beschreibung und Bild aus deiner Seite und macht aus dem geteilten Link einen visuellen Teaser, der deutlich häufiger angeklickt wird.
So erzeugen Twitter Cards eine Link-Vorschau
Eine Twitter Card ist nichts, das du hochlädst oder gestaltest. Sie wird automatisch von X auf Basis der Meta-Tags im HTML deiner verlinkten Seite erzeugt. Wenn jemand deine URL in einen Tweet einfügt, besucht der Crawler von X die Seite, liest die Meta-Tags und baut daraus die Vorschau zusammen. Fehlen die Tags oder sind sie falsch konfiguriert, ist die Vorschau entweder unvollständig oder fehlt ganz.
Summary Card vs. Summary Card with Large Image im Vergleich
X unterstützt mehrere Card-Typen, aber in der Praxis begegnen dir nur zwei:
- Summary Card: Eine kompakte Vorschau mit einem kleinen Thumbnail links und Titel sowie Beschreibung rechts daneben. Das nutzen die meisten Blogartikel, Ratgeber und Dokumentationsseiten. Das Thumbnail ist quadratisch, mindestens 144×144 Pixel.
- Summary Card with Large Image: Das Bild nimmt die volle Breite über dem Text ein. Das funktioniert gut für Landingpages, Produktseiten, Portfolio-Stücke oder jede Seite, bei der das Visuelle der Hauptanreiz ist. Das Bild sollte mindestens 300×157 Pixel groß sein, idealerweise 1200×628 für eine scharfe Darstellung auf hochauflösenden Bildschirmen.
Es gab früher weitere Typen (Player Card für Audio/Video, App Card für mobile Apps), aber die braucht man auf den meisten Seiten nicht.
Welche Twitter-Card-Meta-Tags du einbinden musst
Platziere diese im <head>-Bereich deiner Seite:
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Dein Seitentitel" />
<meta name="twitter:description" content="Eine kurze Beschreibung deiner Seite." />
<meta name="twitter:image" content="https://example.com/bild.jpg" />
<meta name="twitter:site" content="@DeinHandle" />Das twitter:card-Tag bestimmt das Layout. Das twitter:site-Tag ist optional, zeigt aber deinen Handle als Quellenangabe unter der Card an.
Twitter Cards und Open Graph: So funktioniert der Fallback
Was viele Seitenbetreiber nicht wissen: X greift auf Open-Graph-Tags (die von Facebook, LinkedIn und WhatsApp genutzt werden) zurück, wenn Twitter-spezifische Tags fehlen. Wenn du also bereits og:title, og:description und og:image gesetzt hast, wird dein Link auch auf X eine Vorschau bekommen, nur ohne die explizite Kontrolle, die Twitter-Card-Tags dir geben.
In der Praxis heißt das: Ein gut konfiguriertes SEO-Plugin wie Yoast oder Rank Math kümmert sich oft automatisch um die Grundlagen. Aber sich auf den Fallback zu verlassen hat Nachteile: Die Bildabmessungen sind vielleicht nicht ideal für das X-Layout, und die Beschreibung wird möglicherweise anders abgeschnitten. Für das sauberste Ergebnis konfigurierst du am besten beide Tag-Sets.
Twitter Card Vorschau wird nicht angezeigt: Häufige Fehler
Selbst wenn Tags vorhanden sind, kann einiges schiefgehen:
- Caching-Probleme: X cached Card-Vorschauen aggressiv. Wenn du ein kaputtes Bild korrigierst oder einen Titel änderst, kann die alte Vorschau noch tagelang hängenbleiben. Du kannst eine Aktualisierung über das Card-Validator-Tool von X erzwingen.
- Bild zu klein: Liegt dein Bild unter der Mindestgröße, ignoriert X es unter Umständen komplett und zeigt gar kein Vorschaubild.
- Relative URLs: Der
twitter:image-Wert muss eine absolute URL sein. Relative Pfade wie/images/header.jpgfunktionieren nicht. - Robots blockiert den Crawler: Wenn deine
robots.txtden Twitterbot blockiert, kann X deine Meta-Tags nicht lesen und generiert keine Card.
Twitter Cards in WordPress einrichten
WordPress gibt von Haus aus keine Twitter-Card-Meta-Tags aus. Du brauchst entweder ein SEO-Plugin (Yoast SEO, Rank Math, The SEO Framework) oder ein dediziertes Social-Media-Plugin, um sie zu generieren. Die meisten dieser Plugins erlauben es, einen Standard-Card-Typ für die gesamte Seite festzulegen und Bild sowie Beschreibung pro Beitrag oder Seite zu überschreiben.
Falls du WooCommerce nutzt, prüfe deine Produktseiten separat. Die brauchen manchmal eine zusätzliche Konfiguration, weil Produktbild und -beschreibung aus den Produktdaten gezogen werden sollten und nicht aus den generischen Seitenfeldern.
Twitter Card Meta-Tags prüfen mit InspectWP
InspectWP liest die Meta-Tags auf deiner WordPress-Seite aus und zeigt dir genau, welche Twitter-Card-Tags vorhanden sind (oder fehlen). Der Bericht zeigt den erkannten Card-Typ, Titel, Beschreibung, Bild-URL und Site-Handle, damit du überprüfen kannst, ob die Vorschau so aussieht, wie du es willst, bevor du deinen Content teilst.