ImageApr 18, 2026 · Updated Oct 13, 2026 · 5 min read

How to Create an Open Graph Image (2026)

Open Graph image sizes per platform, the tags to set, and a worked audit of our own 783 pages: 674 shared a square logo inside a wide card, which X crops into a strip, and our template pointed at a file that did not exist.

🖼

Try the OG Image Generator

Make 1200×630 link preview cards in seconds

→

Derek Giordano

Designer & Developer

Contents

1. What the Image Does 2. Sizes That Work Across Platforms 3. Worked Example: Auditing Our Own Site 4. The Tags 5. When a Platform Shows the Old Image

What the Image Does

When a link is pasted into a feed or chat, the app fetches the page and builds a preview from its Open Graph tags: og:title, og:description and og:image. Without an og:image the app picks an image from the page or shows none. Which preview appears, and how it is cropped, is decided by each platform from the image you supply and the card type you declare.

Sizes That Work Across Platforms

Platform	What it asks for
Facebook / Meta	At least 1200×630 for the large link preview (1.91:1); smaller images show as a small thumbnail
X, `summary_large_image`	2:1 aspect, minimum 300×157, maximum 4096×4096, under 5 MB
X, `summary`	1:1 aspect, minimum 144×144, maximum 4096×4096
LinkedIn	1.91:1, 1200×627 recommended

A 1200×630 image fits all of the wide cards: X crops it slightly to 2:1. Keep text and logos away from the top and bottom 15 pixels and inside a centered safe area, because the same image is cropped differently by each app. Declare og:image:width and og:image:height so the first share renders without waiting for the image to be fetched.

Worked Example: Auditing Our Own Site

We checked the Open Graph tags of all 783 pages on this site (October 13, 2026; script in our test folder):

Check	Result
Pages with an absolute https og:image	782 of 783
Image files that do not exist	0
Pages sharing one 512×512 square logo as og:image	674
…of those, declaring `summary_large_image`	674 (until this audit)
Pages with their own image	109, mostly 1200×744 WebP (1.61:1)

Two problems. A square logo inside a large-image card gets cropped into a 2:1 strip, so on X most of our pages would have shown a sliced logo; we switched those 674 pages to the summary card, which displays a square image as intended. Our own article images are 1.61:1 rather than 1.91:1, so the wide cards trim their tops and bottoms. The real fix is one designed 1200×630 card per page, which we have queued. The audit also found that our page template pointed og:image at a file that had never existed.

The Tags

<meta property="og:image" content="https://example.com/og/page-name.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Short description of the image">
<meta name="twitter:card" content="summary_large_image">

Use an absolute https URL. PNG or JPEG are the safest formats; keep the file well under 5 MB (a designed card is usually 50-300 KB). Pick the card type to match the image: summary_large_image for wide images, summary for square logos.

When a Platform Shows the Old Image

Platforms cache previews. After changing the image, use a new file name (or a query string) so the URL changes, then ask the platform to re-fetch: Meta's Sharing Debugger and LinkedIn's Post Inspector both have a re-scrape button. X re-fetches cards on its own schedule.

The OG Image Generator builds 1200×630 cards from a title, colors and an optional logo, and downloads them as images ready for og:image.

Frequently Asked Questions

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. 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.

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 also the minimum size Facebook will render as a large card — go below 600×315 and you get the small-square preview. It renders correctly on every major platform, downscales cleanly for smaller contexts, and matches the dimensions that platforms' image pipelines are optimized for.

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 — 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.

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. 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.

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. At a certain point the preview reads as wall-of-text — aim for headline-plus-deck style copy rather than paragraphs. 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 (your CDN, a /public or /static folder in your site, or a blob service). Add og:image, og:image:width (1200), og:image:height (630), og:image:type (image/png), og:image:alt, twitter:card (summary_large_image), and twitter:image meta tags to the page <head>. After deploying, test with Facebook's Sharing Debugger, LinkedIn's Post Inspector — these will cache the image, so re-scrape when you update it. The guide above has the exact HTML.

Try it yourself

Generate a 1200×630 OG image in seconds — no signup, no upload

⚡ Open OG Image Generator

📚 References & Further Reading

Derek Giordano

Written by the creator of Ultimate Design Tools. BA in Business Marketing.

⚡ Try the free OG / Social Card Debugger →