Improving Twitter Card Visual

In this series, I blog about the little ways I’m improving my website.

Improving Twitter Card Visualization

Recently, I saw a Tweet asking people to share their personal websites. As I have one (I guess…you’re here now… so… it counts!), I decided to share it. Twitter turned it into the following representation. 👇

I wasn’t happy with this at all!

• The image is small and not really adding value here (not even with my sparkling shiny self on it…);
• “Home” is the title of my homepage… not relevant for showing on Twitter;
• The summary is just the content of the page, but truncated to a limited text;

As these were the defaults for my website… it was time for some investigation! 🧐

How does Twitter render these cards?

Apparently, Twitter looks at some tags to determine how it wants to render the card. The details can be found in the official documentation but I’ll highlight the things I’ve changed for my own website.

• There are different card types. My website was using the twitter:card=summary style, resulting in that small image and more text. This I changed to twitter:card=summary_large_image and I created a custom image I want displayed when linking my main page.

• Next, I adjusted some of the text for the page. As I use Hugo to generate my website, I changed the template I use a little bit so I can adjust the front matter of my main page and the templating engine takes care of the rest.

<!-- BEFORE -->
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Home">
<meta name="twitter:description" content="Wisdom comes from experience Experience is often a result of lack of wisdom - Terry Pratchett
On this website, I share my experience and resulting wisdom!
This is my place on the internet where I …  <AUTO_ADDED_BY_TEMPLATE->TRUNCATED_PAGE_CONTENT>">
<meta name="twitter:image" content="https://tomcools.be/img/shiny-tom.jpg">
<meta name="twitter:site" content="@TCoolsIT">
<meta name="twitter:creator" content="@TCoolsIT">

<!-- AFTER -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Tom Cools">
<meta name="twitter:description" content="Compiled Lessons Learned, Notes Shared Online.">
<meta name="twitter:image" content="https://tomcools.be/img/twitter-card.jpg">
<meta name="twitter:site" content="@TCoolsIT">
<meta name="twitter:creator" content="@TCoolsIT">

Note: The code example above shows the Twitter specific tags. Be sure to have a look at the Open Graph alternatives. Twitter will always look for the more specific tags first, before defaulting towards the Open Graph tags.

So what has changed

After changing the kind of card I wanted rendered and adding a custom image I wanted to see the result. You can test the rendering of specific webpages using the online Card Validator tool. This way you don’t actually need to post something on Twitter just to see what your card looks like.

BEFORE

AFTER

Much better! 😇

But what about cards for single pages?!

As stated before, I use Hugo to generate my website. I found a tool to read my Hugo configuration and create images for individual pages. Twitter Card Generator reads the frontmatter of my content and generates images for it.

find ./blog/content/post -name "*.md" -exec tcardgen --fontDir=./cardgen/font --config ./cardgen/card-blogpost.config.yaml --output {}.png {} ';'

I added this script to my build pipeline, making it a bit slower but it will create new cards for older posts as well if I iterate on them (which I have been doing a lot!).

Ending

It’s always fun to look behind the curtain and learn how things work. Even if it is something as silly as a card on Twitter. I might play around with it a bit more… but it’ll do for now.

So go out there and try it! Share your website online (or use the tool 😅 ) and see what the Twitter card looks like. Not happy with it? Start messing with the meta tags! If I could do it, so can you!