When developing web applications, or even a personal blog, there’s a good chance content will be shared on social media. When a link is shared, the social media platform will attempt to generate a preview of the content. This preview is called a “social card”.

In the featured image for this post, you can see an example of a social card generated by the platform formerly known as Twitter. The card is generated using <meta> tags found in the source code of the page. For Pin Sheet Pro, I’m using Django for the backend. Adding Open Graph tags to the base template is a very simple way to increase the quality of the social card.

After writing yesterday’s blog, I noticed that the social card was completely missing when posting to Twitter. Oh noes! Today’s mission, should I choose to accept it, is to add Open Graph tags to the base template of the blog. For those not familiar, this blog is written using Jekyll. Full source is always available here.

Digging into the head.html file I (re) learned that the Jekyll SEO tag was already being used! All of the relevant Open Graph and Twitter tags were already present. Curious as to why the image for the social card wasn’t being displayed in the Twitter preview.

You can see a full breakdown of available Open Graph Protocol tags here: Open Graph Protocol