Twitter Card / Open Graph Image Generation

Is it possible to support Twitter card generation for generated pages. This can be a HTML template which is saved as an image. The HTML template and card template can be generated. The Card template output can be referred in the HTML template.

1 Like

That can be done automatically on your site by adding it to your template no?

How is this done? Can you give me a pointer?

I believe this can be achieved by resource/asset processing pipelines in Hugo.

Ah sorry I thought when you meant Twitter card you mean the preview of the website on Twitter. Do you mean actual images?

Generating images like in: https://og-image.vercel.app (GitHub - vercel/og-image: Open Graph Image as a Service - generate cards for Twitter, Facebook, Slack, etc). But more light weight and built in to Zola.

This can be another HTML template which can invoked from the page template to generate the in memory or temporary output then this output can be rendered using and embedded headless browser component and saved as an image and linked. This way it will be generic and not limited to generating Twitter Card / Open Graph Images this the possibility to have other pipe lines in the future.

1 Like

Hmm that would be a bit tricky to implement in Zola, I would need to see many people wanting that before thinking of implementing it.

I have a similar desire; in many cases I am using whatever images are colocated to serve this function, but as I write more blog posts and pages I find the want for something to make my links a bit more personalised.

I would love for it to be a simple templating language, like Markdown but with a renderer that produces images, or perhaps to take some inspiration from crates.io’s use of typst templates.

I suspect with some clever use of the existing Zola metadata and taxonomies this could be made both simple to start out on and flexible to customise.

Alternately, as this isn’t something you’re personally interested in @keats, perhaps a simple plugin/hook system could be worthy of consideration? Then one could have, say, a before-page hook (perhaps just a script or executable that gets called out to) which gets the page metadata and output path, and can then do some work and inject its own information back into the page generation process.

Obviously there are people who’ve worked around this by using off-site generators, but this is undesirable if your goal is to have a wholly static, self-contained site and not potentially depend on third parties.


Just for completeness, here’s another request for similar functionality: Generate Preview Images , and see also Run commands