O.G. image generates Open Graph og:image social preview images from a web page. The source can be anything a web page renders, including handwritten HTML/CSS, React components, etc, and can include anything Chrome supports including pages rendered via client-site JavaScript and webfonts.
It uses puppeteer to spin up a headless Chrome browser in the cloud and take a screenshot.
It runs for free on Vercel, and it even has a howto.
- See my deployment (not directly usable by anyone else)
- Fork this project on GitHub and deploy to generate your own image previews
I tweeted about this:
Vercel does not recommend this approach, however: