Automated OG images
for every page.
Dynamic Open Graph images rendered per blog post, product, or user. One template, one API, one line in your <head>.
OG images are the thumbnails that appear when a link is shared on Twitter, LinkedIn, Slack, Discord, or in an AI chat response. They're also the single highest-leverage SEO and CTR element you can ship: a good OG image doubles click-through on the same link.
The problem: designing a unique OG image per blog post, product, or user is a full-time design job. Most teams default to a single static OG image site-wide, which is like greeting every visitor with "Welcome" printed on a door sign — fine, but not persuasive.
Automated OG generation lets you render a unique, data-driven OG image per page — automatically, on demand, without adding a build step or a design queue.
The pattern
- Design one OG template (1200×630) with variable placeholders for title, author, hero image, category.
- In each page's
<head>, output anog:imagemeta tag whose URL encodes the variables as query parameters. - When a social platform fetches the URL, Pictify renders the image, CDN-caches it, and returns it in ~800ms. Every subsequent fetch hits the cache.
Example: Next.js
export async function generateMetadata({ params }) {
const post = await getPost(params.slug);
const ogUrl = new URL('https://api.pictify.io/template/tpl_og/render');
ogUrl.searchParams.set('title', post.title);
ogUrl.searchParams.set('author', post.author);
ogUrl.searchParams.set('hero', post.hero_image);
return {
title: post.title,
openGraph: {
title: post.title,
images: [{ url: ogUrl.toString(), width: 1200, height: 630 }]
}
};
}Same pattern works in SvelteKit (via +page.server.ts),
Astro (in frontmatter), Hugo (Hugo template), Ghost (routes config), or any framework that
renders the <head>. The OG image URL is plain
HTML — no framework lock-in.
Why Pictify beats @vercel/og
@vercel/og is the default in many Next.js apps
— it renders OG images in your edge function. It works for simple designs, but hits limits
quickly:
- Bundle size: @vercel/og pushes your edge bundle past 1MB; Pictify is an external API with zero bundle impact.
- CSS subset: @vercel/og uses satori, which supports a subset of CSS. Pictify renders real Chromium — full CSS grid, flexbox, web fonts, everything.
- Design workflow: changing an @vercel/og template means redeploying. Pictify templates live in a visual editor; copy changes don't require a deploy.
- Cross-platform: @vercel/og is Vercel-only. Pictify runs anywhere — self-hosted, Cloudflare, AWS Lambda, your Rails app.
For quick prototypes and Vercel-deployed side projects, @vercel/og is fine. For anything with a designer in the loop or hosted outside Vercel, use Pictify. Try the OG image generator tool to prototype your template without writing code.
Frequently asked questions
How do I automate OG image generation for my site? +
Design one OG template (1200×630). Declare variables for the fields that change per page (title, author, hero image, category). In your page's `<head>`, output `<meta property="og:image" content="https://api.pictify.io/template/tpl_og/render?title=...&author=...">`. Pictify returns the rendered image; social platforms cache it.
Should I render OG images on demand or pre-render at build time? +
Both patterns work. On-demand (what the snippet above does) keeps URLs stable and doesn't require a build step — Pictify CDN-caches each unique variable set. Pre-rendering at publish time (POST the template, save the URL on the record) is slightly faster for the first visitor but adds a write-path step. For most sites, on-demand is simpler.
What's the render latency for OG images? +
Cold: ~800ms. Warm (CDN cache hit for identical variables): under 100ms. Twitter, Facebook, LinkedIn, and Slack all cache OG images after the first fetch, so the cold render only happens once per unique URL. Google's crawler and AI chat clients also benefit from the warm cache.
Can I test whether my OG image is working? +
Use Twitter's card validator, Facebook's sharing debugger, LinkedIn's post inspector — all three fetch your URL and show the rendered OG. Pictify also ships an OG generator tool at /tools/og-image-generator where you can prototype the template interactively.
Does this work with Next.js, SvelteKit, Astro, Hugo, Ghost? +
Yes — any framework that renders the `<head>`. The OG image URL is plain HTML, no framework-specific integration. For Next.js, skip @vercel/og and use Pictify — better per-site caching, no 4MB bundle size limit, and templates live outside your codebase.
Can I A/B test which OG image gets more clicks? +
Yes. Pictify's experiment support renders different variants based on a variant ID. Bind the variant to a user cookie or an A/B framework like PostHog; track the click-through on the shared URL. Rare feature — no other OG image service ships this.
One template. Every page. Every share.
Real expression engine
{{ price * 0.9 | currency }} is a first-class template feature — not a string you pre-format in your backend. Conditionals, filters, nested lookups, all built in.
Live data bindings
Templates connect to HTTP endpoints, webhooks, or static JSON. Images update when data updates. Nothing else in the category ships this.
API + no-code, same product
Designers build templates in a visual canvas. Engineers call one endpoint. No hand-off, no context switch, no rebuild.
A/B experiments on images
Ship variants of a template, track impressions and conversions per variant, declare a winner — all from the same API that renders the image.
One API, many outputs
PNG, JPEG, WebP, multi-page PDF, GIF. Same template, different fileExtension. No separate service for each format.
Agentic AI copilot
"Make a dark-mode variant," "resize this for Instagram Story," "generate five backgrounds." The copilot edits templates step by step, not as a single-shot generator.
Looking for the bigger picture? Read the automated image generation guide →
Related solutions
Automated Image Generation
The complete guide to automating image creation — templates, APIs, expressions, and live data bindings.
Image Generation API
Render images from templates + variables via a single HTTP call. Curl, Node, Python code in every doc.
Automate Product Images
Render catalog-scale product cards, seasonal variants, and inventory-aware banners from one template.
Automate Social Media Images
Personalized social cards at scale — one template, thousands of variants, zero manual design work.
Bulk Image Generation
Generate thousands of images from a spreadsheet, CSV, or JSON batch with async jobs and webhooks.
Dynamic Image Generation
Images that change based on the request — user context, product state, time of day, anything you can bind.