Generate dynamic Open Graph images from any URL or HTML template. Make every shared link display a rich, branded preview on Twitter, LinkedIn, Slack, Discord, and iMessage.
Start Free — 200 images/month
Open Graph images are the preview cards that appear when a URL is shared on social media, messaging apps, and collaboration tools. The og:image meta tag tells platforms which image to display alongside the link title and description. Without an OG image, shared links appear as plain text — dramatically reducing click-through rates.
Static OG images work for homepage and marketing pages, but they fail for dynamic content: blog posts, user profiles, product pages, and dashboards all need unique preview images that reflect their specific content. Manually creating an image for every page is not feasible at scale.
An OG image generation API automates this by rendering a customized HTML template — with the page title, author avatar, category, and branding — as a 1200x630 pixel image on demand. Every shared link displays a unique, branded preview without manual design work.
SnapAPI's screenshot endpoint captures any URL at a specified viewport size — set width to 1200 and height to 630 for standard OG image dimensions. Point it at an HTML template that renders your page title, author, and branding, and the API returns a production-ready OG image.
curl -X POST https://api.snapapi.pics/v1/screenshot -H "X-Api-Key: YOUR_API_KEY" -H "Content-Type: application/json" -d '{
"url": "https://yoursite.com/og-template?title=My+Blog+Post&author=Aleksei",
"width": 1200,
"height": 630,
"format": "png"
}'
The template URL accepts query parameters with the dynamic content — title, author name, category, background color, or any other variable. Your server renders the HTML template with these values, SnapAPI captures it as an image, and you serve the resulting URL as the og:image meta tag.
For static pages where the OG image does not change frequently, cache the generated image URL and reuse it. For dynamic content, generate on first request and cache with a TTL matching your content update frequency.
Design your OG image template as a standalone HTML page with a fixed 1200x630 viewport. Use bold typography for the title (36–48px), include your logo and brand colors, and add visual elements like gradients, patterns, or category-specific illustrations. Keep text concise — OG images display at reduced sizes on most platforms.
Web fonts load automatically during SnapAPI rendering. Use Google Fonts, self-hosted fonts, or any web font that loads via CSS. SnapAPI waits for all fonts to download before capturing, ensuring your branded typography renders correctly.
Test your OG images with the Twitter Card Validator, LinkedIn Post Inspector, and Facebook Sharing Debugger. These tools show exactly how your OG image will appear when shared on each platform. Verify that text is readable at the preview size and that important elements are not cropped by platform-specific aspect ratio adjustments.
Blog platforms generate unique OG images for each post by rendering a template with the post title, author avatar, reading time, and category tag. The template is a simple HTML page with CSS Grid or Flexbox layout — design it once, and every new post automatically gets a branded social preview.
E-commerce sites use dynamic OG images to show product photos, prices, and availability badges in social previews. When a product price changes or goes on sale, the OG image updates automatically on the next share — showing real-time pricing that drives urgency and click-through.
SaaS dashboards create OG images for shared reports and public pages. A screenshot of the dashboard at a specific viewport becomes the social preview, giving recipients a visual preview of the data before they click through. This is more compelling than a generic logo card and significantly increases engagement with shared links.
For applications with user-generated content — portfolios, profiles, listings — each piece of content gets its own OG image. The generation pipeline runs on publish or on first share, caches the result, and serves it for subsequent requests.
Vercel's @vercel/og package generates OG images at the edge using Satori and Resvg. It supports a subset of CSS (Flexbox only, no Grid, limited font support) and requires JSX syntax. It works well for simple text-on-background designs but cannot render complex HTML, custom CSS, or JavaScript-dependent content.
Cloudinary offers image transformation pipelines with text overlays. It excels at image manipulation — resizing, cropping, watermarking — but does not render HTML templates. Creating branded OG images with complex layouts requires pre-composing elements in Cloudinary's transformation chain, which becomes unwieldy for designs beyond simple text-on-image.
SnapAPI renders any HTML page in full Chromium. This means your OG image template can use any CSS feature — Grid, Flexbox, custom properties, animations (frozen at capture time), web fonts, SVG, canvas elements, and JavaScript-generated content. There are no layout constraints or syntax requirements beyond standard HTML.
Pricing starts free at 200 OG images per month with no credit card. Starter at $19/month provides 5,000 generations. The same API key works for screenshots, scraping, extraction, PDFs, and AI analysis — a unified platform rather than a single-purpose tool.
OG images should be generated once and cached until the underlying content changes. Use a content hash as the cache key — when the page title, author, or featured image changes, the hash changes and triggers a regeneration. For static content like blog posts, the OG image is effectively permanent after first generation.
Serve OG images from a CDN for fast global delivery. After SnapAPI generates the image, upload it to your CDN or object storage (S3, Cloudflare R2, GCS) and reference the CDN URL in your og:image meta tag. This ensures social platforms and messaging apps can fetch the preview quickly regardless of their geographic location.
For high-traffic sites, pre-generate OG images during the publish workflow rather than on first request. When an editor publishes a blog post, the CMS triggers a webhook that generates the OG image and stores it. By the time the post is shared on social media, the image is already cached and served instantly.
Twitter and LinkedIn cache OG images aggressively. If you update an OG image after a link has already been shared, use the Twitter Card Validator and LinkedIn Post Inspector to purge the old cache and fetch the updated image.
Generate OG images from any language that supports HTTP requests. Python with requests, Node.js with fetch, Go with net/http, PHP with Guzzle — the API call is identical. Official SDKs for 8 languages are available at github.com/Sleywill with typed methods and error handling built in.
Next.js applications can generate OG images in API routes or server components. Call SnapAPI from a generateMetadata function to produce the OG image URL dynamically for each page. The image URL goes directly into the metadata object without client-side rendering or additional middleware.
Ruby on Rails, Django, and Spring Boot integrations follow the same pattern: call the API from a controller or background job, cache the resulting image URL, and render it in the page meta tags. The MCP server adds AI editor integration for developers using Claude Code, Cursor, or VS Code.
Sign up free at snapapi.pics — 200 OG image generations per month, no credit card required. Scale to Starter ($19/month, 5,000), Pro ($79/month, 50,000), or Business ($299/month, 500,000) as your content volume grows.
Twitter/X: Recommended size is 1200x628 pixels for summary_large_image cards. Images smaller than 300x157 will not display. Use PNG or JPEG format. Maximum file size is 5 MB. Set the twitter:image meta tag alongside og:image for explicit Twitter targeting.
LinkedIn: Recommended size is 1200x627 pixels. LinkedIn crops images that do not match this aspect ratio. Images smaller than 200x200 are rejected. PNG and JPEG are both supported. LinkedIn caches images aggressively — use the Post Inspector tool to force a refresh after updating.
Facebook: Minimum 600x315 pixels, recommended 1200x630. The og:image meta tag is the primary reference. Facebook's debugger tool shows exactly how your preview will render and allows cache purging for updated images.
Slack and Discord: Both read og:image tags and display previews inline. Slack supports images up to 500 KB for inline display. Discord renders larger images as links. Both platforms cache previews — updates may take hours to propagate without manual cache clearing.