Question 1

What is an OG image and why does every page need one?

Accepted Answer

An OG image — Open Graph image — is the preview picture that appears when someone shares a link on Twitter/X, Facebook, LinkedIn, Slack, Discord, iMessage, or almost any other platform that unfurls URLs. It's defined by the og:image meta tag in the page's HTML head and rendered from a 1200×630 pixel source at minimum. Pages without an og:image get a generic grey rectangle or a random image scraped from the page content, neither of which looks intentional. Pages with a well-designed OG image get a card that reads as professional, recognizable, and shareable — which measurably increases click-through on shared links. Setting one is a five-minute job and affects every share of your content forever.

Question 2

Why 1200×630 specifically?

Accepted Answer

1200×630 is the 1.91:1 aspect ratio that Facebook, LinkedIn, and Twitter/X all use for large link preview cards. Smaller sizes get upscaled and look pixelated; different aspect ratios get letterboxed or center-cropped. 1200×630 is also the minimum size Facebook will render as a large card — go below 600×315 and you get the small-square preview that takes up roughly a third of the visual space. 1200×630 is the safe default: it renders correctly on every major platform, downscales cleanly for smaller contexts, and matches the dimensions that platforms' image pipelines are optimized for.

Question 3

How is the PNG exported?

Accepted Answer

The export button renders the live preview canvas to a PNG at either native 1200×630 or 2x retina (2400×1260). Rendering uses html2canvas, which rasterizes the DOM preview element to a real canvas and exports via canvas.toBlob() as a PNG file. The exported pixels match exactly what you see on screen — fonts, gradients, logos, alignment — because the preview IS the source. There's also a Copy to Clipboard option for pasting directly into Slack, Figma, a CMS, or a design document without saving a file.

Question 4

Do the uploaded logos ever leave my browser?

Accepted Answer

No. Uploaded logos are read into a browser File API object via FileReader and rendered directly into the preview. Nothing uploads to a server, nothing logs, nothing persists after the tab closes. You can verify with DevTools Network tab — zero requests leave your browser after the initial page load and CDN dependency fetch. This matters because OG images often include unreleased product logos, prototype brand marks, or client assets under NDA that shouldn't be transmitted to third-party services.

Question 5

What text length works best on a 1200×630 card?

Accepted Answer

Headlines under 60 characters render cleanly at the tool's default 72px font size; longer headlines auto-wrap to two lines. Subheads under 120 characters fit comfortably below. The tool uses a clamp-based font-size strategy that scales text down gracefully as length increases, but at a certain point the preview reads as wall-of-text — aim for headline-plus-deck style copy rather than paragraphs. If your headline is a question or quote, it often reads better centered; if it's a statement, left-alignment feels more confident. The four layout variants (centered, left-aligned, split, minimal) cover the common patterns.

Question 6

How do I actually install the OG image on my site?

Accepted Answer

Host the exported PNG somewhere public (your CDN, a /public or /static folder in your site, or a blob service). Then add these meta tags to the page's : , , , and for Twitter: , . After deploying, test with Facebook's Sharing Debugger, Twitter's Card Validator, and LinkedIn's Post Inspector — these will cache the image, so re-scrape when you update it. The companion guide has a step-by-step.

📖 Learn More