Twitter (X) Card Validator

Was sind Twitter (X) Cards?

Twitter Cards, heute im Kontext von X diskutiert, steuern, wie eine URL dargestellt wird, wenn jemand Ihren Link auf der Plattform postet. Statt einer nackten URL-Zeile kann eine korrekt getaggte Seite Titel, Beschreibung, Domain und Bild im Post anzeigen.

Marketer, Entwickler, SEO-Spezialisten und Publisher nutzen diese Metadaten, um Klickraten auf geteilte Artikel, Produktseiten und Landingpages zu schützen. Eine fehlende og:image oder eine HTTP-Bild-URL erzeugt oft eine einfache Link-Vorschau, die Nutzer im Feed übersehen.

Der Validator oben ruft öffentliches HTML von jeder eingegebenen URL ab, parst Open-Graph- und Twitter-Card-Tags, markiert häufige Probleme und rendert ein ungefähres X-Post-Mockup. Sie sehen dieselben Kernfelder, die dem Crawler wichtig sind, bevor der Link in Kampagne oder organischem Post live geht.

So validierst du Twitter-Card-Meta-Tags

1. Fügen Sie eine öffentliche Website-URL in das Eingabefeld ein. Die Seite muss HTML ohne Login-Schranke zurückgeben.
2. Klicken Sie auf Vorschau, um die Seite anzufordern und Meta-Tags aus der Antwort zu extrahieren.
3. Prüfen Sie das X-Post-Mockup, einschließlich Large-Image-Layout bei erkanntem summary_large_image.
4. Lesen Sie Validierungsmeldungen nach Schweregrad: Fehler bei fehlendem Titel oder Bild, Warnungen bei HTTPS oder Textlänge.
5. Untersuchen Sie die vollständige Tag-Liste mit allen twitter:*- und og:*-Werten aus dem Seitenquelltext.
6. Korrigieren Sie Metadaten auf Ihrer Website, deployen Sie bei Bedarf und führen Sie Vorschau erneut aus, bis Warnungen verschwinden.

Nutzen Sie die Demo-Website-Schaltfläche, um eine Beispiel-News-URL zu laden und eine funktionierende Karte mit der Seite zu vergleichen, die Sie debuggen. Staging-URLs funktionieren nur, wenn sie öffentlich aus dem Internet ohne Authentifizierung erreichbar sind.

Wie X Titel, Beschreibung und Bild auswählt

X unterstützt dedizierte Twitter-Card-Tags, liest aber auch Open Graph und Standard-HTML-Fallbacks. Wenn beide Tag-Sätze existieren, haben Twitter-spezifische Werte meist Vorrang in ihren Feldern, während Open Graph Lücken füllt.

Die Leselogik dieses Tools folgt dieser Reihenfolge:

title       = og:title → twitter:title → HTML <title>
description = og:description → twitter:description → meta name="description"
image       = og:image → twitter:image (zu absoluter HTTPS-URL aufgelöst)
card type   = twitter:card → og:type → tendiert zu summary_large_image

Absolute URLs sind wichtig. Relative Bildpfade wie /images/hero.jpg müssen gegen die Seiten-URL aufgelöst werden, sonst kann der Crawler das Asset nicht laden. Der Validator löst relative Pfade gleich auf und warnt, wenn die finale Bild-URL kein HTTPS nutzt.

Twitter-Card-Typen im Vergleich

Die meisten Marketing-Seiten nutzen summary oder summary_large_image. App- und Player-Karten erfordern zusätzliche Tags für Mobile Apps oder eingebettete Medien.

Fehlt twitter:card, existiert aber og:image, rendert X oft trotzdem eine Large-Image-Karte. Der Validator markiert das fehlende twitter:card-Tag als Warnung, damit Sie es explizit setzen statt auf Fallback-Verhalten zu vertrauen.

Empfohlene Text- und Bildlimits

Truncation-Regeln sind nicht immer pixelgenau veröffentlicht, aber diese Limits entsprechen dem, was der Validator prüft und was die meisten Produktions-Templates anstreben.

Large-Image-Karten nutzen 1.91:1 im Preview-Mockup, passend zum ungefähren Rahmen, den X über dem Titelblock zeigt.

Was dieser Validator prüft

Nach dem Parsen der Tags führt das Tool feste Prüfungen aus, die zu häufigen Deploy-Fehlern passen:

