Adding Twitter Cards to Jekyll

Adding Twitter cards for your blog posts is an excellent way for your post to stand out on the Twitter timeline. Instead of a text link, you can have a descriptive and pretty graphic to entice people to click on your post.

.

The great thing about the gem we're going to be adding to allow this functionality is that these graphics will show up on most social media sites. When you post the link to your blog post, the link will unfurl, and the image will show up.

Add this line to your Gemfile inside of the jekyll_plugins group:

gem 'jekyll-seo-tag'

Add the plugin to your _config.yml in the plugins_dir section.

- jekyll-seo-tag

Now run bundle install to install the gem to your project.

Let's start by creating a default blog card, and this will be what gets displayed when you link to your top-level website. I use canva to create all of my graphics. I set my width and height to 800x418. Canva has lots of great free templates, so find one you like and customize the colors and text, or create a graphic from scratch.

Set the default card in the metadata on your index.html page.

---
layout: default
image: "/assets/images/CARD_FILE_NAME"
---

For Jekyll to understand the image key in the frontmatter add this to the head of your layout.

{% seo %}

Now for each blog post, you can create a custom card. I like to use the same design but change the text to the blog post title. But, there are no rules for how to do this. You might want to create custom images that are related to your blog post, for instance. To link a card to a post, add the image key to the blog post's frontmatter and set the value of the configuration to the image path of the card. I keep all of my cards in assets/images/twitter-cards/year/, use whatever directory structure works best for you.

I like to make sure that my card is working correctly by pasting the URL into opengraph.xyz. This website will let you preview your social media cards and all the metadata.

I hope this helped you to get up and running with social media cards with Jekyll.