Adding Twitter Card support to Hugo themes

Without setting up Twitter Card support in your HTML, you’ll see the following which looks less than ideal:

Tip: use the Twitter card validator before you tweet to check how the Twitter Card will look based on your URL content.

Some themes like Minos (like I’m using) appear to not have Twitter Card support enabled. Here’s how I set it up.

Insert the Twitter Card Hugo template

Firstly in your site folder, find the layouts folder. Under that folder, create a new partials folder (if needed). This will hold your customised version of your theme’s HTML files. Copy the head.html file from themes/hugo-theme-minos/layouts/partials folder into your partials folder.

Open your partials folder, and edit the head.html file you copied, and paste the following template code in the content area, and save your file. This edited content will be used instead of the theme’s default version.

{{ template "_internal/twitter_cards.html" . }}

Twitter needs some data populated in your page’s front matter to show on the card:

---
...
title: <your title>

description: <your description>
images: ["images/your-summary-card-image.png"]
...
---

Optionally, you can add your twitter handle to the [Social] area in your config file:

[Social]
#   facebook = "fff"
#   instagram = "iii"
#   linkedin = "lll"
	twitter = "twitter-handle"

If you rebuild and publish your page, then check your link using the validator, it should a lot better:

(I’ve marked up the image above with blue text to show the relationship to the front matter info).

If you ensure your image has an aspect-ratio of 2:1, you should be able to get your content to fit within the summary card area (you may need to adjust the padding within the image area - inspect the summary image appearance for a good fit using the validator).