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

Rethinking your commute
Rethinking your commute

Like many people, I work in a city, but I live outside the city, meaning I have to commute to work each day. My normal commute takes me over an hour to commute just over 20 miles. That’s pretty shocking when you think of it. My average speed is less than 20 miles per hour. I enjoy my job but, like most people, I really don’t enjoy the commute to and from work.

Using Laravel Eloquent's Many to Many Relationship
Using Laravel Eloquent's Many to Many Relationship

The more time you spend reading the Laravel docs, the more things you will find that will save you time and effort. I have been using Laravel for many years but this week I discovered I had been using the many to many relationship in a sub optimal way, and by that I mean I avoided it at all costs.

Managing Expectations
Managing Expectations

How long will something take to do? Who knows? Sometimes you just need to make just a tiny little quick change, but it doesn’t work out quite as expected and you have to go back and keep making small change after small change, then before you know it, it’s lunch time.