Skip to main content

Twitter Card Preview

Preview how your page looks when shared on Twitter/X with meta tag generation.

Geprüft von · Zuletzt geprüft

Eine Twitter/X-Card voransehen

  1. Card-Typ wählen - der Picker bietet summary (kleines quadratisches Bild neben Titel und Beschreibung) und summary_large_image (vollbreites Hero-Bild über Text). X hat player- und app-Cards für die meisten Anwendungsfälle abgeschrieben, daher konzentriert sich das Tool auf die zwei, die noch weit gerendert werden.
  2. twitter:title und twitter:description ausfüllen - die Zeichenzähler verfolgen Xs angezeigte Limits (70 bzw. 200, obwohl Titel auf Mobilgeräten oft früher umbrechen).
  3. twitter:image einfügen - für summary_large_image 1200x628 oder größer bei 2:1-Verhältnis verwenden; für summary ein quadratisches 144x144-Minimum, 4096x4096-Maximum.
  4. Handles hinzufügen - twitter:site ist das @-Handle deiner Publikation, twitter:creator ist das Handle des Autors. Beide sind optional, treiben aber Xs "von @handle"-Attribution auf der Card.
  5. Den generierten Block kopieren - das Ausgabe-Textfeld enthält einen vollständigen <meta name="twitter:*">-Block, bereit zum Einfügen in <head>.

Wie X Cards rendert

Xs Scraper (Twitterbot/1.0) ruft die geteilte URL ab, parst den HTML-Kopf nach <meta name="twitter:*">-Tags und cacht die resultierende Card nach URL für ungefähr sieben Tage. Wenn Twitter-spezifische Tags fehlen, fällt der Scraper auf <meta property="og:*"> zurück, weshalb Sites, die nur Open Graph liefern, noch immer vernünftige Cards auf X erhalten. Das Markup selbst ist in Xs Cards-Referenz dokumentiert - historisch unter developer.twitter.com/en/docs/twitter-for-websites/cards, jetzt unter Xs Entwicklerdokumentation konsolidiert.

Bemerkenswerter Eigenart: X verwendet das HTML-name-Attribut für seine Card-Tags (<meta name="twitter:title" content="...">), während Open Graph property verwendet. Das ist absichtlich - X argumentierte, dass name das semantisch korrekte HTML-Attribut für Metadaten ist, während OG property übernahm, um sich an RDFa auszurichten. Beide funktionieren in modernen Parsern, aber sie in demselben Tag zu mischen lässt die meisten Scraper das Meta-Element völlig ignorieren.

Wo Card-Vorschau seinen Wert beweist

  • Vor dem Planen eines hochwertigen Posts oder einer Anzeige Bildausschnitte abfangen, die den Kopf des Motivs oder ein wichtiges Produktdetail abschneiden.
  • Debuggen, warum ein von einem bestimmten CMS geposteter Link mit einer rein textlichen Card endet, während Links vom eigenen Blog des Autors mit einem Bild rendern.
  • Nebeneinander summary versus summary_large_image für dieselbe URL testen, um zu sehen, welche während eines Kampagnen-Probelaufs mehr Klicks treibt.
  • Überprüfen, dass serverseitig gerenderte Seiten die Twitter-Tags im ersten HTML statt über Client-seitiges JavaScript ausgeben, das Twitterbot nicht ausführt.
  • Sicherstellen, dass die Autoren-Attribution (twitter:creator) über Multi-Autoren-Blog-Plattformen auf das korrekte Handle auflöst.

Häufige Rendering-Fallstricke
  • Bild über 5 MB - X lehnt Bilder über 5 MB ab und fällt auf eine rein textliche Card zurück. PNG-Dateien erreichen diese Grenze schneller als JPEG bei äquivalenten Abmessungen.
  • Transparente PNG-Hintergründe - X setzt transparente Pixel unvorhersehbar gegen sein dunkles oder helles Theme zusammen. Einen soliden Hintergrund ins Bild einbrennen, um den Kontrast zu steuern.
  • Animierte GIFs - sie werden als Standbilder (erster Frame) in Cards angezeigt. Nutzer müssen klicken, um die Animation zu sehen.
  • Card-Typ-Mismatch mit Bildseitenverhältnis - eine summary-Card mit einem breiten Hero-Bild wird mittig auf Quadrat beschnitten und verliert oft den Motiv-Inhalt.
  • Card-Validator-Einstellung - X hat den öffentlichen Card Validator 2022 eingestellt. Du musst jetzt tatsächlich die URL twittern (oder ein privates Test-Konto verwenden), um das Rendering zu sehen. Das macht die Vorveröffentlichungsvorschau wertvoller als früher.
  • Domain-Level-Sperren - X pflegt eine Liste von Domains, deren Cards unterdrückt werden (Spam, Missbrauch, Streitigkeiten). Wenn deine Card hartnäckig nicht rendert und jeder andere Debug-Schritt besteht, könnte die Domain shadow-limitiert sein.

