Creating Twitter cards on Jekyll websites.
12 Nov 2018My personal website – this one! – is generated with Jeykll and hosted at Github. The content is written in a mixture of … well, lots of things. Markdown, 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
- Put Twitter meta tags in head.html
- Fill in site specifics in _config.yml
- Fill in page specifics in Markdown file .md
- Test time
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:
Using the image selection gives the summary card:
and no image field gives the default, or the title_image. This is my Twitter banner.
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!