I recently added build-time dynamic og:image creation to my website (commit). I had to replicate distinctive elements of my website in an SVG drawing program, export it to a PNG, and make Hugo overlay the post title and date using image.Filter. Here is the relevant code.
But I’m sure there’s a better way, I wasn’t able to perfectly replicate the website’s elements in the SVG image. So I thought, why not just render the HTML to PNG directly? That way the styles can be shared and it will be identical. I searched quite a lot but I wasn’t able to find any way for Hugo to render HTML to images. Is there a way to achieve this, maybe by calling a locally installed program, or using some Go library?
What is the point of that exercise? The OpenGraph site appears to be pretty clear that og:image is not meant to be an image of your web document, but an image that illustrates said document.
Because that is beyond the point. og:image should refer to an image in the web page.
Which is also beyond the point. Hugo is a static site generator, not a HTML user agent. You’re trying to solve an imaginary problem. Just set your og:image to the featured image of your page(s).
Not sure why you want to render a HTML page then transform into SVG then do some resizing and cutting out to get a sized preview. That sounds like a lot of work to “just” get a screenshot.
We “normally” do things like this with a screenshot tool like the one Zach Leat created for 11ty. Deploy a screenshot server (or use any API for that, when it came out he deployed a public server you could use), retrieve the screenshot at build time (handing over url, width and height and some other parameters), use the image for your preview as a layer and then put stuff on top of it (that’s where image.Filter comes into play I guess). No need to reinvent the wheel 
Hmm I think people are misunderstanding me, I don’t intend to use a screenshot of my website. I want to use HTML to draw the image template with the title and date, instead of using SVG and Hugo image filters.
I would prefer this because
- Using HTML and CSS will allow me to share code with the website’s, and
- It would allow text rendering to be more consistent with the website itself, because Hugo’s
image.Text filter does not support options like letter spacing.
I’ve based my design off of popular websites like GitHub, where the image shows metadata about the page such as a title, date, likes/shares statistics, and some decoration. I believe that is a valid and popular implementation for pages that don’t have a relevant image to feature.
Yes I understand that functionality like this is not in the scope of Hugo, and I do not expect Hugo to have any sort of functionality like this in the future either. I intended to get inspiration from other users who dynamically generate these images, since I haven’t found a de facto way to do this.