Card-Spezifikations-Hintergrund

Twitter Cards wurden 2012 eingeführt und über mehrere Revisionen formalisiert. Die aktuell unterstützten Typen sind summary, summary_large_image, app (für mobile App-Installations-Aufforderungen, selten außerhalb des App-Marketings verwendet) und player (für eingebettetes Video/Audio, erfordert Whitelist über ein Formular an X). Die erforderlichen Eigenschaften sind twitter:card und twitter:title; alles andere ist effektiv optional, aber Cards rendern schlecht ohne twitter:description und twitter:image. Zeichenlimits gemäß der Spezifikation sind 70 für Titel und 200 für Beschreibung, aber Xs Client kürzt Titel oft bei 50 Zeichen auf Mobilgeräten, wo die Card-Höhe enger ist. Die twitter:image:alt-Eigenschaft (bis zu 420 Zeichen) macht Alt-Text für Screenreader zugänglich, den X tatsächlich in seinen Barrierefreiheitsmodi vorliest.

Wann du nur Open Graph bevorzugen solltest

Wenn du bereits eine saubere Open-Graph-Implementierung hast, ist das Hinzufügen von Twitter Cards darüber zu 80% dupliziertes Markup für marginalen Nutzen: X fällt per Design auf OG zurück, und der Fallback funktioniert für den häufigen Fall gut. Das Argument für die Pflege dedizierter Twitter-Tags liegt speziell darin, wenn du auf X anderen Text oder andere Bilder möchtest als auf Facebook/LinkedIn - zum Beispiel eine kürzere für Xs Lesekontex optimierte Tagline oder ein Bild mit X-nativer Seitenverhältnis-Beschneidung. Um das Rendering nach der Veröffentlichung zu validieren, sind deine besten aktuellen Optionen, die URL von einem Test-Konto zu twittern, ein Tool wie Metatags.io für visuelle Vorschauen zu verwenden, oder curl -A "Twitterbot/1.0" https://deine-url auszuführen, um zu simulieren, was der Scraper tatsächlich sieht.

Häufig gestellte Fragen

Ist <code>summary_large_image</code> immer besser als <code>summary</code>?

Nicht universell. Große Bild-Cards dominieren den Timeline und gewinnen generell beim Engagement für visuellen Inhalt (Produktaufnahmen, Blog-Hero-Bilder, Veranstaltungsplakate). Für Nachrichten-Snippets, kurze Updates oder textlastigen Inhalt, bei dem das Bild dekorativ ist, liefert eine kleine <code>summary</code>-Card dieselbe Click-Through-Rate mit weniger visuellem Rauschen und weniger Bild-Bandbreiten-Kosten. Viele Verlage testen A/B beide pro Artikeltyp.

Warum wurde der Card Validator eingestellt?

X hat den öffentlichen Card Validator 2022 als Teil einer breiteren Plattformbereinigung nach dem Eigentümerwechsel eingestellt. Der genannte Grund war, dass das Tool selten genutzt und teuer zu pflegen war. In der Praxis trieb die Einstellung die meisten Verlage zu Drittanbieter- Vorschau-Tools und stillem Testen über Wegwerf-Konten. X hat keine Pläne angekündigt, einen ersten Validator wiederherzustellen.

Benötige ich ein verifiziertes X-Konto, damit Cards gerendert werden?

Nein. Jede öffentliche Seite mit korrekt formatierten <code>twitter:*</code> oder Fallback-<code>og:*</code>-Tags rendert eine Card, wenn ihre URL getweetet wird, unabhängig vom Kontostatus des Tweeters. Verifizierung (blaues Häkchen) beeinflusst die Tweet-Sichtbarkeit und algorithmische Reichweite, nicht das Card-Rendering. Die <code>twitter:creator</code>- und <code>twitter:site</code>-Handles sind Anzeige-Attribution und erfordern keine Verifizierung.

Welche Bildgrößen funktionieren am besten?

Für <code>summary_large_image</code> ist 1200x628 bei 2:1-Seitenverhältnis der kanonische Sweet Spot; X akzeptiert bis zu 4096x4096, sampelt aber für die Anzeige herunter. Für <code>summary</code> ein quadratisches Bild von mindestens 144x144 und nicht größer als 4096x4096 verwenden. Dateigröße unter 5 MB halten (PNG, JPEG, WebP, GIF). Bilder müssen über HTTPS mit gültigen Zertifikaten gehostet werden.

Wie lange cacht X Card-Daten?

