Twitter-Card-Validator

Wenn jemand Ihren Link auf X (Twitter) teilt, liest die Plattform die twitter:-Meta-Tags der Seite aus, um die Vorschaukarte zu erstellen: ihr Format, den Titel, die Beschreibung, das Bild und die Quellenangabe. Fehlen diese Tags, wird der Link als nackte URL ohne Karte gepostet. Fügen Sie das HTML Ihrer Seite unten ein, und dieser Validator prüft, ob die drei erforderlichen Tags, twitter:card, twitter:title und twitter:description, vorhanden sind, und zeigt den Wert an, den er aus jedem ausliest, damit Sie eine kaputte Vorschau vor dem Veröffentlichen reparieren können.

So validieren Sie Ihre Karte

  1. 1

    Fügen Sie das HTML Ihrer Seite ein

    Sie können nur den `<head>`-Bereich oder das ganze Dokument einfügen. Der Validator prüft nur `<meta>`-Tags, jedes andere Markup wird ignoriert.

  2. 2

    Er sucht nach den drei erforderlichen Tags

    `twitter:card`, `twitter:title` und `twitter:description`, das Minimum für jeden Kartentyp. Andere Tags wie `twitter:image` werden hier nicht geprüft.

  3. 3

    Sehen Sie, was gefunden wurde

    Jedes passende Tag wird mit dem aus seinem `content`-Attribut gelesenen Wert aufgelistet, damit Sie den Text auf einen Blick prüfen können.

  4. 4

    Beheben Sie, was fehlt

    Jedes der drei, das fehlt, wird als fehlend markiert. Fügen Sie es Ihrem `<head>` hinzu und fügen Sie das HTML erneut ein, um noch einmal zu prüfen.

Die vier Kartentypen von X (Twitter)

Das Format wird durch den Wert von twitter:card festgelegt. Dieser Validator liest den Wert aus, den Sie angeben; die vier von X unterstützten sind:

Kartentyp Wert von twitter:card Typische Verwendung
Zusammenfassung summary Artikel und normale Inhaltsseiten
Zusammenfassung mit großem Bild summary_large_image Blogbeiträge mit einem großen Titelbild
Player player Eingebettetes Audio oder Video
App app App-Installationslinks mit Store-Metadaten

Erforderliche und empfohlene Tags

Dieses Tool prüft nur die erste Gruppe, die drei Tags, die X für jede Karte braucht.

Erforderlich (hier geprüft):

  • twitter:card, das zu verwendende Format
  • twitter:title, die Überschrift (X zeigt etwa die ersten 70 Zeichen)
  • twitter:description, die Zusammenfassung (X zeigt etwa die ersten 200 Zeichen)

Empfohlen (hier nicht geprüft, aber sinnvoll):

  • twitter:image, eine absolute https://-URL zu einem PNG, JPG oder GIF; mindestens 300 x 157 px für eine Zusammenfassungskarte und 800 x 418 px für summary_large_image
  • twitter:site, das @handle Ihrer Marke
  • twitter:creator, das @handle des Autors
  • twitter:image:alt, Alternativtext für Barrierefreiheit

Häufige Fehler

  • Nur Open-Graph-Tags. X greift auf og:title, og:description und og:image zurück, sodass der Link zwar aufklappt, aber ohne twitter:card standardmäßig als kleine Zusammenfassung erscheint. Liefern Sie beide Sätze aus, wenn Sie können.
  • Bild zu klein. Unter 300 x 157 px kann die Karte auf reinen Text zusammenschrumpfen.
  • Relative Bild-URL. twitter:image muss absolut sein (https://...); ein relativer Pfad wird ignoriert.
  • property= statt name=. X, und auch dieser Validator, lesen die Twitter-Tags aus name="twitter:...". property="twitter:..." funktioniert für Open Graph, aber nicht dafür.
  • Beschreibung zu lang. Ab etwa 200 Zeichen kürzt X sie, meist mitten im Wort.

So sehen Sie die echte Karte

X hat seinen offiziellen Card Validator (cards-dev.twitter.com/validator) 2023 eingestellt, es gibt also keine offizielle Seite mehr, die eine Live-Vorschau rendert. Dieses Tool bestätigt, dass die erforderlichen Tags vorhanden und lesbar sind; um die echte Karte zu sehen, teilen Sie den Link in einem Beitragsentwurf oder in einer Direktnachricht an sich selbst, oder nutzen Sie einen Link-Vorschau-Prüfer eines Drittanbieters. Wenn X nach dem Korrigieren der Tags weiter ein altes Bild zeigt, hängen Sie an die Bild-URL eine Query-Zeichenkette wie ?v=2 an, um den Cache zu umgehen.

Häufig gestellte Fragen

Nein. Es liest das HTML, das Sie einfügen, und bestätigt, dass die drei erforderlichen twitter:-Tags vorhanden sind, und zeigt den Wert jedes einzelnen an. Es zeichnet die Karte nicht und ruft Ihre Live-Seite nicht ab. X hat seinen eigenen Card Validator 2023 abgeschaltet, daher ist der zuverlässige Weg zur echten Karte, den Link in einem Beitragsentwurf oder in einer Direktnachricht an sich selbst zu teilen.

X greift auf og:title, og:description und og:image zurück, sodass der Link weiterhin aufklappt, aber ohne twitter:card erscheint standardmäßig eine kleine Zusammenfassung. Für eine Karte mit großem Bild müssen Sie twitter:card ausdrücklich auf summary_large_image setzen. Beachten Sie, dass dieser Validator nur die twitter:-Tags prüft, nicht Ihre og:-Tags.

Er sucht nach name="twitter:..." mit dem content-Attribut hinter dem Namen, in einfachen oder doppelten Anführungszeichen. Nutzt Ihr Tag property="twitter:..." statt name= oder steht content vor name, greift das Muster nicht, auch wenn das HTML gültig ist. Bringen Sie es in die Reihenfolge name="..." content="..." und prüfen Sie erneut.

Dieser Validator erkennt den Namen unabhängig von Groß- und Kleinschreibung, twitter:Card wird hier also ebenfalls erkannt. Halten Sie sie trotzdem klein (twitter:card), denn das ist die Form, die X dokumentiert und erwartet.

Kurz gesagt: ja. Die Prüfung läuft auf unserem Server, das eingefügte HTML wird also dorthin gesendet, ausgewertet und verworfen. Wir speichern nur einen anonymen Hinweis darauf, dass das Tool genutzt wurde, niemals Ihr Markup, und es ist kein Offline-Tool, das im Browser arbeitet.

Verwandte Tools

Tool in anderen Sprachen verfügbar