Creating Twitter cards on Jekyll websites.

November 12, 2018

Back to Tips and Tricks Table of Contents

My personal website – this one! – is generated with Jeykll and hosted at Github. The content is written in a mixture of … well, lots of things. Markup, YAML, css, liquid. Some of these I know decently well, others, not so much. The tags for Twitter cards are put in the YAML sections.

Contents:

What you should know about YAML

I didn’t know anything about YAML until I played around with Twitter cards. YAML is extremely picky about syntax. (Search for guides.) My particular issue? a semicolon. You can get around it with quotes, so

yamltag: clever something: clever something's explanation

will cause a page not to generate – but you can find the issue with jekyll serve on the local machine and reading on what line and column the error occurs.

But

yamltag: "clever something: clever something's explanation"

Works fine.

I will mention that I used the tutorial of here, but tweaked it.

Put Twitter meta tags in head.html

In my _includes folder, is head.html. It is here that you need to put most of the information:

When using the standard code block in markdown, this snippet just filled in the values from my webpage! After many fights, I have given up. In the interest of transmitting this information, here is a file with the correct formatting of the code snippet.

All this is very generic, and yours is going to be the same as mine. We’ll customize later. In my version, there are two different YAML tags: page.largeimage and page.image. If a Markdown file has an entry for page.largeimage, the large summary card will be chosen. If there is an entry for page.image, the summary card type will be chosen. Otherwise, the default title image will be chosen. If both labels are present, then the larger summary card is chosen.

As to where to put this– doesn’t too much matter. I put it after the Google Analytics tracking code, sort of near the bottom.

Fill in site specifics in _config.yml

Then customization happens at the site and page level. At the site level, edit _config.yml, and make sure you have entries for site.twitter_username, site.description, site.url, and site.title_image. Here’s mine, as an example of what those fields look like:

url:              https://amytabb.com
description:      'I am a researcher working at the intersection of computer vision, robotics, agricultural automation, and plant phenotyping.'
title_image:       "https://amytabb.com/public/title_image.jpg"
twitter_username:   amy_tabb

Fill in page specifics in Markdown file .md

Then, you need to fill in the page level specifics. This is the example from the WordPress post about getting Twitter cards to work.

---
layout: page
title: Creating Twitter card templates for WordPress 
summary: A howto on creating Twitter card markup in .php files for WordPress themes
author:  amy_tabb
largeimage: /ts/2018_11_11_images/composite.png
---

The fields you need to fill in are: page.author, page.title, page.summary, and then the optional selections concerning page.largeimage or page.image.

This will result the following Twitter card for the largeimage selection:

Select Template

Using the image selection gives the summary card:

Select Template

and no image field gives the default, or the title_image. This is my Twitter banner.

Select Template

Things to consider when choosing between summary or large Twitter cards.

Test time

Push everything to the server until it is live, then head over to the Twitter card validator. Paste the link of the post/page in the box, and see what happens. You may have to wait a minute or two – or ten until everything refreshes.

Hopefully your cards look great, but if they don’t check out the troubleshooting tips on the companion post to this one.

Happy tweeting!

© Amy Tabb 2018-2020. All rights reserved. The contents of this site reflect my personal perspectives and not those of any other entity.