December 5, 2016

twitter card

The main reason I want Twitter integration is so that my posts look nice when linked on a tweet. The way it works is by adding meta tags that enable Twitter to pull information for display purposes. I wanted the title, a photo, and the Twitter username so it’s enough to give the reader some idea about what my post is about and if it’s worth their time to read the post further.

The way I worked this out with Hugo is to specify tweet worthy data in the front matter section on the post. I defined a new section [social] and added three parameters to it:

  1. Title
  2. Description
  3. Image location

With that it looks like this:

+++

date = "2016-12-05T22:00:04-08:00"
title = "twitter card"
description = "Wiring into Twitter"
draft = false

[social]
title = "Social title"
description = "Formatting for tweets including photos."
image = "images/jaguar_at_uss_hornet.jpg"

+++

Then I added a partial layout to pull this data out of front matter and plug it into Twitter facing meta tags. The partial layout looks like this:

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@{{ .Site.Params.TwitterUsername }}">
<meta name="twitter:creator" content="@{{ .Site.Params.TwitterUsername }}">
<meta name="twitter:title" content="{{ .Params.social.title }}">
<meta name="twitter:description" content="{{ .Params.social.description }}">
<meta name="twitter:image" content="{{ (printf "%s%s" .Site.BaseURL .Params.social.image) }}">

The twitter:image took sometime to figure out. Basically we want to send Twitter the complete URL of the image. I couldn’t figure out a way to concatenate the strings to I just went along with the printf method. After this looks good, let’s invoke this partial template into the header section with {{ partial "twitter.html" . }}

After you publish your post, unfortunately no way around testing without publishing, you can test your results with the Twitter Validator.

I decided to use this image from my visit to the USS Hornet Museum at Alameda, CA. I’m hoping that this prompts me to spend more time taking good photos and sharing them!

Jaguar at USS Hornet

Useful links:

  1. Overview
  2. Large Image Card
  3. Validator - to test a link for it’s meta tags.

Hope you find this useful. And if you end up integrating Twitter, please feel free to tweet your post(s) to me @sumeetparmar, make sure you include a photo!

© Sumeet Parmar 2018

Powered by Hugo & Kiss.