The context#

Building a successful blog goes beyond creating engaging content. An integral part of promoting articles on social media involves including captivating previews. But what about instances where you don’t add a cover image to a post? Let’s chat about my journey to addressing this, using The Open Graph protocol, and how you can implement it on your Hugo-based site.

<meta property="og:image" content="linktoimage.png" />

Previously, when I didn’t add a cover image to my posts, I used a default symbol - a blue heart png. It was a sufficient placeholder but lacked uniqueness.

After spotting a post from Łukasz, where images were dynamically generated based on post titles, I had my ‘I want this!’ moment!

The goal#

So, what was I aiming for? A unique, automated, blog-fitting preview image for each of my posts, even when no cover image is present. Here’s an example of what I wanted:

The process#

After a quick online search, I found a Hugo forum thread discussing the same issue. That thread led me to an example given in Hugo’s documentation, which I could modify slightly for my needs.

The first step was to create a background that the text filter modifies. I used https://og-playground.vercel.app/, saved a png, and placed it in the assets folder along with the FireCode font I use on my blog.

All that remained was to implement the Hugo code to apply a text filter to that image whenever one was required:

{{ $featured := resources.Get "/opengraph/background-og.png" }}
{{ $size := 150 }}
{{ $title := $.LinkTitle | truncate 55 "..." | string }}

{{ $text := $title }}
{{ $y := 550 }}
{{ if gt (len $text) 30 }}
    {{ $y = 350 }}
{{ end }}
{{ $textOptions := dict 
    "color" "#FFF"
    "size" $size
    "lineSpacing" 35
    "x" 350 "y" $y
    "font" (resources.Get "opengraph/FiraCode-Bold.ttf")
}}

{{ $featured = $featured | images.Filter (images.Text $text $textOptions) }}

and the HTML part:

<meta property="og:image" content="{{ $featured.Permalink }}">

And voila! Automated, unique preview images for each blog post! Full code can be found here.

Wrapping it up#

I hope you found this guide useful. Adding Open Graph previews to your Hugo posts not only enhances the visual aspect of your posts on social media but also offers an incentive for potential readers to click and read.