Adding Open Graph meta tags to my hugo static site's theme for nicer fedi link previews

Yesterday, Mastodon said that it was adding support for a new Open Graph tag, to better showcase people who write blogposts and other articles, when links to those posts get tooted on the fediverse. (Possibly just on a Mastodon server; I’m not sure.)

This made me realise that I had never set up even basic Open Graph cards for my blogs, and so prompted me to do it.

I am using static site generator hugo for my blogs, and I’m really pleased with it.

To add Open Graph cards, I just need to edit the relevant theme file, and it should Just Work.

Because I have two blogs - this personal blog, and the decoded.legal work blog - I decided to go for an approach which put the variables in the hugo site config file, and some code in the theme file to interpret that.

That way, I could use the same code on each blog.

It also means that, if I want to make a change - for example, to the image URL - I can just do it in the blog’s config file, rather than in the theme file.

Not a major thing, as it is just one file to change either way, but this approach felt cleaner.

Additions to the hugo.toml blog config file

For each blog, I have a file called hugo.toml, which contains the site specific settings.

I am going to be using a combination of internal hugo things, and site specific things in this config file.

In the hugo.toml file, I added:

[params]
  ...
 ogImage = "https://neilzone.co.uk/content/images/2024-07-02_neil.png"
 ogImagealt = "Photo of me, a white man with a short dark beard, and dark hair, posing with my thumb on my chin"
 fediCreator = "@neil@mastodon.neilzone.co.uk"

(The … are because I have other, irrelevant to this, content in that section. Don’t include the … if you try this.)

This gives me three new variables:

I decided that I would also incorporate a snippet of the post into the Open Graph card, so I added, to the main body of the config file rather than under [params], a value for hugo’s summaryLength variable:

summaryLength = "10"

Now that the variables are set up in hugo.toml, I can reference them from the theme’s file.

(For the work blog, I added the same config items, but changed their content.)

Changes to the theme file

I am using a modified version of the etch theme, as I like its very basic nature.

For me, under the blog root, the file I needed to change was themes/etch/layouts/partials/head.html

I added the following:

    <meta property="og:title" content="{{ .Title }}" />
    <meta property="og:type" content="article" />
    <meta property="og:url" content="{{ .Permalink }}" />
    <meta property="og:image" content="{{ .Site.Params.ogImage }}" />
    <meta property="og:description" content="{{ .Summary }}" />
    <meta property="og:image:alt" content="{{ .Site.Params.ogImagealt }}" />
    <meta name="fediverse:creator" content="{{ .Site.Params.fediCreator }}" />

The variables without .Site.Params - for instance, {{ .Title }} - are internal hugo variables.

I’m using these to incorporate the post’s title, URL, and what hugo calls a summary.

The variables with .Site.Params draw on what I set in the hugo.toml file.

So, here, it adds an image, the alt-text, and my fedi username.

What it looks like in the compiled page source

Because hugo is a static site generator, I write the posts in markdown, and then hugo compiles - not sure that’s the right term, but near enough - into html, to be served by the webserver.

The changes I’ve made mean that, as part of this process, hugo now populates the Open Graph elements too, for each post.

For my recent post about the Xreal wearable display glasses, it turns out like this:

<meta property="og:title" content="Six months with the Xreal Air 2 Pro glasses" />
    <meta property="og:type" content="article" />
    <meta property="og:url" content="https://neilzone.co.uk/2024/06/six-months-with-the-xreal-air-2-pro-glasses/" />
    <meta property="og:image" content="https://neilzone.co.uk/content/images/2024-07-02_neil.png" />
    <meta property="og:description" content="About six months ago, I bought a pair of the Xreal Air 2 Pro &ldquo;wearable display&rdquo; glasses." />
    <meta property="og:image:alt" content="Photo of me, a white man with a short dark beard, and dark hair, posing with my thumb on my chin" />
    <meta name="fediverse:creator" content="@neil@mastodon.neilzone.co.uk" />

What it looks like on the fediverse

Different fedi clients display things differently, and not all support Open Graph cards.

I tooted:

New blogpost: **Six months with the Xreal Air 2 Pro glasses**

https://neilzone.co.uk/2024/06/six-months-with-the-xreal-air-2-pro-glasses/

And, with the Open Graph card tags in place, it displays as:

Screenshot of a toot in the Mastodon web UI. It shows the information above, plus an Open Graph card with an image of me, the site&rsquo;s URL, the blogpost title, and a very short summary snippet

Now there’s that nice card at the end of the toot.

The Mastodon writer attribution bit isn’t working for me yet

~~Unsurprisingly - it was only released yesterday, and only for mastodon.social - the extra bit for writers doesn’t seem to be working for me.

I am using the glitch fork, so I had hoped that it might be available, but either it is not, or else it is but I don’t know how to configure it.

Either way, hopefully it will work in time.~~

I am wrong: the functionality is in the version of glitch that I am running, under /admin/trends/links/publishers.

However, it seems to rely on trends, rather than me being able to specify a domain manually. At least, I’ve not found a way to do that yet.

But, perhaps soon…