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…
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.
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…
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 %}
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.
Hi, I'm Max!