Wenn du einen Link auf X (ehemals Twitter) teilst, entscheidet eine Handvoll Meta-Tags darüber, ob daraus eine ansprechende Vorschaukarte mit großem Bild wird — oder nur eine nackte URL. Diese Meta-Tags heißen Twitter Cards (heute oft "X Cards" genannt). Sie sind schnell eingebaut, werden aber von vielen Websites schlampig oder gar nicht gesetzt. Diese Anleitung zeigt dir, welche Twitter-Card-Tags es gibt, wie du sie korrekt einsetzt und wie du das Ergebnis vor dem Teilen prüfst.
Was sind Twitter Cards?
Twitter Cards sind spezielle <meta>-Tags im <head> deiner HTML-Seite. Sie funktionieren ähnlich wie Open Graph Tags für Facebook und LinkedIn — nur eben speziell für X. Wenn jemand deinen Link in einem Post teilt, liest der X-Crawler diese Tags aus und baut daraus eine Vorschaukarte mit Titel, Beschreibung und Bild.
Der entscheidende Vorteil: Du behältst die Kontrolle. Ohne Twitter Cards rät X selbst, welches Bild und welcher Text zur Seite passen — oft mit unbefriedigendem Ergebnis. Mit korrekten Tags bestimmst du exakt, wie dein Inhalt aussieht.
Die Card-Typen: summary vs. summary_large_image
Der wichtigste Tag ist twitter:card. Er legt fest, welcher Karten-Typ verwendet wird. Für die allermeisten Websites sind nur zwei Typen relevant:
- summary: Kompakte Karte mit kleinem, quadratischem Vorschaubild links und Text rechts. Geeignet für Übersichtsseiten oder wenn kein großes Querformat-Bild vorhanden ist.
- summary_large_image: Große Karte mit breitem Vorschaubild über dem Text. Das ist die auffälligste Variante und für Blogartikel, Landingpages und die meisten Inhalte die richtige Wahl.
Daneben gibt es noch app (für App-Downloads) und player (für eingebettete Videos/Audio) — die brauchst du nur in Spezialfällen. Für eine klassische Unternehmens- oder Content-Website ist summary_large_image in über 90 % der Fälle die beste Wahl.
Alle wichtigen Twitter-Card-Tags im Überblick
Pflicht-Tags
twitter:card— Der Card-Typ. Ohne diesen Tag rendert X gar keine Card.twitter:title— Der Titel der Karte. Max. 70 Zeichen, danach wird abgeschnitten.twitter:description— Der Beschreibungstext. 50–200 Zeichen, prägnant und neugierig machend.twitter:image— Die absolute URL des Vorschaubilds. Fürsummary_large_imagemindestens 1200×628 Pixel, fürsummarymindestens 144×144 Pixel.
Empfohlene Tags
twitter:image:alt— Alternativtext des Bildes. Wichtig für die Barrierefreiheit und ein professionelles Signal. Max. 420 Zeichen.twitter:site— Der @handle deines Website-Accounts (z. B.@shift07ai). Verknüpft die Karte mit deiner Marke.
Optionale Tags
twitter:creator— Der @handle des Autors oder Erstellers des konkreten Inhalts.
So sieht eine vollständige Twitter Card aus
Hier ein vollständiges Beispiel, das du als Vorlage für deine eigenen Seiten verwenden kannst. Diese Zeilen gehören in den <head>-Bereich der HTML-Seite:
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@deinhandle">
<meta name="twitter:creator" content="@autorhandle">
<meta name="twitter:title" content="Twitter Cards richtig einsetzen — die Anleitung">
<meta name="twitter:description" content="Welche twitter:-Tags es gibt und wie du sie korrekt setzt — mit Code-Beispielen.">
<meta name="twitter:image" content="https://deinedomain.de/bild.jpg">
<meta name="twitter:image:alt" content="Illustration zum Thema Twitter Cards">Wichtig: Achte darauf, dass twitter:image immer eine absolute URL mit https:// ist. Relative Pfade wie /bild.jpg werden vom X-Crawler nicht aufgelöst.
Der Open-Graph-Fallback: Warum du nicht alles doppelt brauchst
Eine gute Nachricht für alle, die bereits Open Graph Tags gesetzt haben: X nutzt vorhandene og:-Tags als Fallback. Wenn twitter:title fehlt, greift X auf og:title zurück — dasselbe gilt für twitter:description (Fallback og:description) und twitter:image (Fallback og:image).
In der Praxis heißt das: Du musst nur twitter:card zwingend setzen — den Rest kann X aus deinen Open-Graph-Tags ziehen. Trotzdem ist es sinnvoll, mindestens twitter:card, twitter:site und ein eigenes twitter:image explizit zu definieren, weil du so volle Kontrolle behältst und die Karte unabhängig von Änderungen an deinen OG-Tags stabil bleibt. Wer seine OG-Tags noch nicht im Griff hat, sollte zuerst unseren Leitfaden zu Meta-Tags durcharbeiten.
Häufige Fehler bei Twitter Cards
Diese Fehler sehen wir bei Website-Analysen immer wieder — vermeide sie:
- Kein
twitter:cardgesetzt: Der häufigste Fehler. Ohne diesen Tag gibt es keine Card, egal wie viele andere twitter:-Tags vorhanden sind. - Relative Bild-URL:
twitter:imagemit/img/vorschau.jpgstatt der vollen https-URL — der Crawler findet das Bild nicht. - Zu kleines oder fehlendes Bild: Bei
summary_large_imagesollte das Bild mindestens 1200×628 px groß sein, sonst wird die Card ohne Bild ausgespielt. - @handle ohne @:
twitter:sitemuss mit@beginnen. - Titel zu lang: Über 70 Zeichen werden abgeschnitten — die Kernaussage gehört nach vorne.
- property statt name: Twitter-Tags nutzen
name="twitter:...", nichtproperty=wie Open Graph. Beide funktionieren bei X zwar meist, sauber ist abername.
Twitter Cards testen, bevor du teilst
Der frühere "Twitter Card Validator" von X ist nicht mehr zuverlässig öffentlich erreichbar. Du musst deine Cards aber trotzdem prüfen, bevor du Links teilst — denn ein Fehler fällt sonst erst auf, wenn der Post schon live ist.
Genau dafür haben wir den Twitter Card Validator von Shift07 gebaut: Du fügst den HTML-Quellcode deiner Seite ein und bekommst sofort einen Score, eine detaillierte Tag-Analyse (inklusive Anzeige, welche Tags über den Open-Graph-Fallback abgedeckt sind) und eine Live-Vorschau, wie deine Karte auf X aussehen wird. Das Tool läuft vollständig im Browser — deine Daten verlassen deinen Rechner nicht.
Ergänzend lohnt sich der Open-Graph-Checker, um die Fallback-Tags zu prüfen, sowie die Open Graph Vorschau für die Darstellung auf Facebook und LinkedIn.
Twitter Cards und SEO: der indirekte Effekt
Twitter Cards sind kein direkter Google-Ranking-Faktor. Aber sie wirken indirekt: Eine ansprechende Card auf X bringt mehr Klicks, mehr Klicks bedeuten mehr Traffic, und Social Shares erhöhen die Sichtbarkeit deiner Inhalte. Mehr Sichtbarkeit führt langfristig zu mehr Backlinks und Markenbekanntheit — beides positive Signale im gesamten SEO-Ökosystem. Wer Social Media und SEO zusammen denkt, holt aus jedem geteilten Link das Maximum heraus. Mehr dazu in unserem Artikel zu Content-Marketing für SEO und Backlinks.
Twitter Card Checkliste
twitter:card gesetzt — meist summary_large_image
twitter:title vorhanden, max. 70 Zeichen
twitter:description vorhanden, 50–200 Zeichen
twitter:image als absolute https-URL, mind. 1200×628 px
twitter:image:alt für Barrierefreiheit ergänzt
twitter:site mit @handle deiner Marke
Fazit: Wenige Tags, große Wirkung
Twitter Cards sind in fünf Minuten eingebaut und entscheiden trotzdem darüber, ob deine Links auf X auffallen oder untergehen. Setze mindestens twitter:card, twitter:title, twitter:description und ein eigenes twitter:image — und prüfe das Ergebnis mit dem Twitter Card Validator, bevor du teilst. Willst du wissen, wo deine Website darüber hinaus noch SEO-Potenzial hat? Die kostenlose SEO-Analyse von Shift07 zeigt es dir in wenigen Sekunden.