Open Graph Image Generator
Make the 1200 by 630 card that shows when your link is shared, and copy the meta tags that point at it. Drawn in your browser.
Download
1200 × 630, the size every preview accepts. PNG keeps text crisp; JPG is smaller and fine over a photograph. WebP is left out on purpose — it is not on the list of formats Facebook publishes.
Paste into <head>
<meta property="og:title" content="Converters, calculators and generators that show their work">
<meta property="og:description" content="Every number traced to a published source and checked on every build.">
<meta property="og:image" content="https://example.com/og.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Converters, calculators and generators that show their work">
<meta name="twitter:description" content="Every number traced to a published source and checked on every build.">
<meta name="twitter:image" content="https://example.com/og.png">A shared link is a picture with some words under it, and if you do not supply the picture the platform picks one — usually the first image on the page, which is rarely the right one. The frame is 1200 by 630, an aspect ratio close to 1.91 to 1, and every preview worth caring about accepts it. This draws that card from a headline and a sentence, shrinking the type until it fits rather than letting a long title run off the edge, and hands back the tags that point at the result.
How it is calculated
og:image + og:image:width + og:image:height + twitter:card
The width and height are worth stating even though the image carries them: a crawler that has not fetched the file yet can lay out the card from the tags alone, which is the difference between a large preview and a small one on the first share.
Source: The Open Graph protocol — og:title, og:description, og:image and the image dimension properties
Questions people ask
- What size should an og:image be?
- 1200 by 630 pixels. Larger is accepted and scaled down, smaller risks being shown as a small square thumbnail instead of a wide card, which is a different and much weaker layout.
- Why not WebP?
- Because Facebook publishes a list of formats it accepts and WebP is not on it, even though the Open Graph protocol itself does not restrict the format. PNG and JPG both work everywhere, so there is nothing to gain by testing the edge.
- PNG or JPG?
- PNG if the card is type on a flat colour or a gradient, because the text stays crisp. JPG if there is a photograph underneath, because the file will be a fraction of the size and nobody will see the difference at preview scale.
- Why does my new image not show up?
- Because the platform cached the old one. Facebook and LinkedIn both have a debugger that re-fetches a URL on demand, and adding a query string to the image URL forces a fresh copy if that fails.
- Do I need separate Twitter tags?
- Not for the image itself — the card falls back to the Open Graph tags. The one worth setting is twitter:card as summary_large_image, which is what turns a small thumbnail into the wide card.
Related tools
Favicon Generator
Turn one image into the whole favicon set — ICO, PNGs, web manifest and the markup to paste. Crop and position the image first, and nothing leaves your browser.
Text Favicon Generator
Make a favicon from a letter or initials — choose the font, colours and shape, and take away the whole set with the markup to paste. No image needed.
CSS Gradient Generator
Build a CSS gradient and copy the exact declaration. Angles follow the CSS specification, where 0deg points up and angles turn clockwise.
Found a problem, or want more?
A number that disagrees with its source is a defect, not a rounding preference.
What did you enter, what did the tool show, and what did you expect instead? If you have a source that disagrees with ours, a link to it is the most useful thing you can send.
Opens your mail app with the page and tool already filled in.