Generate Open Graph images with satori and a custom fork of workers-og (mainly to update dependencies).
workers-og is using resvg to turn the svg generated by satori into a png.
The worker expects a base64url JSON payload:
{
"title": "Hello World"
}
which then can be assembled in the following url path
https://<your-worker-host>/image/<payload>/og.png
Please note, that LinkedIn doesn't accept subdomains on the workers.dev domain from Clouflare when scraping for open graph images. Took me a while to figure this out.
npm install
wrangler deploy
The src/template.tsx file was entirely generated with OpenAI's GPT-4.
{
"title": "Kickoff Meetup @ Machine Minds Lisbon"
}
turns into this url
https://<your-domain>/image/eyJ0aXRsZSI6IktpY2tvZmYgTWVldHVwIEAgTWFjaGluZSBNaW5kcyBMaXNib24gIn0%3D/og.png
and results in this image (takes ~2 seconds to render)
- Caching of generated images would be nice
- Some authenticity check for the payload
- Dynamic templates or template elements