Generate and add open graph image dynamically for your blog

Showcases
1

I switched my blog to Hugo and I wanted to port my Ghost plugin that generated the open graph image tag dynamically for social media preview.

So I successfully ported it to Hugo the will generate the social media preview automatically with your title (for my blog) or any text that you prefer.

My current social media preview looks like this on BlueSky

image
image1230Ă—846 103 KB

Happy to share it incorporate it to any ghost blog.

Happy new year.

2

I tried doing this manually, it generates SVGs but it doesn’t show the og:image when embedding.

will be happy to try Ghost. can you share the link?

1 Like
4

What did you try and how did you generate the SVG? I wrote a dynamic image generator that generate the og:image depending on the title or other parameter provided. Which generates a PNG.

It’s the same I did for Ghost blog, but there I wrote a Ghost plugin.

If you like the same process done to your blog, I can support setting it up.

5

you said you ported your ghost plugin to hugo…

hiw it is done? a partial or shortcode, an external converter…

maybe for a showcase at least explain how it works…even better additionally share a site with a working version. …

6

its working here but doesn’t work on X or Bluesky. don’t know why.

X:

image
image535Ă—342 19.8 KB

Bluesky:

image
image545Ă—259 20.1 KB

7

For Hugo what I did was create a partial that base64 encodes the title, and send the base64 encoded string to the image generation API which generates the image and returns a PNG image.

The partial is very simple,

{{ $title := print "{\"title\" : \"" .Title "\"}" }} 
{{ $title := $title | base64Encode }} 
{{$title := replace $title "=" ""}}

In the header section

<meta
  property="og:image"
  content="https://api_endpoint/{{ $title }}"
/>

The Ghost plugin also does the same, but I wrote is a helper instead directly wiriting it as a parital.

You can find the Ghost helper here

1 Like
8

You can’t use an SVG as an og:image. You can only use png or jpeg images.

1 Like
9

so this creates them on build or do we have to do it manually?

10

I created an API that generates the image automatically and returns the png image. I can also serve your images through API as well if you would like to. I have not posted that code here because I made it for a separate image generation project, but I would like to share it with anyone who would like to use it their Ghost or Hugo blogs.

11

The title is a bit misleading as an external API is required… It’s possible to create such images with just Hugo functions, as detailed here: Dynamically Generating OpenGraph Images With Hugo – runtimeterror