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

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.

Why 1200×630 specifically?

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 the minimum size Facebook will render as a large card — below 600×315 you get the small-square preview.

How is the PNG exported?

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.

Do the uploaded logos ever leave my browser?

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.

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

Headlines under 60 characters render cleanly at the tool's default 72–88px font size; longer headlines auto-wrap to two lines. Subheads under 120 characters fit comfortably below. The four layout variants (centered, left-aligned, split, minimal) cover the common patterns.

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

Host the exported PNG somewhere public. Add og:image, og:image:width (1200), og:image:height (630), twitter:card (summary_large_image), and twitter:image meta tags to the page . After deploying, test with Facebook's Sharing Debugger, LinkedIn's Post Inspector.

How to Create an Open Graph Image (2026)

🖼

Try OG Image Generator

Free, no signup →