Twitter Cards

Blog 

Twitter supports showing custom metadata for websites in a form of “cards”. To take full advantage of this feature with jekyll, we are going to use jekyll-seo-tag plugin.

Before diving in, the final twitter card should look like:

1. Install

The jekyll-seo-tag plugin can be added to a Jekyll site using gem. Since I’m not using Gemfile for my site, I need to do the following:

gem install jekyll-seo-tag  --user-install

And then add the following to my _config.yml:

plugins:
  - jekyll-seo-tag

That’s it, you are (or I am?) all set!

2. Using the plugin

To add an interactive tweet to your blog, simply put the following to the “head” section of your jekyll template. For me this is in _includes/head.html:

{% seo %}

Then, we need to add an image (needs to be in png, jpeg format, and 1200:600 aspect ration) to assets/img/ called jekyll-seo.png as this is our image for the twitter card.

Then, all we need to do is to set the default card image as the image we just uploaded. To do this, simply add the following to your _config.yml:

defaults:
  - scope:
      path: ""
    values:
      image: /assets/img/jekyll-seo.png

Alternatively, you can also add the following to the front master section of your index.html file:

image: "/assets/img/jekyll-seo.png"

To test the card before you sending our your twitter, use :link: the card validator.

And that’s it! Enjoy!



Author | Chengcheng Xiao

Currently a PhD student at Imperial College London. Predicting electron behaviour since 2016.