Lösungen « ◉ » E-Mail

Twitter-Cards

Erstellt am 07.03.2022 Lesedauer 2 - 3 Min.

Das nebenstehende „webp“-Bild enthält Transparenz (draufklicken zum Vergrößern, das macht es sichtbar). Damit hat Twitter ein Problem.

Ohne Transparenz (draufklicken …) wird das Bild von Twitter korrekt verarbeitet.

Der Dateityp webp wird von Twitter stiefmütterlich behandelt. Generell ist „1 Pixel Transparenz“ kritisch. Bei webp scheitert die Darstellung in jedem Fall, bei png ist sie unsicher.

Der Yaml-Eintrag upload ermöglicht Abhilfe. Damit kann ein twitter-konformes Bild unabhängig zum auf der Seite verwendeten bereitgestellt werden.

upload:/media/20210630-brexit-twitter.webp
 !Image:20210630-brexit-twitter.webp?123
 !ImageAlt:Testbild

Die „Twitter-Variante“ des angezeigten Bildes hat einen weißen Hintergrund. Dafür wurde in Photoline lediglich die Transparenz deaktiviert. In PNG-Bildern soll Transparenz unterstützt werden, es kann allerdings ebenfalls zu „kein Bild“ führen.

Das ?123 sorgt dafür, dass Twitter ggf. mehrere (wiederholte) Versuche für den Abruf des Bildes unternimmt. Wird beim ersten (und einzigen!) Versuch auf eine statische Adresse keins gefunden – was bei Twitter regelmäßig passiert — bleibt das Bild-Feld dauerhaft leer. Das Vorgaukeln eines generischen Bildes mit ?123 am Ende, löst erneute Abfragen aus, allerdings kann das dauern und Twitter „vergisst“ den erfolgreichen Abruf gelegentlich, um ihn anschließend zu wiederholen.

Die Anzeige-Größe des Bildes bei Twitter wird über den Eintrag

<meta name="twitter:card" content="…">

gesteuert.

Die möglichen „content“-Varianten:
summary_large_image

Das Bild wird im Seitenverhältnis 2:1 (b x h) erwartet und in die Fläche zentriert hinein skaliert.

Quadratische Bilder verlieren dabei „oben und unten“, maßgeblich scheint die Breite zu sein. Das Bild wird auf Breite des Threads oberhalb der „description“ angezeigt.

summary

Das Bild wird zu einem „Thumbnail“ skaliert.

Es ist „quadratisch“ empfehlenswert, die vorgesehene Fläche ist es ebenfalls. Bei 2:1-Bildern ist die Höhe ausschlaggebend, links und rechts wird beschnitten. „description“ wird neben dem Bild ausgegeben

Description

Twitter schneidet die description mittendrin ab, spätestens bei (ungefähr) 90 Zeichen. „Sicher“ ist < 70 Zeichen, da der Umbruch bei Leerzeichen erfolgt, was wiederum Einfluss auf den verfügbaren Platz für längere Worte hat.

Eine mögliche Beeinflussung des Umbruchs ist die Verwendung von „geschützten Leerzeichen“ in der „description“ → ALT 0160. Ein so gebildetes „Wort“ darf maximal 30 Zeichen lang sein, die Gesamtlänge liegt dann bei ~ 96 Zeichen.

Theoretisch ist bei summary_large_image eine längere Beschreibung möglich, doch wo genau da die Axt fällt, ist unklar.

Deshalb gibt es im Standard-Yaml-Header den (optionalen) Vorschlag !summary: Die „kurze“ Beschreibung gilt für Google, Twitter & Co., der Eintrag in !summary ermöglicht innerhalb der Webseite einen detaillierten Teaser – wenn auch ohne HTML-Auszeichnung, da dort weder direkte, noch „übersetzte Markdown“ Auszeichnung“ möglich ist.

Testen

Durch Anpassung der Kartengröße kann mit dem Card validator der Effekt ausprobiert werden. Das erfordert ein Login bei Twitter.

Alternativ kann mit Meta Tags oder opengraph getestet werden. Dort erfolgt die Anzeige wahlweise für weitere Seiten (Facebook, …), allerdings werden nur „große“ Bilder angezeigt.

Lösungen « ◉ » E-Mail