Syntax Highlighted Image Previews for Hugo

On today’s episode of Various Tools Connected Together In a Way That May Only Be Useful For Me, I’ll discuss some customization I recently did for That Thing in Swift to get syntax highlighted images for image previews on Facebook, Twitter and Google.

I love writing new stuff for That Thing in Swift , especially now that I’ve found a niche in what to write about and I’m continually surprised at the amount of traffic that organic search and social shares can bring to the site for a given article. I’ve been working on some SEO goals (in a good way) and one thing I noticed that other Swift resources do not do is providing a helpful preview image for search results and social unfurls.

It would be easy to make something generic for the site that shows up for every post. That would be semi-helpful for social shares but not so much for search results. Instead, what if we could show people exactly what they came to the site to find in the first place? What if we could show preview images of the code we’re about to demo?

My goal was to create short snippets of syntax highlighted code that were representative of the post content