Ozgur's Blog

Random ramblings of personal nature

Metadata for Twitter Cards

I like using Pelican - or rather Static Site Generators - for blogging. For starters they are blazing fast - due to there is no PHP/ASP/What-have-you overhead and SQL shenanigans - and secondly they are secure from the get go. The end product is pure static HTML.

Last but not the least I like the feeling when I publish a post, involving a simple act of pushing a change to the repository for me, causes a CI cycle to create the newest version of the website you are accessing now.

I like to create minor tremors in the Miasma as Neal Stephenson calls the internet in his latest book.

I can hear you say "Return to the subject pls." and I should.

Pelican's default installation - at least MY installation - doesn't have the required metatags for Twitter to create a nice looking card when you share your post. Those tags are:

<meta property="og:locale" content="en_US" />
<meta property="og:type" content="article" />
<meta property="og:title" content="{{article.title|striptags}}" />
<meta property="og:url" content="{{article.url}}" />
<meta property="og:site_name" content="{{SITENAME}}" />
<meta property="og:image" content="https://" />
<meta property="og:image:secure_url" content="https:// />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="{{article.title|striptags}}" />
<meta name="twitter:image" content="https://" />

You can get more detail from Twitter's own page regarding Twitter cards unsurprisingly named as "Optimize Tweets with Cards"

But this quick and dirty schema, which should be placed on your blog template, is enough to pop up a Twitter card when you share your spanking new content.

Property Meaning
locale The language of content
type The type of content
title Title - the first thing users on Twitter will see after the picture
url URI of the content
site_name <title> of your site
image Which image will the card have? This should be set to featured_image property of the post btw
image:secure_url same thing but with a https.
twitter:card What's the type of the card. You can see the card types on the twitter page I've referenced
twitter:title The title that'll be shown on Twitter card
twitter:image The image that'll be shown on Twitter card

I used Jinja2's tags for dynamically placing those metadata based on the post.