Was ist eine Twitter Card (X Card)?

Der Name hat den Markenwechsel überlebt. Die Plattform heißt seit 2023 X, und die Tags heißen weiter twitter:card, twitter:site oder twitter:image. Ein gleichwertiges Präfix x: gibt es nicht, und die Probe ist einfach: Die Startseite der X-Entwicklerdokumentation liefert heute im Kopfbereich ein twitter:card-Tag mit dem Wert summary_large_image.

Das Zweite, was man wissen sollte: Der Cards-Bereich ist aus dem Dokumentationsportal verschwunden. Die alten Adressen von developer.x.com zu Cards leiten auf die Startseite um, und das aktuelle Verzeichnis von «X for Websites» deckt eingebettete Beiträge, Buttons, Timelines und oEmbed ab, ohne Cards-Abschnitt. Die vollständige technische Referenz lässt sich nur noch in archivierten Kopien nachlesen, und daher stammen die Zahlen weiter unten.

Gegenüber Open Graph, das im Glossar einen eigenen Eintrag hat, ist das Verhältnis eines von Schichten. Open Graph ist der allgemeine Standard, den viele Dienste lesen, und beschreibt den Inhalt der Seite. Die twitter:-Tags sind die X-eigene Schicht darüber und entscheiden vor allem über das Format der Karte. Der Open-Graph-Eintrag erklärt, welche og:-Eigenschaften zu füllen sind; dieser erklärt, was X darüber legt und was passiert, wenn man nichts ergänzt.

Der Vorgang beginnt, wenn jemand den Link veröffentlicht. Der Crawler von X, erkennbar als Twitterbot, ruft die Seite ab, liest die Meta-Tags im Kopfbereich und baut die Karte. Sperrt robots.txt diesen Crawler, gibt es keine Karte; sperrt es das Bild, erscheint die Karte ohne Bild. Das Ergebnis liegt laut der zuletzt veröffentlichten Dokumentation sieben Tage im Cache.

Die Lesereihenfolge erspart die meiste Verwirrung. Der Prozessor sucht zuerst die X-eigene Eigenschaft und greift, wenn sie fehlt, auf die entsprechende Open-Graph-Eigenschaft zurück. So weicht twitter:title auf og:title aus, twitter:description auf og:description, twitter:image auf og:image und twitter:image:alt auf og:image:alt. Sind og:type, og:title und og:description vorhanden und fehlt twitter:card, kann eine Karte vom Typ Summary gerendert werden. Der Parser akzeptiert zudem das Attribut property aus Open Graph, sodass vorhandenes Markup nicht verdoppelt werden muss.

Vier Typen sind übrig, und der Wert von twitter:card wählt zwischen ihnen: summary, summary_large_image, app und player. Pro Seite ist nur ein Typ zulässig, und bei mehreren twitter:card-Tags gilt das letzte. Die Typen photo, gallery und product wurden zum 3. Juli 2015 abgeschafft und automatisch den beiden Summary-Formaten zugeordnet.

Die dokumentierten Grenzwerte sind konkret: Titel bis 70 Zeichen, Beschreibung bis 200, Alternativtext bis 420 und ein Bild unter 5 MB in JPG, PNG, WEBP oder GIF. SVG wird nicht unterstützt. Ein minimales und ausreichendes Markup sieht so aus:

<meta name="twitter:card"
      content="summary_large_image">
<meta name="twitter:site"
      content="@tu_cuenta">
<meta property="og:title"
      content="Título de la página">
<meta property="og:description"
      content="Resumen del contenido.">
<meta property="og:image"
      content="https://ejemplo.com/og.jpg">
<meta name="twitter:image:alt"
      content="Descripción de la imagen.">

Die erste praktische Entscheidung ist, wie viele Tags man pflegt. Hat die Website bereits sauberes Open Graph, genügen zwei X-eigene Zeilen: twitter:card für das Format und twitter:site für die Zuordnung des Kontos. Den Rest deckt der Rückfall ab. Titel, Beschreibung und Bild in beiden Vokabularen zu doppeln vervielfacht die Stellen, an denen ein Template auseinanderlaufen kann, und der Fehler wird öffentlich sichtbar.

Die zweite ist, welches Format man anfordert. Ohne twitter:card landet man bei der kleinen Summary-Karte, selbst wenn das Bild im Querformat und fürs Teilen gedacht ist, denn das breite Format muss angefordert werden. Das ist eine Zeile im Template und verändert den Platz, den der Link im Verlauf einnimmt.

Die dritte ist, wie man das Ergebnis prüft, seit es kein offizielles Werkzeug mehr gibt. Das verändert den Arbeitsablauf: Geprüft wird, indem man die URL in den Beitragseditor der App einfügt, und der Cache von sieben Tagen bedeutet, dass eine heute veröffentlichte Korrektur erst später sichtbar wird. Prüfen gehört vor die Ankündigung der Veröffentlichung, nicht dahinter.

• Fülle zuerst Open Graph und ergänze darüber nur twitter:card und twitter:site; die übrigen Werte erbt die Karte per Rückfall, und es gibt weniger Stellen zu pflegen.
• Fordere das Format ausdrücklich mit summary_large_image an, wenn die Seite ein Bild im Querformat hat, das fürs Teilen gedacht ist.
• Halte die Syntax jedes Vokabulars ein: name für die twitter:-Tags und property für die og:-Tags, ohne vorhandenes Markup umzuschreiben.
• Liefere das Bild über eine URL aus, die ohne Sitzung und ohne Cookies erreichbar ist, unter 5 MB, in JPG, PNG, WEBP oder GIF, und verzichte auf SVG.
• Ergänze twitter:image:alt mit einer echten Beschreibung des Bildes, innerhalb der Grenze von 420 Zeichen.
• Prüfe das Ergebnis, indem du die URL vor der Veröffentlichung in den Beitragseditor der App einfügst, und rechne bei Korrekturen mit dem Cache von sieben Tagen.

• Mehrere twitter:card-Tags im selben Template stehen lassen und annehmen, das erste gewinne: Es gilt das letzte.
• Den Crawler in robots.txt sperren oder das Bild aus einem geschützten Pfad ausliefern und den Fehler danach in den Tags suchen.
• Weiter photo, gallery oder product verwenden, Typen, die 2015 abgeschafft und den Summary-Formaten zugeordnet wurden.
• Mit einem offiziellen Validator rechnen, den es nicht mehr gibt: Die Adresse des alten Card Validator führt heute zur Anmeldeseite.
• Das Bild austauschen und erwarten, dass die Änderung sofort sichtbar ist, ohne den Cache einzurechnen.