Creating Twitter cards on Jekyll websites.12 Nov 2018
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. 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.
- 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.
yamltag: "clever something: clever something's explanation"
I will mention that I used the tutorial of here, but tweaked it.
Put Twitter meta tags in head.html
_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.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.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.summary, and then the optional selections concerning
This will result the following Twitter card for the
image selection gives the summary card:
and no image field gives the default, or the
title_image. This is my Twitter banner.
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.