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

MaxLeiter 3 years ago |

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/

steventey 3 years ago |

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

alvarlagerlof 3 years ago |

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

lloydatkinson 3 years ago | |

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

alvarlagerlof 3 years ago | | |

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

lloydatkinson 3 years ago | | |

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

shuding 3 years ago | | |

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.

pzrsa 3 years ago | | |

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

pzrsa 3 years ago | |

Care to share it? Curious to see your approach

alvarlagerlof 3 years ago | | |

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