Automating OG images so publishing takes one click
Hand-designing a social card for every case study was the last manual step in an otherwise automated publish flow. Here's the in-progress fix and why it's not finished yet.
Varun BhambhaniEvery new case study, template, and journal entry needs an Open Graph image — the card that shows up when the link is shared on Threads or in a group chat. For the first dozen posts I designed these by hand in Figma, and it was consistently the single slowest step in publishing anything, worse than writing the case study itself some weeks.
The automation is straightforward in principle: every piece of content already has a title, a category, and a swatch in the content graph. Rendering an OG image at build time from that same data — via Next.js's own OG image generation rather than round-tripping through a design tool — turns a fifteen-minute manual task into something that happens automatically on publish.
This is genuinely in progress, not finished — the first working pass covers Project pages. Prompts, Templates, and Journal posts aren't wired yet, which means some of this post's own sibling pages are still using a generic fallback OG image while this ships incrementally. I'd rather say that plainly than imply it's done everywhere.
The instructive part for anyone automating their own publish flow: this only works because the content graph existed first. Trying to build OG automation before the typed content model would have meant scraping titles out of JSX or hardcoding metadata twice. The automation is cheap precisely because the data it needs was already structured for something else.
Related Experiments
- OG image generator