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.

Facebook update shows text, link and no image

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

The limited 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 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
comments powered by Disqus