Earlier this week, when sharing a post from my music blog 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: