Okay, brief primer for those unaware (and, tbh, if you don’t know what Hugo is this post is probably not for you): Hugo is a super-fast static site generator (like Jekyll or Pelican) built in Go. It’s persnickety but powerful.

I’m not going to go in depth into what Hugo is: here’s the main site if you want to learn more, but this post is targeted at folks who already have a basic Hugo site up and running that want to set up Twitter Cards for their Hugo site.

Twitter Cards are a semi-fancy name for a thing you’ve probably seen a bajillion times. To quote Twitter themselves:

With Twitter Cards, you can attach rich photos, videos and media experience to Tweets that drive traffic to your website. Simply add a few lines of HTML to your webpage, and users who Tweet links to your content will have a “Card” added to the Tweet that’s visible to all of their followers.

Basically: Twitter cards are all the rich metadata attached to a tweet that shows on web, mobile, and embedded tweets. For example, the video here is on a Twitter card:

Obviously you can attach videos, photos, and links to tweets, but let’s focus on that last one for a second – links.

Notice the difference between these two tweets:

Notice how they both have links, but the first one looks kinda drab and boring while the second one has a dope image? That’s the power of Twitter Cards – and the power of a couple meta tags.

If you’re looking to have a strong social media presence, making sure your site generates awesome Twitter Cards is huge.

And it’s honestly super easy! Twitter’s docs gives you the lowdown but I’ll show you the only tags you really need to worry about.

What you need for Twitter Cards

This is for another blog post on this very site, my December 2016 update:

<meta name="twitter:site" content="@justinmduke">
<meta name="twitter:creator" content="@justinmduke">
<meta name="twitter:description" content="December 2016 Update for Village Blacksmith, Justin Duke's small tech consultancy." />
<meta name="twitter:title" content="Update: December 2016" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:image" content="http://i.imgur.com/lTSHXfp.png" />

Let’s go through each piece one by one:

  1. twitter:site is the Twitter account that corresponds to the site. I just use my personal Twitter account, because Village Blacksmith doesn’t have it’s own twitter presence.
  2. twitter:creator is the Twitter account that corresponds with the writer. Same thing there.
  3. twitter:description is a quick, one or two line description of the content that may be displayed in the card.
  4. twitter:title is the title of the content (basically the same thing that should show up in the title tag.)
  5. twitter:card is the type of card we want to display: here, we specify that we want the big ol’ image.
  6. Lastly, twitter:image specifies the image we want displayed.

All of that makes sense, right? But, naturally, we don’t want to have to write out all of this each time, so let’s leverage the power of Hugo’s variables to handle this for us.

Twitter Cards in Hugo

Here’s what Village Blacksmith’s meta tags really look like, using Hugo variables instead of actual values:

<meta name="twitter:site" content="@justinmduke">
<meta name="twitter:creator" content="@justinmduke">
{{ if .IsPage }}
<meta name="twitter:description" content="{{ .Summary }}" />
<meta name="twitter:title" content="{{ .Title }}" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:image" content="{{ .Params.image }}" /> {{ else }}
<meta name="twitter:title" content="{{ .Site.Title }}" />
<meta name="twitter:description" content="{{ .Description }}" /> {{ end }}

Let’s break down each one:

Key Value Explanation
twitter:site @justinmduke I just hardcoded this because I was lazy.
twitter:creator @justinmduke Same thing here.
twitter:description {{ .Summary }} A Hugo-generated content snippet for the page. This is a standard variable and you can read more about it here.
twitter:title {{ .Title }} The title for this page, of course! Another standard variable, and you can read about it here.
twitter:image {{ .Params.image }} Params checks the front matter of your Hugo page for an image value, and plops it in here.
twitter:card summary_large_image We wanna have the same card type for all of our posts, so this is constant.

The only super interesting thing here is that {{ .Params.image }} piece, since it’s not a builtin Hugo variable – but it’s super easy to set up! All you need to do is specify the image in your Hugo post’s front matter, like so:

---
title: "Update: December 2016"
date: 2016-12-31
image: http://i.imgur.com/lTSHXfp.png
---
(Content)

Lastly, once you have your Hugo site up and running with Twitter cards, you can validate that they look great using Twitter’s Card Validator tool.

That’s it! Hugo front matter is super powerful and with this setup your static site will look great on Twitter. Feel free to email me or find me on Twitter if you have any questions.

(And, if there was any doubt – yep, this page has a Twitter card :)).

Liked this post? Follow me!
Twitter • RSS • Email