Social Resizers·4 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 draw a preview card the moment a URL is pasted, and the range of sizes that works across all of them is narrower than most design specs suggest. One frame, 1200x630, does nearly everything. This article covers why that shape won, how to keep text readable when the card shows tiny, and how to check the whole setup before publishing.

Open the free OG Image Generator All insights

The one OG image size that works almost everywhere

1.91:1 became the standard.

The Open Graph protocol lets a page declare its own preview image, and the major networks have settled on a 1.91:1 frame. At 1200x630 you meet the recommendation on Facebook and LinkedIn, X's large card uses it, and Slack, Discord and Teams read it from the same og:image tag.

OG Image Generator starts at that size. You type a title, an optional subtitle and a site name, pick one of three layouts (a left-aligned blog post, a centred announcement, or a photo with a caption bar), and set the background, text and accent colours and the font. Six colour themes give you a starting point, and you can add a dot, grid or diagonal pattern, adjust text size, and add a background photo with a darkening slider and your logo. Mockups under the preview show roughly how the link card will look on Facebook, X, LinkedIn and Slack or Discord. Other sizes are there for exceptions: a 1080x1080 square, a 1200x1800 portrait at 2:3, a small 600x315 version and any custom size.

Ship the standard size, and keep the others for the few places that prefer them.

The publish-day problem nobody schedules time for

The grey box moment.

It is launch morning. The post is edited, the meta description is polished, and someone pastes the URL into the team channel to celebrate. The preview shows a grey box, or a random image from the page, or the site logo stretched out of shape. Now the share image is an emergency instead of a checklist item.

The fix takes ten minutes when it is planned: make the image at 1200x630, upload it, point the og:image tag at it, and ask the networks to fetch the page again. 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 image per post designed alongside the header, avoid the emergency entirely.

A working og:image, tags and all

The file plus a few meta lines.

Design the image, press Download (PNG is the safe default for text and flat colour, JPG is smaller with a photo background), and upload it to your site at a permanent address such as https://example.com/og/launch-v1.png. Type that address into Image URL for the meta tags and the tool writes the block for you: og:image, its width and height, alt text taken from your title, and the twitter:card and twitter:image tags. Copy it into the page's head.

The width and height tags let crawlers lay out the card correctly on the very first share, before they have downloaded the file. The twitter:card value summary_large_image tells X to show the big version, and X falls back to the Open Graph image, so one file serves every network.

Text on share images, sized for tiny previews

Design at 1200, judge at 300.

Text on share images gets read at a fraction of its design size. A chat preview may show your 1200 pixel canvas at a quarter of that width. Type that looked generous in the editor turns into decoration. Keep the headline to a few words, make it large, and use strong contrast, such as light text on a dark background or the darken slider over a photo.

The generator shrinks long titles to fit and trims them after four lines, which is a signal to shorten rather than a feature to lean on. Keep text away from the edges too, since some apps trim the image toward 2:1 or show it as a square thumbnail.

A quick self-test: look at the preview zoomed down to a quarter size. If the headline still reads comfortably, it will survive a chat preview. If you are squinting, so will everyone else.

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

The default and its edges.

One share image for every network is the right default. The 1200x630 file plus a twitter:card tag covers most surfaces with a single asset and a single URL to update when it changes.

The approach slips only at the margins. Pinterest prefers tall 2:3 images, and a few messaging apps show a small square thumbnail. If those audiences matter for the page, export the portrait and square sizes from the same design, or press All sizes (ZIP) to get all four at once. If not, the standard frame alone is fine.

OG image mistakes that sabotage link previews

The usual preview killers.

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

Shipping no og:image at all and letting each network grab whatever image it finds first
Pointing the tag at a relative path when crawlers need the full https address
Reusing a huge hero image and letting every platform crop it toward its own shape
Setting text at blog header sizes that vanish when the card shows at a third of the size
Using WebP for og:image. It is the smallest format, but some older preview crawlers do not support it, so PNG or JPG is safer
Replacing the image file but keeping the same 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.

Give each new version of the image a new file name, so every update gets a fresh URL, and ask networks to fetch the page again with Meta's Sharing Debugger or LinkedIn's Post Inspector. Test in a real chat app as well. Nothing shows an undersized headline faster than a phone screen.

The image is only half the card. Open Graph Generator writes the og:title, og:description and og:url tags around it, Twitter (X) Card Generator adds the X-specific markup, and Open Graph Checker shows how the finished URL will preview before anyone else sees it.

Try it now

Open OG Image Generator

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

Open OG Image Generator

Write a review