Some links on this page are affiliate links: if you buy through them we may earn a commission, at no extra cost to you.
To generate Open Graph images automatically, build a URL that renders a social card from page data, then put that URL in the page’s og:image metadata. In Next.js, use ImageResponse from next/og or @vercel/og; a route can turn a title and other parameters into a PNG on demand. Choose that self-hosted route when you need control over the design and already deploy Next.js. Choose a hosted OG-image API when you prefer a URL-only integration and accept the provider’s limits.
How API-generated Open Graph images work
An Open Graph image is a preview image that a social or messaging platform may display when someone shares a page. Instead of making a separate image by hand for every page, you create a rendering endpoint that accepts page-specific values—such as a title, author, or date—and returns a finished image.
- Create a template with a fixed layout, typography, colors, and optional logo or background image.
- Provide data for the page, either through URL parameters or from a database lookup tied to a page identifier.
- Render the template as an image, commonly PNG, at a suitable card size.
- Set the page’s
og:imagemetadata to the absolute HTTPS URL of the generated image. - Deploy the route so social crawlers can fetch it, then check the preview using the target platform.
Vercel recommends a 1200×630-pixel Open Graph image. It also recommends allowing the image route in robots.txt so crawlers can retrieve it. See Vercel’s OG image generation documentation.
Choose a generation approach
Next.js with Vercel OG or next/og
A Next.js route using ImageResponse is a direct choice if your site already runs on Next.js. The page can supply changing values, and the route renders the template without a separate image-generation service. This gives your team control over markup and data, but ties the implementation to the framework and its rendering environment. The supported CSS is a subset rather than a full browser’s styling system, and font handling and bundle size need attention. Vercel documents a 500KB bundle limit for this use case; see the API documentation.
#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
Satori directly
Satori converts JSX-like structures into SVG using a documented subset of CSS. It supports embedded or fetched fonts and images. If the consumer needs a PNG, add a rasterization step after generating the SVG. This option can fit a custom rendering stack, but you take responsibility for composing and operating those steps.
Hosted OG-image APIs
A hosted service can accept a request URL and return a card without requiring you to deploy an image-rendering route. OGKit documents a no-auth GET endpoint with template, theme, title, description, width, and height parameters. Its product page advertises six templates, six themes, edge delivery, 24-hour CDN caching, and a free allowance of 50 images per day. These are provider-published product terms, not independent performance measurements, and should be checked on the provider’s current pages before building around them. Documentation: OGKit API docs; product claims: OGKit.
og-image.org documents an /api/og endpoint with template parameters and PNG or SVG output for static sites and automation workflows.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
How to decide
| Approach | Best fit | Important trade-off |
|---|---|---|
| Next.js / Vercel OG | Custom templates and page data in a project already using Next.js. | Framework/runtime coupling, supported CSS and font constraints, and bundle limits. |
| Satori directly | A custom pipeline that benefits from JSX-like SVG generation. | PNG output requires an additional rasterization step. |
| Hosted API | A URL-based integration without operating your own renderer. | Template, quota, cache, privacy, and cost choices depend on the vendor. |
Before selecting a hosted service, compare control over markup, CSS fidelity, deployment coupling, latency, caching, authentication, quotas, image retention, privacy, and total cost. The available product documentation establishes features for individual providers, not a like-for-like independent benchmark across them.
Rank #2
- Brand: Wiley
- Set of 2 Volumes
- A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers
Build a dynamic image route in Next.js
The example below uses the App Router and ImageResponse. Create app/og/route.tsx. It accepts a title and optional description, limits input lengths, and returns a PNG. Keep untrusted content as text; do not interpolate it into HTML strings or executable code.
import { ImageResponse } from 'next/og'
export const runtime = 'edge'
export async function GET(request: Request) {
const { searchParams } = new URL(request.url)
const title = (searchParams.get('title') ?? 'Untitled page').slice(0, 140)
const description = (searchParams.get('description') ?? '').slice(0, 240)
return new ImageResponse(
(
<div
style={{
width: '100%',
height: '100%',
display: 'flex',
flexDirection: 'column',
justifyContent: 'space-between',
padding: '64px',
background: '#111827',
color: '#ffffff',
fontFamily: 'Arial',
}}
>
<div style={{ display: 'flex', fontSize: 24, color: '#93c5fd' }}>
Example site
</div>
<div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
<div style={{ display: 'flex', fontSize: 64, fontWeight: 700, lineHeight: 1.1 }}>
{title}
</div>
{description ? (
<div style={{ display: 'flex', fontSize: 28, color: '#d1d5db' }}>
{description}
</div>
) : null}
</div>
<div style={{ display: 'flex', fontSize: 22, color: '#9ca3af' }}>
example.com
</div>
</div>
),
{ width: 1200, height: 630 }
)
}Use the installed Next.js version’s current setup and imports; the rendering API and deployment requirements can vary by version and runtime. The JSX styles above deliberately use simple flex layout and inline styles rather than assuming browser-complete CSS support.
Call the route and set page metadata
For a page titled “API design basics,” the image URL can be https://example.com/og?title=API%20design%20basics&description=Practical%20patterns. Generate query strings with a URL encoder rather than concatenating raw titles. In a Next.js metadata function, point images at the absolute route URL:
Quick wins for a faster PC:
Clear out junk files and repair common Windows errorsFree Scan →Scan for outdated or missing drivers - takes under a minuteDriver Scan →Repair Windows errors before they cause bigger problemsFix Now →export async function generateMetadata() {
const title = 'API design basics'
const image = new URL('/og?title=API%20design%20basics', 'https://example.com')
return {
title,
openGraph: {
title,
images: [image.toString()],
},
}
}For a large site, avoid putting every field in the URL if that creates long, exposed, or unstable URLs. A route can instead accept a stable page ID, load the public card data, and render from that record. Ensure the endpoint can be fetched without a user session; a social crawler cannot use a visitor’s logged-in browser state.
Rank #3
Production checklist: dimensions, fonts, caching, and crawlers
- Canvas: Start at 1200×630 unless a destination or design requirement calls for another size. Keep essential text away from the extreme edges because previews may be cropped or scaled.
- Metadata URL: Use an absolute HTTPS image URL in
og:image. Confirm it resolves from outside your network and returns the actual image rather than an HTML error page. - Crawler access: Do not block the route in
robots.txtif social crawlers need it. Vercel explicitly recommends allowing its OG image route. - CSS and fonts: Test the layout using the renderer’s supported CSS, not assumptions from Chrome. Vercel documents ttf, otf, and woff font support and a 500KB bundle limit. Load fonts reliably and test glyph coverage for the scripts your site uses.
- Input handling: Bound title and description lengths, provide fallbacks for missing values, and encode user-provided text in generated URLs. Avoid accepting arbitrary remote image URLs unless you have a reason and controls for doing so.
- Cache strategy: Deterministic image URLs are easier to cache than URLs that change on every request. Vercel documents automatic cache headers for computed images. OGKit advertises 24-hour CDN caching; verify a hosted provider’s current cache behavior before relying on it.
- Updates: When a page’s title or image changes, change a version or content identifier in the image URL if the cache would otherwise keep showing the old card. Social platforms may retain their own preview cache, so a successful deployment may not update an existing share immediately.
- Privacy: Query parameters may appear in logs and social crawler requests. Prefer public card content, and do not place secrets or personal data in the image URL.
Vercel’s documentation quotes its recommended image size as “1200×630 pixels” and was last updated April 28, 2025. These implementation recommendations are useful starting points, not a guarantee that every social platform will display every generated image identically.
Validate the result before relying on it
- Open the generated image URL directly in a browser and confirm it returns an image at the intended dimensions.
- Test titles at the shortest and longest lengths you expect, plus missing descriptions and missing optional imagery.
- Check non-Latin text and special characters; a renderer may need an explicitly loaded font containing the necessary glyphs.
- Inspect the deployed page’s HTML metadata and verify
og:imageis an absolute HTTPS URL pointing to the generated asset. - Test sharing in the platforms your audience uses. Their crawlers and caches determine the actual preview, not merely the route’s browser appearance.
Troubleshooting common failures
The image route returns an error or HTML instead of an image
Check deployment logs and the runtime requirements for your installed Next.js version. Confirm that the route exports the expected HTTP handler and that it returns ImageResponse, not a page component. Open the endpoint directly and inspect the response status and content type.
The preview is blank or missing on a social platform
Verify that og:image is present in the deployed page, uses an absolute HTTPS URL, and is publicly fetchable. Check whether robots.txt blocks the route, whether the route requires authentication, and whether the image endpoint itself returns successfully. Then request a fresh platform preview if that platform provides a cache-refresh workflow.
The design differs from the local browser preview
Image renderers support a constrained CSS model. Simplify layout to supported styles, use explicit dimensions and flex layout where appropriate, and remove reliance on browser-only effects. Confirm fonts are loaded in the rendering runtime rather than only in the website shell.
Text clips, wraps badly, or displays as boxes
Set sensible maximum lengths, test long words and multiline titles, and load fonts that contain the required characters. A fallback font may not include the glyphs needed for a language or symbol; verify the selected font file and format against the renderer documentation.
Changes do not appear after deployment
The image URL may still resolve to a cached version, or the social platform may retain a preview. Use a content version or updated URL when appropriate, confirm the new endpoint output directly, and use the platform’s available re-scrape mechanism.
Build fails due to bundle size
Vercel documents a 500KB bundle limit for its OG image API. Reduce bundled assets and dependencies, avoid importing unrelated application code into the route, and use supported font-loading patterns described in its API documentation.
Free tools Windows power users keep installed
One-click scans. No signup required.
Or skip the browser setup
ScreenshotNeo is a website screenshot API and MCP server; it captures existing pages rather than rendering a custom Open Graph template. It can be useful when your card already exists as a URL-rendered page and you want a screenshot endpoint instead of running a browser yourself. Its documented API accepts one GET request with a URL and returns an image or PDF. See the ScreenshotNeo site and API documentation.
Best Value
- JavaScript Jquery
- Introduces core programming concepts in JavaScript and jQuery
- Uses clear descriptions, inspiring examples, and easy-to-follow diagrams
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://example.com/social-card -o shot.webpScreenshotNeo removes cookie and consent banners, newsletter popups, and chat widgets before capture; each cleanup step can be turned off. Bot checks/CAPTCHAs, blank pages, timeouts, failed loads, and cache hits are not billed, and responses identify the page verdict and billing status. An MCP server provides take_screenshot, get_page_info, and capture_pdf tools for AI agents. The Free plan includes 1,000 screenshots per month with no card; paid plans start at $5 for 3,000 screenshots. For a purpose-built social card, keep using a template renderer; for a URL that already displays the desired card, this is the simpler capture path.
Sign up for ScreenshotNeo’s free plan to get 1,000 screenshots a month with no card.
Frequently Asked Questions
Can a generated Open Graph image be SVG?
Yes, depending on the renderer and consumer. Satori generates SVG, and og-image.org documents PNG or SVG output; PNG is often the practical choice when predictable raster previews matter.
Do I need a different image for every page?
No. A shared template can render different page data on demand, or your route can look up a record by a stable page identifier.
Does ScreenshotNeo create a designed social card from title parameters?
No. ScreenshotNeo captures a rendered webpage. It can capture a page that already displays the card, but it is not a template-based OG image renderer.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
