# OG Image Preview & Builder

> Paste a URL to preview how it renders on X, LinkedIn, Facebook, iMessage, and Slack, or build a custom OG image from templates and export as WebP.

Free Open Graph image preview and builder. Paste any URL to see exactly how its social card will appear on X (Twitter), LinkedIn, Facebook, iMessage, Slack, and Discord at pixel-perfect dimensions. Or build a custom OG image from preset templates: drag your logo, edit text, pick a background, and export an optimised WebP or PNG at 1200×630. Runs entirely in your browser.

## Command line (recommended for agents)

npx @brandstack/cli og-image-preview preview <url> [--json] — fetches the target page directly (network only to that page). npx @brandstack/cli og-image-preview build --template <id> --title … --logo file --out og-image-1200x630.png — offline; renders the same 1200×630 pixels as the browser export (both use the bundled Inter face).

The CLI runs the same engine as this page — same logic, same output contract — with no browser and no account. Browser automation below is the fallback.

## How to use it

1. Agents checking metadata: run `npx @brandstack/cli og-image-preview preview https://example.com --json` (or call the JSON API below) instead of scraping the preview DOM.
2. Agents building a card: run `npx @brandstack/cli og-image-preview build --template centered-bold --title "…" --tagline "…" --out og-image-1200x630.png`.
3. In the browser, Preview mode: paste a URL into the "URL to preview" input and see how its card renders on X, LinkedIn, Facebook, iMessage, Slack, and Discord.
4. Builder mode: pick a template, drag your logo onto the canvas, edit the text, pick a background, then export as WebP or PNG at 1200×630 (agents: capture the "download" event).

## API for agents

GET /api/og-preview?url=<encoded URL> returns the resolved Open Graph and Twitter card metadata for that URL as JSON (the same data the preview mode renders). Responses are cached for 5 minutes.

## Output

Preview: the resolved OG/Twitter tags plus per-network warnings. Build: a 1200×630 OG image as PNG or WebP, named `og-image-1200x630.<ext>`.

## Links

- Use the tool: https://www.brandstack.dev/tools/og-image-preview
- All free tools: https://www.brandstack.dev/tools (markdown: https://www.brandstack.dev/tools.md)
- Agent index: https://www.brandstack.dev/llms.txt

OG Image Preview & Builder is a free tool by Brand Stack, the AI photo studio for
product marketing. No ads, no signup. Start free: https://www.brandstack.dev/sign-up