• Fehlender Titel in twitter:title und og:title
• Fehlende Beschreibung (nur Warnung, schadet aber Klick-Appeal)
• Fehlendes Bild für reichhaltige Vorschauen
• Nicht erkannter twitter:card-Wert
• Titel länger als 70 Zeichen
• Beschreibung länger als 200 Zeichen
• Bild-URL ohne HTTPS

Wenn alle Kernprüfungen bestehen, erscheint trotzdem eine Info-Meldung, dass X Karten separat cached. Eine Seite kann hier validieren und auf der Plattform leicht abweichen, bis der Cache aktualisiert ist.

Minimales Tag-Beispiel für eine Marketing-Seite

Die meisten CMS-Plugins schreiben diese Tags automatisch. Bei manuellem HTML oder Custom-Stack beginnt eine Large-Image-Karte oft so:

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Ihr Seitentitel" />
<meta name="twitter:description" content="Wertversprechen in einem Satz." />
<meta name="twitter:image" content="https://example.com/og-image.jpg" />
<meta property="og:title" content="Ihr Seitentitel" />
<meta property="og:description" content="Wertversprechen in einem Satz." />
<meta property="og:image" content="https://example.com/og-image.jpg" />
<meta property="og:url" content="https://example.com/seite" />

Doppelte Open-Graph-Tags helfen Facebook, LinkedIn, Slack und anderen Crawlern, dieselben Werte zu lesen. Wenn Sie dieselbe URL auf mehreren Netzwerken veröffentlichen, kombinieren Sie diese Prüfung mit der LinkedIn-Beitragsvorschau, um Truncation im professionellen Feed zu bestätigen.

Häufig gestellte Fragen

Warum zeigt X eine andere Vorschau als dieses Tool?

X cached Kartendaten pro URL. Der erste Crawl nach einer Metadaten-Änderung kann hinter dem Deploy zurückliegen. Nutzen Sie den Card-Debugger der Plattform oder posten Sie erneut nach Cache-Ablauf, wenn die Live-Vorschau veraltet wirkt.

Brauche ich sowohl Open Graph als auch Twitter-Card-Tags?

Open Graph allein kann reichen, weil X auf og:title, og:description und og:image zurückfällt. Explizite twitter:*-Tags reduzieren Mehrdeutigkeit und klären die Absicht zwischen summary und summary_large_image.

Kann ich passwortgeschützte oder localhost-URLs validieren?

Nein. Der Validator ruft die URL aus einer Server-Umgebung ab. Localhost, VPN-Staging und Login-geschützte Seiten liefern Fehler, weil ihr HTML nicht öffentlich erreichbar ist.

Warum fehlt mein Bild, obwohl das Tag existiert?

Häufige Ursachen: relative URLs ohne korrekte Basis, Redirects zu Login-Seiten, Hotlink-Schutz oder Dateien über Crawler-Limits. Prüfen Sie, ob die Bild-URL in einem Inkognito-Tab lädt.

Verbessern Card-Tags das SEO-Ranking direkt?

Card-Tags beeinflussen vor allem Social-CTR und Markenpräsentation, nicht Google-Ranking-Formeln. Sie zählen trotzdem für Traffic von X, Newslettern mit eingebetteten Links und manuellen Team-Shares.

Welchen Card-Typ soll ich für Blogposts nutzen?

summary_large_image ist die Standardwahl für Artikel und Landingpages, weil das breite Bild in der Timeline auffällt. Nutzen Sie summary nur, wenn kein passendes Bild existiert.

Prüfen Sie Ihre X-Karte, bevor jeder Link live geht

Fügen Sie die Produktions-URL oben ein, bevor E-Mails, Ads oder Team-Mitglieder sie öffentlich teilen. Beheben Sie jeden Fehler und HTTPS-Warnung zuerst, dann prüfen Sie Titel- und Beschreibungslänge, damit die Karte auf mobilen Breiten gut lesbar ist, wo die meisten X-Sessions stattfinden.

Führen Sie den Validator nach jedem Deploy erneut aus, der den <head>-Bereich betrifft, besonders Template-Änderungen auf CMS-Plattformen, die Meta-Tags global regenerieren. Wenn dieselbe Seite auch auf LinkedIn oder Slack geht, vergleichen Sie Social-Previews zwischen Netzwerken, damit eine Plattform keine kaputten Tags erbt, während eine andere korrekt aussieht.

Card-Metadaten sind nur eine Schicht der Distribution auf X. Weitere Twitter- und X-Publishing-Tools decken zusätzliche Link-, Profil- und Content-Workflows ab, sobald die Kategorie wächst.