Social Resizers·3 min read

OG Image Dimensions That Work on Every Social Network

Before anyone reads your headline, they see the share image. Chat apps, feeds, and forums all render a preview card the moment a URL lands, and the og image dimensions that work across all of them are narrower than most design specs admit. One frame, 1200x630, does nearly everything. This article covers why that shape won, how to keep text readable when the card renders tiny, and how to verify the whole setup before publishing.

Open the tool All insights

The og image dimensions that work everywhere

1.91:1 won the standards war.

The Open Graph protocol lets a page declare its own preview image, and the consuming networks have converged on a 1.91:1 frame. At 1200x630 you meet or exceed every major platform's recommendation: Facebook and LinkedIn use it directly, X's summary_large_image card matches it, and Slack and Discord scale it down without cropping.

The OG Image Maker's presets mirror that reality: 1200x630 standard, 600x315 as the small floor, plus square and 2:3 portrait variants for the handful of contexts that prefer them. Ship the standard; keep the others for exceptions.

All four presets share the same center weighted framing, so a single composition can survive every frame if its subject holds the middle of the canvas.

The publish day scenario nobody schedules time for

The gray box moment.

It's launch morning. The post is edited, the meta description is polished, and someone pastes the URL into the team channel to celebrate, and the preview renders as a gray box, or a random inline screenshot, or the site logo stretched beyond recognition. Now the share image is a fire drill instead of a checklist item.

The fix takes ten minutes when it's planned: export the hero at 1200x630, upload it, point the og:image tag at it, rescrape. It only becomes painful when discovered after the link is already circulating.

Teams that treat the share image as part of the article template, one frame per post, designed alongside the header, never hit the fire drill at all. The habit costs less than the incident.

A working og:image, tag and all

File plus one meta line.

Input: a 2400x1260 hero graphic, exported through the standard preset to exactly 1200x630 and uploaded to your site. Then declare it: <meta property='og:image' content='https://example.com/og/launch.jpg'>. Output: Facebook, LinkedIn, Slack, and Discord all render the same intentional card, and X picks it up through its Open Graph fallback.

Add og:image:width 1200 and og:image:height 630 alongside it and crawlers can lay out the card correctly on the very first share, before they've even downloaded the file.

Text on share images, sized for tiny previews

Design at 1200, judge at 300.

Text on share images gets read at a fraction of design size: a chat preview may render your 1200 pixel canvas 300 pixels wide. Type that looked generous in Figma becomes decoration. The working rule is 60 pixels or larger for the headline at full canvas size, high contrast, and no more than about seven words.

Keep text inside a safe margin of roughly 100 pixels on every side too; some placements shave the edges, and older crops on X favored the middle of the frame.

A quick self test: zoom the design to 25 percent in your editor. If the headline still reads comfortably, it will survive a chat preview; if you're squinting, so will everyone else.

One og image for all networks: where it holds, where it slips

The default and its edges.

One og image for all networks is the right default. The 1200x630 file plus a twitter:card tag covers the large majority of surfaces with a single asset and a single URL to cache bust when it changes.

The strategy slips only at the margins: Pinterest prefers tall 2:3 imagery, and a few chat clients render squares. If those audiences matter to the page, export the portrait and square presets from the same source; if not, the standard frame alone is defensible.

OG image mistakes that sabotage link previews

Five preview killers.

Broken previews almost always come down to the same handful of causes.

Shipping no og:image at all and letting each network scrape whatever image it finds first
Pointing the tag at a relative path when crawlers need the absolute https URL
Reusing a 4000 pixel hero and letting every platform crop it toward its own ratio
Setting text at blog header sizes that vanish when the card renders at a third of scale
Updating the image file but keeping the URL, so cached previews show the old artwork for weeks

Tips and the rest of the sharing stack

Version the file, test on a phone.

Name OG files with a version suffix so every update gets a fresh URL, and test in a real chat app as well as the official debuggers; nothing exposes an undersized headline faster than a phone screen.

The image is only half the card. The Open Graph Generator writes the full tag set around it, the Twitter Card Generator adds the X specific markup, and the Open Graph Inspector shows how the finished URL renders on each network before anyone else sees it.

Try it now

Open OG Image Maker

The tool is one click away. No sign up, no upload, no payment.

Open OG Image Maker

Write a review