Generating Open Graph images on-the-fly

· 2 min read

This site is built using lego, a static site generator. It used a single image for all pages in this site as the og:image.

I decided to change this image for each post so that there is some additional context in the social media previews when a link is shared. While generating these images during build time using Puppeteer was an option, that would lead to a significant increase in the build time. Running this on Netlify, my current hosting provider, would not be economical.

GitHub's approach to og:image generation for links seemed like a great idea. I came across Vercel's Open Graph Image as a Service while reading their blog and I decided to combine both of them for the sake of this site.

I forked Vercel's repo and removed all the unnecessary code(mostly UI related). After this, I added GitHub's performance improvements to Vercel's logic and that was it.

Here's an example of an image output generated by this service:

RSS FeedTwitterGitHubEmailToggle Dark Mode OnToggle Dark Mode OffLink