Gavin Wray

Twitter card and Open Graph images in the Icarus theme for Hugo

When sharing a post from my music blog to Facebook, the post images did not appear in the link preview.

Facebook update shows text, link and no image

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

I found some information on how to populate this property in the Icarus theme for Hugo in a post by Brendan Quinn.

Brendan shared his code for Hugo’s internal partial templates to populate values for the Facebook Open Graph.

Most of the code goes 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 these two 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:

Link preview with image as seen in Facebook Sharing Debugger

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

Preview of Twitter card with image included

Content © 2008-2019 Gavin Wray
Athena theme by Diana Mounter

Twitter · LinkedIn · SoundCloud · GitHub