// cornerstone
OG Image Generator — from your live page
OG image generators come in three flavors: hand-tools (visual editors), code generators (JSX-to-image libraries), and hosted services (APIs). Linkshot is the hosted service that screenshots your real live page with full TailwindCSS — no editor work, no parallel JSX template, no Satori subset.
Three categories of OG image generator
Picking the right generator means picking the right category for your situation. The differences matter more than the brand differences within each category.
Hand-tools
Examples: OpenGraph.xyz, MyOGImage, OGImageMaker, og.new
Pros
- +Free, no signup
- +Visual editor in browser
- +Good for one-off cards
Cons
- −Manual editor work per page
- −No automation
- −Static PNG decoupled from your live design
- −Drifts after every site redesign
Best for: Personal sites with 1–10 pages, or one-off card design
Code generators
Examples: @vercel/og, sveltekit-og, Satori, custom Puppeteer scripts
Pros
- +Free OSS
- +Full code control
- +No external dependency once shipped
Cons
- −Rebuild your hero in JSX
- −CSS subset (no Grid, no plugins)
- −Manual font loading
- −Drifts when the page changes
Best for: Next.js / Vercel teams comfortable maintaining a parallel template, simple text + logo cards
Hosted screenshot services
Examples: Linkshot, Urlbox, ScreenshotOne, Microlink, Bannerbear, Placid
Pros
- +No editor work per page
- +No code to maintain
- +Cached at edge for fast unfurls
Cons
- −Paid (most have free tiers)
- −Some are general-purpose, not OG-specific
Best for: Sites with many pages, teams that want OG to stay in sync with the live design
Why Linkshot
Linkshot is in the third category — hosted screenshot services — with one specialization that none of the others have: it is built specifically around the workflow of generating OG images from your live page using TailwindCSS for control.
- Screenshots your real page. No template editor, no JSX rebuild — the OG image is the page, so they cannot drift apart.
- linkshot: TailwindCSS modifier. Add capture-only styles next to the elements they target. Hide a navbar, restyle a hero, all in your real components.
- Real Chromium. Every TailwindCSS utility, every plugin, every modern CSS feature works because Linkshot uses a real browser, not Satori.
- Edge generation, free cache hits. Cached on Cloudflare globally. Repeated unfurls do not consume your monthly quota.
- $9/mo entry tier. 7-day free trial, no credit card. Indie-friendly pricing without volume gating.
Generate your first OG image
Three steps from cold to shipped:
01Register your domain
Add the domain you want OG images generated from in the Linkshot dashboard. 30 seconds.
02Drop one meta tag
Put the Linkshot URL in your og:image meta tag with your page URL as the parameter.
03Add linkshot: classes (optional)
Sprinkle linkshot:hidden, linkshot:text-6xl, etc. on elements you want hidden or restyled at capture.
<meta
property="og:image"
content="https://uselinkshot.com/api/og/v1/<TEMPLATE_ID>?url=<PAGE_URL>"
/>
<nav className="linkshot:hidden">…</nav>
<h1 className="text-3xl linkshot:text-6xl linkshot:text-center">
{post.title}
</h1>Compare to specific generators
Related cornerstones
Frequently asked questions
What is an OG image generator?
A tool or service that produces the 1200×630 image referenced in your og:image meta tag — the preview that appears when someone shares your link on Facebook, X, LinkedIn, Slack, Discord, or iMessage. There are three categories: hand-tools (in-browser editors like OpenGraph.xyz), code generators (libraries like @vercel/og or Satori), and hosted services (Linkshot, Placid, Bannerbear).
Why does the choice matter?
Each approach forces a different workflow. Hand-tools require manual editor work per page. Code generators require maintaining a parallel JSX template that drifts from your real design. Hosted screenshot services either treat OG as one feature among many (Urlbox, ScreenshotOne, Microlink) or use template editors (Placid, Bannerbear). Linkshot is the only hosted service designed specifically around screenshotting your live page.
Is screenshot-based OG generation slower than template-based?
First render takes a couple of seconds. After that, Linkshot caches the result on Cloudflare's edge globally — every subsequent fetch (Slack unfurl, Facebook scrape, X preview) is served instantly. For typical OG workloads where each URL is shared dozens of times after a single generation, the cached path is what matters.
Can I customize what the screenshot looks like?
Yes — Linkshot ships a `linkshot:` TailwindCSS modifier. Add `class="linkshot:hidden"` to elements you want hidden in the screenshot only, `class="linkshot:text-6xl"` to enlarge text only at capture, etc. Your live page is untouched.
Do I need to install an SDK?
No. Linkshot is URL-based — drop one meta tag in your <head> with your page URL as a query parameter. Works identically on Next.js, Astro, Remix, SvelteKit, Nuxt, TanStack Start, Hono, Hugo, Jekyll, WordPress, Shopify, Webflow, Framer, plain HTML.
How does pricing compare across OG generators?
Free hand-tools (OpenGraph.xyz, MyOGImage) cost nothing but require manual editor work per post. Code generators (@vercel/og) are free OSS but consume Vercel function invocations. Hosted services range from $9/mo (Linkshot) through $14/mo (HCTI), $17/mo (ScreenshotOne), $19/mo (Urlbox), $46/mo (Microlink Pro), $49/mo (Bannerbear).
What size should an OG image be?
1200×630 is the de facto standard accepted by Facebook, X, LinkedIn, Slack, Discord, iMessage, and most link-unfurling platforms. Aspect ratio 1.91:1. Linkshot defaults to this exact size at 2× pixel density.
My OG image is not showing — is it the generator?
Usually not. Common causes: the platform cached an older version (use the per-platform debugger to force re-scrape), the image URL is relative instead of absolute, the image is too small (~600×315 minimum), or the response is HTML/redirect instead of an image binary. Generators that return correct PNGs at correct dimensions cover all four.
Generate OG images from your live page
One meta tag, every page covered, full TailwindCSS — $9/mo with a 7-day free trial that needs no card.
7-day free trial · no credit card required