Twitter-Card-Meta-Tags

Twitter (X) hat sein eigenes Protokoll für Vorschaukarten definiert, bevor OpenGraph existierte, und pflegt es weiterhin. Auch wenn das moderne Twitter auf OG-Tags zurückgreift, wenn twitter:*-Tags fehlen, sorgt die explizite Angabe von twitter:card für das vorhersehbarste Kartenlayout.

Es gibt vier Kartentypen: summary (kleines Vorschaubild neben Titel und Beschreibung), summary_large_image (Hauptbild über die gesamte Breite), app (Installation einer mobilen App) und player (eingebettetes Video oder Audio). Wählen Sie für inhaltsreiche Artikel summary_large_image.

Wenn vorhanden, überschreiben diese Werte og:title und og:description auf Twitter. Verwenden Sie sie, wenn Sie für das Twitter-Publikum eine andere Überschrift als für allgemeine OpenGraph-Nutzerinnen und -Nutzer wünschen; andernfalls greift Twitter auf die OG-Werte zurück.

Für summary-Karten ein quadratisches 1:1-Bild mit mindestens 144x144 Pixeln. Für summary_large_image ein Bild im Format 2:1, idealerweise 1200x600 oder größer. Twitter lehnt Bilder über 5 MB ab. Verwenden Sie wie bei og:image eine absolute URL – relative Pfade funktionieren nicht.

Alternativtext für das Kartenbild mit bis zu 420 Zeichen. Er verbessert die Barrierefreiheit für Screenreader-Benutzerinnen und -Benutzer beim Durchsuchen von Twitter und bietet eine Ersatzbeschreibung, wenn Bilder nicht geladen werden. Geben Sie ihn immer an – 30 Sekunden Aufwand für mehr Inklusion.

twitter:site ist der Twitter-Handle Ihrer Website (einschließlich @). twitter:creator ist der Handle der einzelnen Autorin oder des einzelnen Autors. Wenn Sie diese Werte ausfüllen, kann Twitter "from @yoursite" anzeigen und die Autorenzeile mit einem echten Konto verknüpfen.

OpenGraph verwendet property="og:..."; Twitter verwendet name="twitter:...". Der Unterschied ist historisch bedingt (RDFa gegenüber HTML5). Beide sind technisch gültig; wenn Sie für jedes Protokoll das richtige Attribut verwenden, vermeiden Sie Sonderfälle bei strengen Validatoren.

twitter:card="app" ermöglicht es Ihnen, eine iOS-/Android-App mit twitter:app:id:iphone, twitter:app:id:ipad, twitter:app:id:googleplay und twitter:app:url:*-Deep-Links zu bewerben. Beim Antippen der Karte wird der App Store, der Play Store oder direkt die installierte App geöffnet.

twitter:card="player" bettet einen Video- oder Audioplayer direkt in den Tweet ein. Erfordert twitter:player (URL eines HTTPS-iframes), twitter:player:width und twitter:player:height. Twitter genehmigt Player-Karten manuell, um Missbrauch zu verhindern – reichen Sie sie über developer.twitter.com ein.

Twitter hat die öffentliche Benutzeroberfläche des Card Validators eingestellt, aber die Karten werden weiterhin in einem Tweet-Entwurf als Vorschau angezeigt. Fügen Sie Ihre URL in einen privaten Entwurf ein, um genau zu sehen, welcher Kartentyp und welches Bild vor der Veröffentlichung des eigentlichen Tweets gerendert werden.

Fügen Sie immer sowohl twitter:card als auch den vollständigen Satz der OG-Tags ein. Die meisten Plattformen außerhalb von Twitter ignorieren die twitter:*-Tags, und die meisten modernen Twitter-Clients greifen auf OG zurück. So liefert die Kombination überall eine korrekte Vorschau bei minimaler Duplizierung.

Twitter-Karten (angegeben über name="twitter:card") liefern auf X eine vorhersehbare Vorschau für Seiten. Wählen Sie für redaktionelle Inhalte summary_large_image, fügen Sie twitter:image mit absoluter URL und twitter:image:alt hinzu, geben Sie Website und Autorin beziehungsweise Autor über Handles an und lassen Sie für nicht überschriebene Tags die OG-Werte greifen.