Twitter card and Open Graph images in Icarus theme for Hugo

How to define the post preview image shared on Facebook and Twitter.

1 minute read

Earlier this week, when sharing a post from The Perfect Twang to Facebook, I noticed that none of the post images appeared in the link preview:

The lack of images is due to a missing og:image property in my post metadata.

The only information I found on how to populate this property, specifically in the Icarus theme for Hugo I use for my music blog, is by Brendan Quinn. He has shared his code used in Hugo’s internal partial templates to populate values for the Facebook Open Graph.

Most of Brendan’s code was over my head but I noticed the following line in his example post frontmatter:

+++
images = ["http://brendan-quinn.xyz/css/images/banners/responsive-images-landscape-seo.jpg"]
+++

I added the following line to my frontmatter:

---
images: ["/media/2016/07/20160721-little-walter-820x350.jpg"]
---

The republished post now contains two additional lines of metadata:

<meta property="og:image" content="http://twang.city/media/2016/07/20160721-little-walter-820x350.jpg" />
<meta name="twitter:image:src" content="http://twang.city/media/2016/07/20160721-little-walter-820x350.jpg"/>

The link preview now includes the defined image, which you can check with Facebook’s Sharing Debugger:

Similarly, checking the same URL with Twitter’s card validator shows the image displayed in the card preview:

comments powered by Disqus