Matthew Lincoln, PhD Art History and Digital Research

Twitter cards in Jekyll

A while back I brought you COinS for Your Jekyll Blog. (I’m proud to say they’ve also recently been added to Programming Historian posts!) Today, I discuss how to add Twitter Cards to your Jekyll posts.

Adding a few <meta> tags to your Jekyll layout will ensure that any time someone pastes one of your URLs into a tweet, a small post summary and even an image will pop up within that tweet.

Twitter Card example

While you can read more on the Twitter dev pages about the intricacies of different fields, I use the following setup on this blog. I’ve got a snippet called twitter_card.html in my _includes folder that looks like this:

<!-- Enables twitter cards on posts -->
<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@matthewdlincoln" />
<meta name="twitter:title" content="{{ page.title }}" />
<meta name="twitter:description" content="{{ page.excerpt | escape }}" />
<meta name="twitter:url" content="{{ page.url }}" />

I just drop an {% include twitter_card.html %} into my post layout, and Jekyll will render every post with the appropriate meta tags.

One final step: validate your cards with Twitter, and you’re good to go.


Cite this post:

Lincoln, Matthew D. "Twitter cards in Jekyll." Matthew Lincoln, PhD (blog), 01 Apr 2015, http://matthewlincoln.net/2015/04/01/twitter-cards-in-jekyll.html.


Tagged in: Code