Twitter Cards for Jekyll with jekyll-seo-tag

Published: January 2, 2018

Tags:

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

plugins:
  - 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.

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…

twitter:
  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 seo_tag.author.twitter %}
    <meta name="twitter:creator" content="@{{ seo_tag.author.twitter }}" />
  {% endif %}
{% endif %}

https://github.com/jekyll/jekyll-seo-tag/blob/520e78385b21f86bb7edb934007d99f0b217a9c2/lib/template.html#L32-L40

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 also dabbles in Ruby and Go. Technical topics that interest me are monitoring, security and performance.

During the day I solve challenging technical problems at Something Digital where I mainly work with the Magento platform. I also blog about tech, work on open source and hunt for bugs.

If you'd like to get in touch with me the best way is on Twitter.