We use cookies on this site to enhance your user experience

By clicking the Accept button, you agree to us doing so. More info on our cookie policy

Adding Twitter cards to Jekyll

Published: Sep 24, 2014 by C.S. Rhymes

Twitter cards are a great way of making links to your site stand out to other twitter users. They can be used to provide additional information and an image about your page, from within twitter when you expand a tweet. Examples include twitter summary cards that provide a title, description and image, or product cards that can provide information such as price or product category.

Example Twitter Card

Twitter Meta Tags

In order to get twitter cards to work, you first need to add twitter meta tags to your pages. In the default Jekyll project the meta tags are held in the head.html file within the includes folder.

There are different types of tags required for different types of twitter cards. For this example I am going to use the default “Summary” card.

For a summary card to work you need the following tags as a minimum:

  • Card - The card type
  • Site - This is your twitter name / handle
  • Title - The page title
  • Description - The description of the page

You can also add an image.

Below is the example HTML meta tags.

<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@twitterhandle" />
<meta name="twitter:title" content="Page title goes here" />
<meta name="twitter:description" content="Page description goes in here" />
<meta name="twitter:image" content="Image URL" />

Adding custom template tags

So now you need to add content into the meta tags for each page. To do this I created custom page variables in the front matter of each page and then added the variables to the head.html file. More information about Jekyll page variables can be found in the documentation.

Example Front Matter with custom variables

---
title:  "Example page title here"
description: "You can use this as the standard description meta tag and twitter description if required"
twitter-description: "This is a specific twitter card description (optional)"
---

I used my standard page title as the content for the twitter:title tag, but I thought I had better put a back up value in there of the site.title in case I forgot to set the title for every page.

{% if page.title %}{{ page.title }}{% else %}{{ site.title }}{% endif %}

The above basically says if there is a page title variable then use that, else (if not) then use the site title variable.

I then created a custom variable for the description. Previously, I have added description for the normal description meta tag (so that each page has a unique description and not using the site description) and then used this variable again within the twitter:description tag. If you want to have a different description for twitter then you can create a new custom variable, for example twitter-description.

Adding Page Description to Description Meta Tag

<meta name="description" content="{% if page.description %}{{ page.description }}{% else %}{{ site.description }}{% endif %}">

You can then do the same for the image if you require, or you can hard code a single URL for each page (as in the below example) if you don’t have a different image for each page.

Twitter Meta Tags with variables added

<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@chrisrhymes" />
<meta name="twitter:title" content="{% if page.title %}{{ page.title }}{% else %}{{ site.title }}{% endif %}" />
<meta name="twitter:description" content="{% if page.description %}{{ page.description }}{% else %}{{ site.description }}{% endif %}" />
<meta name="twitter:image" content="http://chrisrhymes.github.io/img/csrhymeslogo.png" />

Validating Your Cards

Once you have added your twitter card meta tags to your site you then need to go to the twitter devs site and validate your cards. This simply involves copying and pasting your sites URL into the form. It will tell you of any errors it finds for you to fix before it can be validated.

It is normally very quick to get your page validated, but there is also the option to validate your whole site by adding it to the whitelist. The only issue I found with doing this is that you get an email from Twitter for EVERY page in your site telling you the twitter card is ready. This is fine if you have a few pages, but if you have hundreds of pages then you will get hundreds of emails. This seems like a bit of an oversight by twitter.

Measuring Clicks

All sorted? Well, there is one more thing you should know about. Twitter offer an Analytics service that provides some great information, showing you how your tweets convert to impressions and from impressions to clicks. More information is available on the Twitter devs site.

Latest Posts

Why did I become a writer?
Why did I become a writer?

There has been a lot of discussion on Threads recently about becoming a writer, but don’t give up your day job. I have seen a lot of arguments from all sides, some people saying they became a successful full time writer, others saying they would never give up their job, then there are others who became writers full time then went back to another job. Writing has always been a hobby for me, but this discussion has made me think more about why I write.

Adding social icons to the Bulma Clean Theme footer
Adding social icons to the Bulma Clean Theme footer

Version 1.1.0 of Bulma clean theme has been released. It has a small update that allows you to easily add social media links to the footer of your site.

The Little-Astwick Mysteries (book 2) - Grave concern at the Manor
How NOT to make a website

How NOT to make a Website

By C.S. Rhymes

From £5.49 or read for free on Kindle Unlimited!

Nigel's Intranet Adventure

Nigel's Intranet Adventure

By C.S. Rhymes

From £3.99 or read for free on Kindle Unlimited!