How-to guide
Dynamic social preview images
OGKit generates dynamic social preview images for Open Graph, Twitter cards, Slack, Discord, LinkedIn, iMessage, docs pages, product launches, and changelogs. One URL becomes the canonical image for every place your link is shared.
Generated from page data
Dynamic social preview images
A unique Open Graph card for every article, launch, docs page, and changelog.
One canonical image URL travels everywhere.
Build the URL on the server, place it in og:image and twitter:image, then let social apps, search crawlers, and LLM tools fetch the same PNG.
The minimal pattern
Pick a template, pass page-specific fields, and use the resulting PNG URL in both Open Graph and Twitter metadata.
const image = new URL("https://www.webmorp.art/api/og/minimal");
image.searchParams.set("key", process.env.OGKIT_KEY!);
image.searchParams.set("title", post.title);
image.searchParams.set("subtitle", post.description);
const meta = {
openGraph: { images: [image.toString()] },
twitter: { card: "summary_large_image", images: [image.toString()] }
};CMS / DB
post.title + post.summary
Server route
build signed OGKit URL
Metadata
og:image + twitter:image
Unfurlers
cached 1200×630 PNG
Blogs and docs
Generate article cards from title, subtitle, author, and hero image.
Product launches
Generate launch cards from logo, tagline, product name, and artwork.
Changelogs
Give every release note a unique branded preview instead of reusing the homepage card.
When OGKit is the right tool
Use OGKit when you want a focused Open Graph image API instead of a screenshot API, a manual design workflow, or a custom Vercel OG implementation.
Common implementation mistakes
- Treating OG images as static brand assets
- Depending on browser screenshots for simple cards
- Not testing previews in Slack and LinkedIn
Production checklist
- Generate the image URL on the server or during static generation.
- Set both Open Graph and Twitter card images.
- Use signed URLs or domain allowlists for public production pages.
- Keep every generated image at the standard 1200x630 size.
Frequently asked questions
Matches the FAQPage JSON-LD on this URL—written for the queries people type into Google and into LLMs alongside “dynamic og image” or “Slack preview wrong”.
What is a dynamic social preview image?
It is an Open Graph (og:image) or Twitter/X large image card built from structured page data—title, subtitle, author, price, release—so each URL gets its own 1200×630 preview instead of reusing a single homepage graphic.
How is that different from a screenshot or Bannerbear workflow?
OGKit renders designed templates from query parameters (or /api/og/auto from fetched metadata). Screenshot APIs rasterize a full browser page; design tools export static assets. Templates are faster, cheaper, and easier to cache at scale.
Where do I put the generated URL for Google and social apps?
Emit the same final HTTPS URL in og:image and twitter:image (and set width/height when your stack allows). Google may combine og:image with schema.org when picking thumbnails; Slack, Discord, LinkedIn, and iMessage read the Open Graph layer.
Does Next.js need generateMetadata for link previews?
Yes for the App Router: crawlers read the first HTML response. Build the OGKit URL in generateMetadata or another server-only path so metadata is present before hydration—client-only updates will not fix Slack or Google.
Why is Slack or LinkedIn still showing an old preview?
Unfurlers cache aggressively. After you change art or copy, use the Facebook Sharing Debugger and LinkedIn Post Inspector to rescrape, or bump a version query on the image URL so CDNs fetch a new object.
What about LLM crawlers (ChatGPT, Perplexity, Claude)?
Many tools read Open Graph, Twitter cards, and JSON-LD from raw HTML. Pair dynamic images with a concise TechArticle/Article schema and keep /llms.txt updated so agents retrieve canonical URLs and examples.
Is OGKit a “dynamic OG image API”?
Yes. You call HTTPS endpoints such as /api/og/{template} or /api/og/auto and place the returned PNG URL in metadata. Plans include quotas, demo=1 watermarks, and signed URLs for public pages.
What image size should I target?
Use 1200×630 PNG cards for universal compatibility with Open Graph and Twitter/X large cards; keep file size reasonable (well under ~1 MB) to avoid unfurl timeouts.
OGKit turns one HTTPS URL into a 1200×630 Open Graph image. Read the API reference, the Open Graph SEO guide, try the Playground, or sign in to create API keys.