You paste a link into Slack and a grey rectangle comes back with your domain name sitting in it. Or something worse arrives: a crop of your own homepage, showing two thirds of the navigation bar, half a cookie banner and a slice of a stock photo.
Most of the time the tags are fine. The picture is the problem. If no image appears at all, that is a different fault and it lives in the markup, which the article on the WordPress OG image tag works through properly. This piece assumes the tag is there and the file it points at is doing nothing for you.
Doing nothing usually means too small to read. A large link preview on a phone is roughly 330 points wide and your file is 1200 pixels wide, so everything on it is shown at a bit over a quarter of the size you designed it at. Body text in a screenshot lands at about four points on the glass, which is a grey smear.
So this is about the picture itself: the geometry, the floors the platforms enforce, and the four or five decisions that decide whether a card reads at the size it is really seen. The og image generator below draws one, in this page, before any of the theory.
Draw the card first
Type a headline, pick a background, watch the contrast readout at the bottom. The canvas is a real 1200 by 630 card, the type resizes itself to fit as you type, and the two buttons save it as a PNG or a JPEG ready to upload. Everything happens in this browser tab: nothing is uploaded, and a picture you choose as a background never leaves your device.
Where 1200 by 630 came from
Facebook’s sharing guidance settled on 1200 by 630 as the size that renders the large card, and because every other unfurler consumes the same tag, the number spread. Divide it out and you get 1.9048, which everybody rounds to 1.91 to 1. LinkedIn documents 1200 by 627, three pixels of rounding on the same card, so one file serves both, and Slack, Discord, iMessage and WhatsApp read it too.
X is the one that wants a different shape. Its large card is nominally 2 to 1 and it centre crops anything else to fit. 1200 by 675, the 16 to 9 alternative you will see recommended, works too, but it loses width on every 1.91 to 1 surface. Pick 1200 by 630 and let the platforms trim. The trimming is the interesting part.
The crop nobody warns you about
Crops are taken from the centre out, so the damage is symmetrical and always at the edges. Dropping from 1.91 to 1 to X’s 2 to 1 costs 15 pixels off the top and 15 off the bottom, which nothing will notice. 16 to 9 costs 40 pixels a side. 4 to 3, which some link listings use, costs 180 a side and starts eating layout.
The square is the one that hurts. A 1 to 1 crop of a 1200 by 630 card keeps 630 by 630, which is 52.5 percent of the width. That means 285 pixels vanish from the left and 285 from the right, and a headline that starts 60 pixels in from the edge loses its first four or five characters. Chat clients that show a small square thumbnail next to a message do exactly this.
Two working margins fall out of that. Keep everything off the outer 72 pixels, six percent of the width, because rounded corners and overlay chrome live there. Then, if a square crop matters to you, keep the words inside the middle 630 pixels as well. The centred layout in the tool sits inside that band already; the left aligned one does not, because it looks better everywhere nothing is cropped.
Floors, ceilings and the one platform that is stricter
There is a floor below which the image is not shrunk, it is discarded. Facebook ignores anything under 200 by 200 and falls back to a text only card, which is how a 150 by 150 thumbnail produces no picture rather than a small one. Between 200 by 200 and 600 by 315 you get the small square layout instead of the wide card. X ignores anything under 144 by 144. A 1200 by 630 file clears all of it.
The ceilings are file size, and they differ. Facebook accepts up to 8 MB, X and LinkedIn up to 5 MB. WhatsApp is the strict one: its documented ceiling is 600 KB and in practice previews come back without a picture well before that, so treat 300 KB as the working limit and everything else is satisfied automatically.
That single number decides your export format. A flat card, one background colour and some type, is a handful of colours and compresses to well under 100 KB as a PNG, with edges that stay razor sharp. The same card over a photograph runs past 1 MB as a PNG, failing the WhatsApp threshold on its own, and lands around 150 KB as a JPEG at normal quality. That is why the tool offers both buttons rather than picking for you, and the general argument is in the piece on choosing an image format. WebP and AVIF are excellent files and poor share cards: scraper support is inconsistent in a way you cannot test from your own machine.
Before you upload anything, check the two numbers that matter:
# dimensions, from the file header
file share-card.jpg
# share-card.jpg: JPEG image data, ... 1200x630, components 3
# size on disk
ls -lh share-card.jpg
# -rw-r--r-- 1 you staff 147K share-card.jpg
What the card has to do at the size it is seen
Divide 1200 by 330 and you get 3.6, and that number governs everything else. Type set at 88 pixels in the file appears at roughly 24 points on a phone, a comfortable headline. Type set at 32 pixels appears at under nine points, smaller than the caption text in most apps, and that is the last size worth using. Anything below it is decoration rather than information, which is why the generator stops at 32 and shows an ellipsis instead of shrinking further.
Five rules follow from the arithmetic, and they are most of the craft:
- Very few words. At 88 pixels a line holds about 25 characters, so three lines is roughly 70. Six to nine words keep the largest size. Twenty words do not fit at all, they just collapse the type toward the floor.
- Real contrast. 4.5 to 1 is the working floor, 7 to 1 is where you stop worrying. WCAG does not formally govern a picture, but the ratio predicts legibility on a bright phone outdoors better than your eye does on a good monitor indoors.
- Nothing important in the outer margin. 72 pixels of clear space on all four sides, and the words inside the middle 630 if you want them to survive a square.
- No small type. A URL, a date, a byline and a tagline all read as texture at 3.6 times reduction. Drop them and give the space to the headline.
- One idea, not the title. The card does not have to carry the whole title. It answers one question, which is why somebody scrolling past should stop, and cutting a 70 character title to a 30 character promise usually improves both the design and the click.
Why a screenshot of your homepage makes a terrible card
Do the arithmetic. A 1440 pixel wide screenshot squeezed into a 1200 pixel card is already down to 83 percent, so 16 pixel body text is 13 pixels in the file, and dividing by 3.6 for the phone lands it under four points. The parts of a website that carry meaning, the running text and the labels, are exactly the parts that disappear first.
The geometry is against you too. A page screenshot is arranged for a tall viewport, so cropping it to 1.91 to 1 takes a horizontal band that is usually the header: your navigation, the least interesting thing you own, with a square crop then removing the left and right thirds of that. And every link from the site produces the same picture, which trains people to stop seeing it.
And why the logo alone is only slightly better
A logo on a coloured field at least survives the reduction. It is large flat shapes, it stays legible at thumbnail size, and it identifies the sender before anybody reads a word. That is why the logo card became the safe default.
What it cannot do is distinguish one link from another. Five posts from the same site in one feed become five identical tiles, and the card stops carrying information the moment there is more than one of it. A logo also wants a small area, so a mark centred in 1200 by 630 is a little shape floating in a lot of nothing.
The version that works uses both. Put the brand in the small label, set in caps at a size you can afford to lose, and give the headline the specific thing this link is about. That is the point of the label control and the label above headline layout: identity in the corner, meaning in the middle.
What the og image generator does between keystrokes
The type fitting is a loop, not a guess. The headline starts at 88 pixels and drops in 2 pixel steps until it fits the box or reaches the 32 pixel floor. It wraps on words, breaks a single word wider than the card by characters rather than letting it run off the edge, treats Enter as a forced break, and stops at four lines, putting an ellipsis on the fourth if there is more text waiting. The subline stops at two lines. Because the subline and the label take their space out of the same box, adding either can only ever make the headline smaller, never larger. A blank headline draws nothing at all.
The contrast readout is doing the real work. Declared colours are easy to check and are also the case that never goes wrong. The awkward ones are a gradient whose top corner is much lighter than its centre, and a photograph with a bright sky exactly where the second line of the headline sits. So the tool paints the background first, measures where the headline box will be, and reads those pixels back off the canvas before a single glyph is drawn.
The sampled region is reduced to a 48 by 16 grid and the worst point in it sets the ratio, not the average. Averaging would let a bright corner hide behind a dark middle, which is the failure mode that gets shipped, while downscaling first stops one stray white pixel in a photograph swinging the verdict on its own. The bands are the familiar ones: 7 and above passes AA and AAA, 4.5 and above passes AA, 3 and above passes for large text only, and below 3 the readout tells you to change the text or the background. With no headline typed it asks for one rather than inventing a number.
The number covers the headline only, deliberately. The label and the subline are drawn at 78 and 88 percent opacity to build hierarchy, which lowers their contrast on purpose, and reporting three ratios would only tempt you into flattening the design until they all pass.
Two smaller details. Every colour picker is paired with a hex field: a valid three or six digit value redraws immediately, anything else turns the field red and is ignored until it is valid, and leaving the field restores the last good value, so a half typed hex never repaints the card. Background pictures are drawn cover fit and centred, so any aspect ratio fills the card without stretching, over a solid base colour painted underneath so a transparent PNG composites onto a clean card rather than onto the previous frame. Choosing a file switches the background mode to Image on its own, and a file that will not decode says so in place and leaves the card alone.
The font is the CSS stack already on this page, read from the tool root at start up. Nothing is downloaded, so the card comes out in the same typeface as the site it points at rather than in a generator’s house font. If your background is a photograph and you are fighting placement rather than colour, the longer treatment is in text on a photograph that stays readable.
What it deliberately does not do
There is no drag and drop for the image, no preset or template system, and nothing is remembered between visits, which is the direct cost of running entirely in your tab. Downloads are named from a slug of the headline, capped at 48 characters, falling back to share-card when the headline has no letters or digits. The letter spacing on the small label is drawn glyph by glyph, which is right for a short uppercase eyebrow and is not a general text renderer.
The bigger limit is one card at a time. A card generated for every post automatically, with the title and the category dropped into a fixed design, is a template problem rather than a drawing problem, and building the design once and letting posts fill it in is the shape of the answer. If you need the same card at ten different sizes for a launch, the layout question behind that is one design, ten formats. Both want something that batches. This is for the card you need in the next two minutes.
The check that costs nothing
Before you upload it, shrink it. Look at the file at thumbnail size in the folder it landed in, or set the browser zoom to 25 percent, or put the phone on the desk and step back a pace. You are answering one question: can you read the headline cold, rather than can you remember what it says because you wrote it.
Two more seconds catch the crop. Cover the left and right thirds of the thumbnail with your fingers: that is the square version, the one that appears in a chat list. If the headline loses its first word, move the text in.
Bad cards get shipped because they were approved at 100 percent zoom on a large monitor, where a 24 pixel byline is perfectly legible and a 3 to 1 contrast ratio looks like a design decision, and nobody except the person who made it ever sees the card that way. The specifications are not the hard part. 1200 by 630, under 300 KB, JPEG for photographs and PNG for flat colour, nothing important in the outer 72 pixels, and a contrast ratio you measured rather than guessed: all five can be checked in under a minute.
The hard part is restraint. A share card has room for one idea at a size a thumb can read while scrolling, and the temptation is always to add the logo and the URL and the date and the tagline, at which point it carries four things badly rather than one thing well. Write the six words first, set them at 88 pixels, and add something else only if the card still looks empty at thumbnail size. It almost never does.
