Vercel OG Image Generation: Fast, dynamic social card images at the Edge

vercel.com

38 points·pzrsa··10 comments

I had the chance to work with Vercel OG / Satori a little while ago for Vercel's Next.js conference. I expected the OG cards for our word game to take hours, but it took minutes instead. Huge productivity boost.

You can try the playground with examples here: https://og-playground.vercel.app/

this is a gamechanger! also https://github.com/vercel/satori is such a good name!

There's my library for generating og:images statically pretty much dead. I was always wondering why Vercel didn't do this.

Care to share it? Curious to see your approach

Sure. This is what I did first. https://github.com/alvarlagerlof/next-banner. Its using one puppeteer process at build, for static sites. Made for Next.js.

However I was working on another version, which just reads html files for metadata instead. Not really shareable and working, built it's using vite to build a few different frameworks. https://github.com/alvarlagerlof/ogimage

Well it won't be dead. The vercel one seems to only support running on vercel.

They also have satori, which will run anywhere it seems.

That seems to generate svgs which as far as I know no site will show og embeds with svgs for some reason

I use svgs for my websites og images, haven't come across an issue with embeds on most platforms.

There are already a lot of choices to convert SVGs to PNGs, what Vercel uses is https://github.com/yisibl/resvg-js. And Sharp is another good option.

Reply on news.ycombinator.com