Ungefähr sieben Tage für die Card-Metadaten und das zugehörige Bild. Im Gegensatz zu Facebook bietet X keinen öffentlichen Cache-Bust-Endpunkt, sodass der einzige zuverlässige Aktualisierungspfad ist zu warten oder die URL leicht zu ändern (zum Beispiel durch Hinzufügen eines Cache-Busting-Query-Parameters, der einen neuen Cache-Schlüssel erstellt). Für hochrisikoreichen Inhalt mit einer Staging-URL vor der Veröffentlichung auf der Produktions-URL testen.

Wofür wird <code>twitter:app</code> verwendet?

Der <code>app</code>-Card-Typ zeigt eine mobile App-Installations- Aufforderung inline an, wenn ein Link in Xs iOS- oder Android-Client geöffnet wird. Du gibst <code>twitter:app:name:iphone</code>, <code>twitter:app:id:iphone</code> und <code>twitter:app:url:iphone</code> (und Google Play-Äquivalente) an, und X verlinkt Nutzer tief in die App, wenn sie installiert ist, oder fordert eine Installation auf. Das ist Nischen - nur nützlich, wenn du aktiv App-Installationen treibst.

Warum rendert meine Card ohne Bild auf X, aber gut überall sonst?

Drei häufige Ursachen: der Bild-Host blockiert den <code>Twitterbot/1.0</code>-User-Agent (einige CDNs behandeln ihn als Bot und geben 403 zurück); das Bild ist Hotlink-geschützt und X sendet keinen Referer-Header; oder das Bild überschreitet 5 MB. Führe <code>curl -A "Twitterbot/1.0" -I https://deine-bild-url</code> aus - wenn du irgendetwas anderes als 200 OK mit einem Bild-Content-Type erhältst, ist das das Problem.

Funktionieren Player-Cards noch?

Ja, aber sie erfordern ausdrückliche Genehmigung über ein Antragsformular, das X Wochen braucht zu verarbeiten, und die Genehmigung wird uneinheitlich erteilt. Für die meisten eingebetteten Video-Anwendungsfälle ist das Verlinken auf eine YouTube- oder Vimeo-URL (die bereits durch Vereinbarung mit X optimierte Player-Cards liefert) praktischer als die Genehmigung einer eigenen Player-Card.

Beeinflusst <code>twitter:creator</code> SEO?

Nicht für Google. Google indiziert Twitter-Card-Tags als Metadaten, verwendet aber <code>twitter:creator</code> nicht als Autorschaftssignal für das eigene Ranking - Google stellte <code>rel="author"</code> 2014 ein und leitet jetzt Autorschaft aus strukturierten Daten ab (<code>schema.org/Article</code> mit <code>author</code>). Der <code>twitter:creator</code>-Tag ist nur Anzeige auf X selbst.

Wird die Vorschau lokal generiert?

Ja. Das Card-Layout ist eine Preact-Komponente, die deine Formularwerte in einen im Browser befindlichen Mock des X-Card-Rahmens rendert - die exakten abgerundeten Ecken, den Typografie-Stack (SF Pro auf iOS, Helvetica Neue auf Desktop, Roboto auf Android), dunkle und helle Themenvarianten. Dein Titel, deine Beschreibung und deine Bild-URL werden nirgendwo gesendet; das Bild wird direkt von seinem Host von deinem eigenen Browser geladen.

Kann ich HTML innerhalb <code>twitter:description</code> verwenden?

Nein. Der Scraper entfernt HTML-Tags beim Parsen und rendert den resultierenden Klartext. Zeilenumbrüche (<code>\n</code>) werden ebenfalls zu Leerzeichen zusammengeklappt. Wenn du Betonung benötigst, funktionieren Unicode-Zeichenvarianten (fette Unicode-Buchstaben, kursive Unicode- Buchstaben), sind aber rauschartig und schlecht für die Barrierefreiheit - klare Prosa mit einem starken Einstieg ist normalerweise effektiver.

Soll ich mir Sorgen machen, dass X Cards insgesamt einstellt?

Keine angekündigte Einstellung. X rendert weiterhin Cards und Twitterbot scrapt weiterhin. Angesichts der volatilen Plattformrichtung Cards aber eher als Nice-to-have behandeln, nicht als primäre Distribution. Open-Graph-Tags sind ein robuster Fallback.

Mehr SEO & Web Tools

Google SERP Preview

Preview how your page appears in Google search results with character count indicators.

Open tool

Heading Structure Analyzer

Extract and visualize H1-H6 heading hierarchy with SEO issue detection.

Open tool

Hreflang Tag Generator

Generate hreflang link tags for multilingual websites with x-default support.

Open tool

Keyword Density Checker

Analyze word frequency with single words, bigrams and trigrams with density percentages.

Open tool

Meta Tag Generator

Generate complete HTML meta tags including Open Graph and Twitter Card tags.

Open tool

Open Graph Preview

Preview how your page looks when shared on Facebook and LinkedIn.

Open tool