Twitter Cards
I have been working on this blog for a few months now, and am really starting to like the progress that I am making with blogging in general. Its a great way to communicate my thoughts in the wide world of web dev. So I thought Hey! I’m going to post a blog post on Twitter!
So I copied the link and sent out to the masses. Low and behold, a tweet for my blog:
New blog post:https://t.co/ksH461qb4g
— Chris (@motobreath) March 15, 2019
While this was a great personal step, and I was happy with the blog post, I felt the tweet itself was a bit lackluster. It included some info about my blog, including theme info, and a picture of me. I was not expecting this data. Enter Twitter Cards.
Twitter Card Metadata
If you are familiar with metadata for a website, this is where Twitter Cards come into play. They are special metatags placed in the <head> section of the website designed to help Twitter display your tweets. For example:
<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@nytimesbits" />
<meta name="twitter:creator" content="@nickbilton" />
There are multiple different types of Twitter Cards that you can use, including:
- Summary Card: Title, description, and thumbnail.
- Summary Card with Large Image: Similar to the Summary Card, but with a prominently-featured image.
- App Card: A Card with a direct download to a mobile app.
- Player Card: A Card that can display video/audio/media.
For this article we are going to be using Summary Card with Large Image.
Twitter Cards & Hugo
I use Hugo to generate my blog posts from markdown files, so I needed a way to define Twitter Card metadata in my markdown. To do this we need to create what Hugo calls front matter, which is Hugo’s way of injecting metadata into content types. This metadata can be in YAML, TOML, or JSON data format, and is typically found at the top of each article.md file. For this article we are going to use YAML. Here is the YAML front matter for the this article:
title: "Twitter Cards"
date: 2019-04-17T00:00:00-00:00
draft: false
twitter:
card:"summary_large_image",
site:"@motobreath",
creator:"@motobreath",
title:"Twitter Cards",
image:"https://example.com/great-picture.jpg"
A quick note here: the creator attribute is shown in the Official Documentation from Twitter, but I can’t seem to find any reason to use this?
And another note: The description field that twitter describes with twitter:description doesn’t seem to matter, instead Twitter uses the classic meta name=“description” property instead.
Now that we have our front matter we need to use this in our actual post. To do this, we create what Hugo calls a partial, which is a way to reuse code across your blog posts by injecting variables into your template. Its a lot easier than it sounds.
Hard Stop At this time in writing this document I realized that the theme I am using, Bilberry Hugo Theme has already implemented Twitter Card front matter into the theme. So adding the YAML mentioned above to this post has added the correct Twitter Card Metadata to this post as well. Inspecting this document you’ll see the meta data I’ve included for writing this article:
<meta name="twitter:site" content="@motobreath">
<meta name="twitter:title" content="Twitter Cards">
<meta name="twitter:image" content="/cmo_consulting_twitter_header.png">
Image Sizes
According to Twitter docs:
Images for this Card support an aspect ratio of 2:1 with minimum dimensions of 300x157 or maximum of 4096x4096 pixels. Images must be less than 5MB in size. JPG, PNG, WEBP and GIF formats are supported. Only the first frame of an animated GIF will be used. SVG is not supported.
In a nutshell this should be an image that is twice as wide as it is tall. I came up with a size of 1200px X 600px and a margin of 60px for some nice spacing.
Conclusion
Following the above instructions should help you get started with using Twitter Cards with Hugo. There are lots of other great articles and resources on the web for doing so, see the Sources section below for links.
If you enjoyed this article and/or have any questions leave a note below.