Adding Twitter cards to Jekyll

Share:

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.

Tagged with twitter, jekyll, seo, social-media

Recent Posts

Published: Sep 8, 2017

It has been a long time since I last updated the design of my site and as a Frontend Developer it didn’t seem right to wait any longer. I have used a variety of different frontend frameworks in the past, from Foundation, to Bootstrap, but this time I wanted something different, so with a cup of coffee in hand I started looking for something new.

Published: May 20, 2017

I’ve been looking into different JavaScript frameworks for a while and there seems to be a big following for Vue.js throughout the Laravel community. Therefore, I thought I had better give it a look and see what its all about.

Published: Apr 1, 2017

My job title is frontend web developer, and I am confused. I am in a situation where there are now so many different options for me to start learning that I don’t know where to start. I always find a good place to start is the beginning, so here goes a little history lesson.

Published: Aug 10, 2016

Its easy to start writing code without thinking about the organisation, but take some time to plan and it will reward you later. Sometimes a new project is so exciting you just want to start coding and making things work, thinking that you will sort out the structure at a later date. After all, who cares as long as it works, right?

Published: Jul 11, 2016

There is a great tool available called Page Speed insights. It gives you an easy to use tool that you can use to measure the speed of your site out of 100. It gives you hints and tips about how you can improve the score of your site, through compressing JavaScript, reducing server response time and eliminating render blocking JavaScript and CSS. The idea being it gives visitors to your website the best experience.

Shirt