Rob Moffat
Rob Moffat Author of Risk-First Software Development. Developer. Working in the UK.

Twitter Cards

I’m not the best at Social Media… like a lot of people I’m giving Facebook the swerve completely these days. However, I set up a Twitter account @risk_first to post articles, and I’ve also been posting on LinkedIn and Hacker News.

Turns out, there’s quite a lot you can do to improve the presentation of posts on Twitter. Now, when you post a Risk First article on there, it’ll use the Twitter Card to display a summary of the post, which looks like this:

Screenshot 2019-03-22 at 10 11 38

This was pretty hard to get right. You have to have a 2:1 aspect ratio in the images, which can be a pain - if you don’t, Twitter crops the image in usually a not-helpful way. I used Kite9 (my diagramming software) to produce an image for each post.

The Risk First Website uses GitHub’s built-in Jekyll static-site generator, so I was able to generate the Twitter Cards using the Jekyll metadata on each article.

Then, I use Jekyll SEO Tag to set the header information on the HTML page:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<html>
  <head>
    ... 
    <meta name="description" content="Risk-First is about applying risk theory and practice to Software Development, building a pattern language of useful risk terms.">
    <meta property="og:description" content="Risk-First is about applying risk theory and practice to Software Development, building a pattern language of useful risk terms.">
    <link rel="canonical" href="https://riskfirst.org/">
    <meta property="og:url" content="https://riskfirst.org/">
    <meta property="og:site_name" content="Risk-First">
    <meta property="og:image" content="https://riskfirst.org/images/generated/titles/index.png">
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:site" content="@risk_first">
    <meta name="twitter:creator" content="@risk_first">
...
  </head>
....

Twitter (and LinkedIn) pick this stuff up and display the appropriate image. I’ve also generated images for quotes in the articles:

Screenshot 2019-03-22 at 10 20 10

It’s doubtful whether any of this will make a blind bit of difference - Twitter seems like it’s basically an outrage-machine these days, but it was an interesting piece of work to get done.

Hope someone finds this useful!

Add Your Star On GitHub to receive an invite to the GitHub Risk-First team.