OG Image Preview & Builder

Preview how any URL's social card looks across X, LinkedIn, Facebook, iMessage, Slack, and Discord, then build and export your own 1200×630 OG image — in the browser or from the CLI.

The OG Image Preview & Builder is a free dual-mode tool at brandstack.dev/tools/og-image-preview. It combines two of the most common social-sharing jobs into one place: checking how a URL renders as a social card, and building a new OG image from scratch.

Run it from the command line (recommended for agents)

# Preview: fetch a page and report its resolved OG/Twitter tags + warnings
npx @brandstack/cli og-image-preview preview https://example.com --json

# Build: render a 1200×630 card, offline
npx @brandstack/cli og-image-preview build \
  --template centered-bold --title "Ship day" --tagline "It's live." \
  --brand "Acme" --logo ./logo.png --out og-image-1200x630.png

preview needs network access to the page it inspects (nothing else); --html saved-page.html parses a saved page fully offline. build is fully offline and renders the same pixels as the browser export. --json on preview returns the parsed tags and warnings as structured data. Exit code is non-zero when preview finds warnings, so it works as a pre-publish CI check.

Preview mode

Paste any URL to see pixel-accurate mock-ups of how its social card appears on six platforms:

X (Twitter): both summary and summary_large_image card variants
LinkedIn
Facebook
iMessage
Slack
Discord

The tool also shows you:

All parsed og:* and twitter:* meta tags found on the page
A warnings list flagging missing tags, title length overruns, missing twitter:card, and other common issues that cause social cards to render poorly

No login is required, and the tool works on any public URL.

Builder mode

Design a 1200×630 OG image without leaving your browser. Choose from four templates:

Centered bold: headline and tagline on a clean background with an accent dot
Left stack: accent bar, left-aligned title and tagline, brand name in the footer
Split accent: colored panel on the left, text on the right
Soft gradient: quote-mark accent on a gradient background

What you can edit

Title, tagline, and brand name
Background, text, and accent colors (color picker or hex input)
Logo: upload a PNG, SVG, or JPG, then drag it anywhere on the canvas
Logo size

Every knob has a CLI flag (--template, --title, --tagline, --brand, --bg, --text, --accent, --logo, --logo-size, --logo-pos).

Portable rendering

Text renders in a bundled open font (Inter), on the website and in the CLI alike. This is deliberate: with system fonts, the “same” card renders differently on every OS, which made the export irreproducible anywhere else. With the pinned font, the same inputs produce the same image everywhere — golden-image tests in CI hold the browser and CLI renders to pixel parity.

Exporting

Click Download WebP or Download PNG to save the finished image at 1200×630 pixels (the file is named og-image-1200x630.<ext> in both the browser and the CLI). The image is generated entirely on your device; nothing is uploaded to a server. Note that WebP bytes differ between encoders at the same quality setting — the stable contract is the pixels, not the file bytes; use PNG when you need lossless stability.

For AI agents

Prefer the CLI (above). Agents checking a URL’s metadata can also call GET /api/og-preview?url=<encoded URL>, which returns the resolved Open Graph and Twitter card tags as JSON, cached for 5 minutes. This page is also served as plain markdown at /tools/og-image-preview.md, and listed with instructions in /llms.txt.

Tips

Use Preview mode (or the CLI’s preview with its non-zero exit on warnings) before you publish any new page to catch missing tags early
The warnings list is the fastest way to find out why your social cards look broken
In Builder mode, switch to X preview first; its image crop is the most restrictive, so designing for X means it’ll look good everywhere else too
Logos with transparent backgrounds (PNG) look best against colored template backgrounds