Tweesky: don’t miss the Twitter Card preview
There is (obviously) lots of sharing of resources and links on Social Media (that’s the idea!) but surprisingly the nice Twitter Link Preview does not always appear.
This is not a great situation when you are growing your followers base, promoting you blog post or simply wanting to look nice and professional.
All Twitter gurus out there agree: the visual impact of the nice Card Preview is a must.
Why is that?
The Twitter Card preview relies on few simple markup tags:
<meta name="twitter:card" content="summary" />
<meta name="twitter:title" content="Beppe Catanese Github Home" /> <meta name="twitter:description" content="Personal projects (Java, Python, Chatbots, Date Engineering" />
<meta name="twitter:image" content="https://avatars3.githubusercontent.com/gcatanese/..." />Although there are few more, those above are the essential ones that the web page must provide. If they are not found the fancy preview goes south.
How do I fix it?
The simplest and logical way is to include the meta tags in the pages which are going to be shared on Twitter.
If you cannot do that (or don’t want to do it) then Tweesky comes to the rescue.
Say hello to Tweesky
Tweesky is a little side project to work with Social Media, Python and meta information.
Tweesky grabs a URL and provides an enriched tiny URL feature
FROM https://github.com/gcatanese TO https://tweesky_tk/abcd
Not another tiny URL thingy!? Uhm.. yes, it does provide all of that, the link redirects the user to the original URL (without accessing or storing any user or browser information), but it also generates the necessary Twitter Tags from the information found in the Web page .
Tweesky lives in Twitter and is waiting for Direct Messages (DMs) from followers: if the DM contains (only) a link there is a reply with a Tweesky URL.
An example
Let’s Tweet one of my Github projects: https://github.com/gcatanese/S3-Simple-Browser/blob/master/README.md
Oopsy-Daisy, the basic information is there but there is no image :-(
Let’s see the corresponding Tweesky URL:
What is happening? The original page has several meta tags but for some reasons the image meta tag is incorrect. Often it is more the case that the page does not have the Twitter meta tags at all and it is using the OpenGraph attributes or the Schema Org data, both powerful protocols to provide meta information.
In these situations the Twitter Preview cannot always build a complete card, so Tweesky tries to go a step further and obtain the tags from whatever it is available (OpenGraph, Schema Org or the HTML tags).
Notes and References
Few remarks to consider:
- Twitter Card preview description does not appear on mobiles (view port limitations?)
- the Tweesky URL does not always render correctly in Twitter (I am not sure how/when the view is rendered or refreshed… still trying to figure it out): try to post the URL in a new Tweet or validate it with Twitter Card Validator tool
- Tweesky cannot deal yet with Single Page Application: coming soon
- Page screenshot is taken when no image is available in the meta tags
Meet Tweesky and try it out: follow her first then send a DM with a URL
Feedback is welcome! Reach me at @beppecatanese
Edit (Dec 2020)
See Part Two: https://beppecatanese.medium.com/tweesky-dont-miss-the-twitter-card-preview-part-two-4dc328216865
