// alternatives
The Vercel OG Alternative
for Real HTML/CSS
Vercel OG is great for simple cards. But once you need your actual page as an OG image — not a JSX approximation of it — Satori's limitations start to hurt. Linkshot screenshots your live site directly.
What is Vercel OG?
@vercel/og is an Edge Runtime utility built on top of Satori — an open-source library that converts JSX to SVG and then to PNG. It's well-integrated with Next.js App Router (opengraph-image.tsx) and is free to use.
For simple, text-heavy cards with basic layout it works well. The limitations appear when your design gets complex, or when you want to use your existing page as the OG image instead of a bespoke template.
Where Vercel OG falls short
You have to rebuild your page in JSX
Vercel OG (via Satori) does not screenshot your actual page. You write a separate JSX template that mimics your design. Every time your real page changes, your OG template drifts.
CSS is a limited subset — flexbox only
Satori renders a subset of CSS. No CSS Grid, limited positioning, no arbitrary Tailwind values, no backdrop filters, no complex pseudo-elements. You find out what breaks at runtime.
Font loading is manual and fragile
You must fetch font files manually, pass them as ArrayBuffers, and register each weight separately. Google Fonts, variable fonts, and system fonts require extra wiring.
Tightly coupled to the Vercel / Next.js ecosystem
Works great if you're on Next.js and deploying to Vercel. For Remix, Astro, SvelteKit, or self-hosted setups, integration is more involved and there's less documentation.
Complex layouts break unpredictably
Satori converts JSX to SVG. The conversion is imperfect — shadows, gradients, multi-line text truncation, and nested flex containers often produce unexpected output.
The fundamental difference
Vercel OG asks you to rebuild your design as a JSX template. You create a parallel version of your page — in a different language, with a different CSS model — and keep it in sync manually.
Linkshot takes a different approach: it screenshots your actual live page using a real browser. Your OG image is always in sync because it is your page. No templates to build. No CSS subset to learn.
Vercel OG — rebuild your layout in JSX
Linkshot — use your real page
/api/og/v1/<template-id>
?url=<your-page-url>"
Hide nav, sidebars, and overlays — only in the screenshot
Add the linkshot: modifier to any element. It's active only during screenshot capture — your live page is untouched.
Feature comparison
| Feature | Vercel OG | Linkshot |
|---|---|---|
| Screenshots your real live page | ||
| Real HTML + CSS rendering | ||
| Tailwind support | partial | |
| CSS Grid | ||
| No separate JSX template | ||
| Automatic font detection | ||
| Works with any framework | partial | |
| Free tier | 7-day trial | |
| Template system |
Which one should you use?
Stick with Vercel OG if…
- You're on Next.js and your OG cards are simple text + logo
- You need something free with zero API calls
- Your design is basic enough to fit in a single JSX component
Use Linkshot if…
- You want your real page as the OG image — no extra templates
- Your layout uses CSS Grid, complex Tailwind, or custom fonts
- You need one template to work across every page automatically
- You're on Remix, Astro, SvelteKit, or any non-Next.js stack
Ready to switch?
Add your domain, create a template, drop in one <meta> tag. Your first OG image in minutes.
7-day free trial · no credit card required