When sharing a post from my music blog to Facebook, the post images did not appear in the link preview.
The lack of images is due to a missing
og:image property in my post metadata.
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:
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:
Similarly, checking the same URL with Twitter’s card validator shows the image displayed in the card preview: