Was ist eine Twitter Card?
Du teilst einen Link auf X und bekommst eine schöne Karte mit Bild und Titel. Oder eben nicht. Den Unterschied machen Twitter Cards: Meta-Tags im <head> deiner Seite, die X sagen, wie die Vorschau aussehen soll.
Twitter heißt seit 2023 X, die Tags heißen weiter twitter:. Deshalb liest du auch „X Card“, gemeint ist dasselbe. Die Grundausstattung sieht so aus:
- twitter:card legt den Kartentyp fest.
- twitter:title ist der Titel der Karte.
- twitter:description ist der kurze Beschreibungstext.
- twitter:image ist das Vorschaubild.
- twitter:site nennt dein X-Konto.
Welche Kartentypen gibt es?
Für normale Websites zählen zwei Typen:
Typ
So sieht er aus
summary
Kleines quadratisches Bild neben dem Text
summary_large_image
Großes Bild über die volle Breite
Für die meisten Inhalte ist summary_large_image die richtige Wahl, das große Bild fällt einfach mehr auf. Auch Yoast SEO nimmt diesen Typ als Standard.
Daneben gibt es die Typen app und player für Apps und Medienplayer. Für eine Unternehmenswebsite brauchst du sie selten.
Brauchst du Twitter Cards und Open Graph?
Nicht doppelt. Ist kein eigener X-Wert gesetzt, liest X die Angaben aus Open Graph. Yoast SEO arbeitet genau so: Das Plugin gibt twitter:title, twitter:description und twitter:image nur aus, wenn du dafür etwas Eigenes einträgst.
Wirklich nötig ist also twitter:card, weil X daran den Kartentyp erkennt. Der Rest kommt aus deinen Open-Graph-Tags. Pflege die sauber, dann hast du LinkedIn, Facebook und X in einem Rutsch erledigt.
Welche Bildgröße passt?
Mit 1200 × 630 Pixeln fährst du in der Praxis sicher. Das ist auch der Wert für Open Graph, du brauchst also nur ein Bild. Drittquellen nennen für die große Karte teils 2:1, teils 1,91:1 — deshalb gehört nichts Wichtiges an den Rand.
- Datei über eine HTTPS-Adresse ausliefern.
- Text im Bild knapp halten und mittig platzieren.
- Einen Alternativtext mitgeben, damit die Vorschau auch für Screenreader etwas taugt.
Häufige Fehler
Fehler 1 · twitter:card vergessen
Dann fehlt X die Angabe zum Kartentyp, und du bekommst bestenfalls die kleine Karte statt der großen. Bei Yoast setzt das Plugin den Tag von selbst.
Fehler 2 · Crawler aussperren
X holt die Daten mit einem eigenen Crawler ab, der sich als Twitterbot meldet. Sperren robots.txt, Firewall oder Bot-Schutz ihn aus, bleibt die Karte leer, obwohl die Tags stimmen.
Fehler 3 · Tags nur per JavaScript setzen
Die Tags müssen im ausgelieferten HTML stehen. Setzt erst ein Skript sie nachträglich, sehen Crawler sie womöglich nie.
Fehler 4 · Auf den alten Validator hoffen
Den Card Validator von X gibt es nicht mehr. Du prüfst die Karte heute am einfachsten, indem du den Link im Eingabefeld für neue Posts einfügst. Ändert sich die Vorschau danach nicht, hängt meist ein Cache dazwischen. Bei einer neuen Bilddatei mit neuem Namen löst sich das oft von selbst.
Twitter Cards in WordPress
Mit Yoast SEO musst du nichts von Hand schreiben. Das Plugin gibt twitter:card mit summary_large_image aus, dazu dein X-Konto, sobald es hinterlegt ist. Beim Bild geht Yoast der Reihe nach vor: eigenes X-Bild, Facebook-Bild, Beitragsbild, dann Standardbild.
Häufige Fragen
Gibt es Twitter Cards noch, seit Twitter X heißt?
Ja, die Vorschaukarten funktionieren weiter, und die Tags heißen unverändert twitter:card und so weiter. Ein x:-Präfix gibt es nicht. Nur die offizielle Doku ist kaum noch zu finden.
Was ist der Unterschied zwischen summary und summary_large_image?
Bei summary steht ein kleines quadratisches Bild neben dem Text. Bei summary_large_image läuft ein großes Bild über die volle Breite. Für Artikel und Landingpages ist die große Karte meist die bessere Wahl.
Brauche ich Twitter-Tags, wenn ich Open Graph habe?
Nur twitter:card. Titel, Beschreibung und Bild übernimmt X sonst aus den Open-Graph-Tags. So pflegst du alles an einer Stelle.
Wie teste ich meine Twitter Card ohne Validator?
Füg den Link in das Eingabefeld für einen neuen Post ein und schau dir die Vorschau an, ohne abzusenden. Für die Tags selbst reicht der Quelltext deiner Seite. Dort muss twitter:card im Kopf stehen.
