Twitter Cards for Jekyll with jekyll-seo-tag

Published: January 2, 2018


If you run a Google Search for for “jekyll twitter cards” you’ll come across many articles with instructions for setting up Twitter Cards on a Jekyll blog.

All the posts I’ve read suggest updating layout / template files with the required Twitter Cards <meta> tags.

While this is certainly a valid approach, there’s another way to do it that doesn’t require writing any code. Instead this can be handled entirely by jekyll-seo-tag, a GitHub Pages supported Jekyll plugin.

Here’s let’s take a look at how this can be done.

NOTE: This post is based on jekyll-seo-tag as of version 2.4.0.

Installing The Plugin

Installing jekyll-seo-tag, is no different than installing any other jekyll plugin. Per the Jekyll documentation simply specify the plugin in your _config.yml

  - jekyll-seo-tag

This will make GitHub pages know to use the plugin.

To install locally run gem install jekyll-seo-tag at the command line.

Finally, add the following tag inside the <head> in your site’s template(s):

{% seo %}

Declaring Your Twitter Username In _config.yml

Next, you’ll need to declare your Twitter username in your _config.yml. Without this, jekyll-seo-tag will not include the meta tags.

On my site this looks like this…

  username: maxpchadwick

Including An Image For Your Post

This step is not required, but is recommended.

If you specify an image in your post’s front matter, jekyll-seo-tag will specify that your post should display as a “Summary Card with Large Image” and use that image for the card. Alternately, the card display a “Summary” card and will not include any image.

You can define the image in your post’s front matter as follows…

image: /img/blog/my-image.jpg

Digging Into The jekyll-seo-tag Source

Just for fun, below I’m including the code from jekyll-seo-tag that is involved with generating the Twitter Card. Using this we can see the exact logic which is at play.

{% if site.twitter %}
  {% if seo_tag.image %}
    <meta name="twitter:card" content="summary_large_image" />
  {% else %}
    <meta name="twitter:card" content="summary" />
  {% endif %}

  <meta name="twitter:site" content="@{{ site.twitter.username | replace:"@","" }}" />

  {% if %}
    <meta name="twitter:creator" content="@{{ }}" />
  {% endif %}
{% endif %}

Perhaps the most interesting thing worth noting is that the twitter:image meta tag is not included on the page. Instead, jekyll-seo-tag leverages the fact that Twitter will use the og:image for a “Summary Card with Large Image” if the twitter:image is not included.

Max Chadwick Hi, I'm Max!

I'm a software developer who mainly works in PHP, but loves dabbling in other languages like Go and Ruby. Technical topics that interest me are monitoring, security and performance. I'm also a stickler for good documentation and clear technical writing.

During the day I lead a team of developers and solve challenging technical problems at Something Digital where I mainly work with the Magento platform. I've also spoken at a number of events.

In my spare time I blog about tech, work on open source and participate in bug bounty programs.

If you'd like to get in contact, you can find me on Twitter and LinkedIn.