Manche Sachen passieren einfach so. Man hält sie schon für selbstverständlich. Doch wenn man genauer hinguckt, ist alles ganz anders. Heute wird Twitter Cards kurz erklärt.
Was ist Twitter Cards? Normalerweise sind Twitternachrichten reine Textnachrichten. Deswegen heisst er auch Textnachrichtendienst. Die Anzahl der Zeichen ist auch noch begrenzt - 140, glaube ich. Wurde auch vor paar Jahren mal erhöht, was einer Revolution gleich kam, weil vorher waren es noch weniger. Die Kunst besteht also dadrin, soviel wie möglich Informationen auf kleinstem Raum unterzubringen. Erinnert so ein bischen an 56k Modem. Mittlerweile erlaubt Twitter auch Bilder in Tweets, sogar mehrere (ganze 3 Stueck!). Ein Bild sagt bekanntlich mehr als Worte und so ist so ein Hinweis auf einen kürzlich verfassten Blogpost gleich viel ansprechender:
Bislang erlag ich der Annahme, dass Twitter einfach das erste Bild (Teaser) heranzieht, um das im Tweet einzubetten. Nee, ist es nicht.
Dann dachte ich, dass die Social Media Sharing Dienste wie Shareaholic und Sharethis zusammenbasteln. Nee, ist es auch nicht.
Das Feature nennt sich Twitter Cards und ist auch in der Developer Dokumentation beschrieben. Im Prinzip werden im HTML-Header des Blogposts META-Anweisungen hinterlegt, die Twitter beim Einfügen der URL im Tweet abruft und auswertet. Bei B2Evolution oder Wordpress gibt es Social Media Plugins. Wenn man Github Pages mit Jekyll oder Hugo verwendet, kann man sich das auch plain zusammenbasteln:
<meta property="og:url" content="https://blog.eumelnet.de/blogs/blog8.php/kubernetes-ipv6-jetzt-gehts-los" />
<meta property="og:description" content="Hurra! Kubernetes 1.21 ist da! Und damit endlich eine Implementierung von IPv6 DualStack in K3S. IPv6 kann also zusammen mit IPv4 betrieben werden. Nun, was bedeutet das genau? Schauen wir uns das in der Praxis unseres Heimnetzwerkes an." />
<meta property="og:site_name" content="blog.eumel.de" />
<meta property="og:image" content="images/blog-eumel-de.png?mtime=1594142083" />
<meta property="og:image:height" content="851" />
<meta property="og:image:width" content="315" />
<meta property="twitter:card" content="summary_large_image" />
Es gibt also eine Meta Property “twitter:card”, welches das grundsaetzliche Aussehen des Tweets bestimmt (siehe Dokumentation). Die anderen sind Open Graph Tags (og), auch eine Entwicklung, die an mir vorbeigegangen ist. Dieser englischsprachige Blogpost erklärt das in Tiefe und auch für andere Social Media Dienste. Man kann aber auch klein anfangen wie mit dem “og:image” Tag, indem sich tatsaechlich der Link zu unserem Blogbild hier befindet.
Twitter bietet auch noch diesen Validierungsdienst an, bei dem an einfach die URL eingibt, die man zu posten gedenkt und diese dann auf Fehler analysiert wird (siehe Logoutput). Auch die Groesse des Bildes kann man begutachten und entsprechend aendern, wenn man nicht damit zufrieden ist.
Dem perfekten Tweet kann dann nichts mehr im Wege stehen!