Overengineering OpenGraph image generation on Vercel

This content originally appeared on DEV Community and was authored by Misha

The OpenGraph protocol is a certified OG - literally. Been globally adopted for well over a decade, powering link previews across the entire internet. But it’s 2025 now, and being a real engineer means using Vercel and Next for everything. So today, I’m going to show you how to max out next/og.

We’re gonna build dynamic OG images using bleeding edge serverless tech, in various aspect ratios (I'll explain why), and squeeze it all into Vercel’s 2MB function limit. because why not overengineer a metadata preview?

Part 1: Image Generation

We’re using next/og, which is powered by satori under the hood.

What you need to know:

• It’s open source.
• It turns JSX into SVG using a limited subset of CSS.
• It works out of the box in Next.js on Vercel.
• Like many OSS tools from Vercel, it only works seamlessly on Vercel (unless you have extra time to set it up elsewhere - which I don't).
• Overall, it’s the best option if you’re already comfortable with JSX and CSS.

Let’s start with the simplest working version: link to commit.

What it includes:

• Dynamic user data via a URL id param.
• A custom font with two variations.
• A page with meta tags all wired up correctly.

Paste this link into a messenger or social app - you’ll see the preview:

A few notes:

• You can style inline or with Tailwind. I prefer Tailwind.
• Use tw="..." instead of className="...".
• The gap utility doesn’t work - satori doesn’t support it yet. Issue here.

Easy enough. Let’s get weirder.

Part 2: Different Images for Different Platforms

The standard OG image size is 1200x630 - a 1.91:1 ratio. But standards are boring, and no platform actually sticks to them.

Different platforms render OG images differently. In fixed-width UIs (like messengers or social feeds), vertical and square images often show up bigger than horizontal ones.

Check this out:

Or this one:

Is it worth the effort? If you want to squeeze everything out of your funnel, then maybe. I’d suggest testing a few designs, playing with aspect ratios, and actually measuring the impact on conversion.

All aspect ratios for reference:

• 1.91:1 - the standard; every platform should support this one.
• 1:1.91 - iMessage.
• 4:5 - Instagram.
• 1:1 - Slack, Telegram.

Here's the implementation: link to commit.

Key ideas:

• Use User-Agent header to detect the platform and choose an aspect ratio.
• Each ratio gets its own JSX component.
• I use route.tsx instead of opengraph-image.tsx to parse the aspect_ratio URL search param.

Example: Try pasting this link into iMessage, Telegram/Slack, or Instagram DMs. Should look different depending on where you paste it.

Part 3: Fixing Missing OG Images on Social Platforms

If generation takes too long, the preview might fail to load. Platforms don’t wait.

Two ways to fix it:

1. Speed it up
   Most of the delay is network IO - fetching from DB or storage. Cut that down.

2. Warm the Vercel Edge Network cache
   You can pre-render OG images by pinging the endpoint ahead of time. Just know you'll have to render every variant, because you'll never know which one will be actually used. Still, it works.

Example: for a referral invite page, call curl "${YOUR_PAGE_URL}/opengraph-image?aspect_ratio=${ASPECT_RATIO}" for every aspect ratio variation you support right after creating the invite.

Part 4: Tips

1. Got a layout with static elements (logos, icons, etc)? Export it as a single image. Don’t try to manually position everything with styles - trust me.
2. Use Squoosh to compress those static assets. I find turning everything to JPEG via MozJPEG the best option for size/quality balance.
3. Minimize fonts. Each style/weight is a separate asset.
4. Always use Promise.all to load everything in parallel.
5. Stick to WOFF fonts. TTF and OTF are too big. WOFF2 isn’t supported by satori.
6. Use <div>s for text. Tags like <h1> and <p> come with built-in styles that’ll mess things up.
7. For Twitter DMs, note the label that appears in the bottom-left corner of the image:

Thanks for reading! Really means a lot. Every like, share, or comment is genuinely appreciated — your support keeps me building (and overengineering) cool stuff like this.

Follow me on X

This content originally appeared on DEV Community and was authored by Misha

Print Share Comment Cite Upload Translate Updates

APA

Misha | Sciencx (2025-07-30T10:54:51+00:00) Overengineering OpenGraph image generation on Vercel. Retrieved from https://www.scien.cx/2025/07/30/overengineering-opengraph-image-generation-on-vercel/

MLA

" » Overengineering OpenGraph image generation on Vercel." Misha | Sciencx - Wednesday July 30, 2025, https://www.scien.cx/2025/07/30/overengineering-opengraph-image-generation-on-vercel/

HARVARD

Misha | Sciencx Wednesday July 30, 2025 » Overengineering OpenGraph image generation on Vercel., viewed ,<https://www.scien.cx/2025/07/30/overengineering-opengraph-image-generation-on-vercel/>

VANCOUVER

Misha | Sciencx - » Overengineering OpenGraph image generation on Vercel. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2025/07/30/overengineering-opengraph-image-generation-on-vercel/

CHICAGO

" » Overengineering OpenGraph image generation on Vercel." Misha | Sciencx - Accessed . https://www.scien.cx/2025/07/30/overengineering-opengraph-image-generation-on-vercel/

IEEE

" » Overengineering OpenGraph image generation on Vercel." Misha | Sciencx [Online]. Available: https://www.scien.cx/2025/07/30/overengineering-opengraph-image-generation-on-vercel/. [Accessed: ]

rf:citation

» Overengineering OpenGraph image generation on Vercel | Misha | Sciencx | https://www.scien.cx/2025/07/30/overengineering-opengraph-image-generation-on-vercel/ |

Please log in to upload a file.

There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.