---
title: OG Image Preview & Builder
description: 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](https://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)

```sh
# 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](https://brandstack.dev/tools/og-image-preview.md), and listed with instructions in [/llms.txt](https://brandstack.dev/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