Manton Reece - Working on Open Graph

I’m improving something I started last year, to automatically save thumbnail versions of web pages that could be used in various places. As an example, starting this week Micro.blog now makes banners suitable for Open Graph meta tags, combining the profile photo and a rendered thumbnail of the page.

I can’t decide yet if this is actually good, but I think it’s on the right track to something. I’ve never been happy with the way most platforms use Open Graph. It adds a lot of clutter. At the same time, Micro.blog’s previous default of doing nothing wasn’t great either, and some platforms like Threads would pull in the profile photo only, attempting to crop a square photo into a wider banner.

Here’s an example of one of the new images:

Coincidentally the text of my post fit perfectly, otherwise it will be centered or cropped off the bottom.

Another example with a post that has a photo:

I’d love to hear feedback before we go further with this. The new option is available in the Hugo front matter as a URL in .Params.opengraph.image. If a post has a photo, plug-ins can still prefer using the photo URL directly. If you want the web page thumbnail only, that’s in .Params.thumbnail.

I’m imagining it used like this:

{{ if .Params.photos }}  
  {{ with index .Params.photos 0 }}
    <meta property="og:image" content="{{ . }}">
  {{ end }} 
{{ else }}
  {{ with .Params.opengraph }}  
    <meta property="og:title" content="{{ .title }}">
    <meta property="og:image" content="{{ .image }}">
  {{ end }} 
{{ end }}

This hasn’t been added to the built-in themes yet. It can be added by editing your header template, or wait until the dust settles and it’s available in plug-ins.

Testing this has been a little hit or miss because platforms like Threads and Bluesky aggressively cache the metadata for a page. These thumbnails are created right after a blog post is published, so they might not be available the first time a platform checks for them, especially if Micro.blog cross-posts your post to the platform more quickly than the thumbnail is ready. More tweaks likely needed.