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:
In case it helps anyone else, I did add real documentation to my og:image generator ogimage.micahrl.com
Vercel does not recommend this approach, however:
@mrled Hi Micah, we don’t recommend using puppeteer in your Serverless Functions. Vercel is perfect for your frontend and small Serverless Functions that help you get data from external services, but that of course doesn’t mean it’s not possible! – Timothy