Generating Open Graph images with an AI agent
How to produce the social preview card for every page without opening a design tool.
Cancel anytime before day 7 · no lock-in
What the og:image tag really needs
The image a link shows on X, LinkedIn, Slack, or Facebook comes from a handful of meta tags in your <head>. The one that matters most is og:image, and it wants an absolute URL, not a relative path.
The safe canvas is 1200 by 630 pixels, a 1.91:1 ratio. Add og:image:width and og:image:height so a platform can lay out the card before it finishes downloading the file. Set og:image:alt for screen readers, and set twitter:card to summary_large_image so X uses the big format.
Keep the file under about 1 MB. Most crawlers cache the image the first time they see the URL, so changing the picture usually means a re-scrape in the platform's debugger.
Generating the picture from your agent
Figgshield is an MCP server at https://api.figgshield.ai/mcp. Once it is connected in Claude, Claude Code, Cursor, Windsurf, or ChatGPT Developer Mode, you describe the card in plain language and the agent calls the image tool for you.
The image model is Nano Banana 2 from Google. You can render at 1K or 2K for 8 credits, or 4K for 16. For a 1200 by 630 card, 2K gives you room to crop to the exact 1.91:1 frame with detail to spare.
A prompt can be as plain as: A 1200x630 social card, dark slate background, the title 'Ship faster with feature flags' in bold white, small logo bottom left. Ask for the text baked in, or leave space and overlay the copy at build time with your own template.
Keeping every card on brand
Send a reference image, your logo or a screenshot of an existing card, and ask the agent to match its palette and layout. That file is used in memory to guide the generation and is never stored, so passing an unreleased asset is fine.
For a site with many pages, generate one base template, then ask for variants per section: one accent color for docs, another for the blog, another for the changelog. You keep a recognisable family of cards without hand-editing each one.
Testing cards before they ship
A card that looks right in your editor can still break once a crawler fetches it. Run every new URL through the platform tools before you announce anything.
Each tool re-scrapes on demand, which also clears the old cached image after you swap in a new file:
- The Facebook Sharing Debugger, which refreshes the cache and reports missing tags
- The LinkedIn Post Inspector for the LinkedIn unfurl
- A private Slack channel, where pasting the link shows the real Slack preview
The 7-day link and your deploy
Every file Figgshield generates lives on a private link for 7 days and is then deleted. That is deliberate temporary storage, not a CDN. Do not point og:image straight at that link, because the card would vanish a week later.
Download the file and commit it to your repo, or push it to the same bucket or CDN that serves the rest of your static assets. Then the meta tag points at a URL you control, version, and cache.
Animated previews and what it costs
Some placements accept short video. You can turn a card you already made into a five-second clip by passing its image id to Kling 3, or the faster Kling 3 Turbo tier, at 35 credits for the clip.
One balance covers both images and video, and Figgshield charges at cost with no markup on the models. The $5 seven-day Pro trial comes with 150 credits, roughly eighteen images, and you can cancel before day 7 and pay nothing more. There is no free tier. See how credits work for the full breakdown.