Online Tool Store
OG Image Generator
Compose an Open Graph share image in your browser — title, description, theme and optional logo — with a safe-area guide showing exactly what a 2:1 crop removes. Downloads a PNG and gives you the matching og:image meta tags. Nothing is uploaded.
🔒 This tool runs entirely in your browser. Your files are never uploaded to a server.
The tags that go with it
Change the URL to wherever you upload the file. Both platforms need an absolute URL — a path beginning with a slash is the single most common reason a preview does not appear.
The image is drawn in your browser and the PNG is produced locally — nothing is uploaded, and no preview is fetched from any social platform. The text is rendered with fonts installed on this machine, so treat the result as a finished image rather than a template that will re-render identically elsewhere.
How to use it
- Type the title — the same headline the page uses is usually the right answer.
- Add a short description and your domain, then pick a theme.
- Turn on the safe area to check nothing important sits near the top or bottom edge.
- Download the PNG, upload it, and paste the meta tags with the real URL.
Why 1200 × 630
It is the size that has become the default because it satisfies the constraints at once:
1200 × 630 ratio 1.905 the standard
1.91:1 needs 628.3px 630 covers it
2:1 crop keeps 600px loses 30px, 4.8%
Because 630 is very slightly taller than the 628.3 a strict 1.91:1 would need, nothing is lost on surfaces that use that ratio. Where a surface crops harder — to a flat 2:1 — it takes 30 pixels, split between top and bottom. That is the entire basis for the safe-area guide: it is not a made-up margin, it is the measured difference between the two ratios.
Text that fits, rather than text that is clipped
A long headline has to go somewhere. This tool wraps first and then reduces the size only when the wrapped block would overflow, stopping at a floor so it never becomes unreadably small. The result is that a forty-word title looks cramped — which is accurate feedback, because a forty-word title will look cramped in a preview card too. What it will not do is cut the sentence off partway and leave you to notice later.
In practice a title of six to twelve words reads well at this size. If yours needs more, the description field is the place for the detail.
The tags matter as much as the image
A perfect image with the wrong markup shows nothing at all. Two things account for most failures. The URL must be absolute
— a scraper has no page context to resolve /og/image.png against — and the
file must be reachable without a login or a redirect chain. Declaring the width and height is not required but helps a
renderer reserve the right space before the image arrives, and
og:image:alt is the one people always skip despite it being what a screen
reader announces.
What this tool cannot tell you
It cannot fetch your page, so it cannot confirm your tags are live, that the file is reachable, or how any particular platform will actually render the card. Those checks require a request to your site and to the platform, which is exactly what a browser-only tool does not do. Use the platform's own sharing debugger for that final confirmation — and expect caching, which is why a corrected image often appears to be ignored for a day or two.
FAQ
What size should I use?
1200 × 630 unless you have a specific reason not to. It is the size every scraper handles, it is large enough to stay sharp on a high-density screen, and its 1.905 ratio covers the commonly quoted 1.91:1 with about two pixels to spare. The other presets are here for when you already know you want a different shape.
Why does my text get cut off in a real preview?
Because some surfaces crop the image rather than letterboxing it. Cropping 1200 × 630 to a flat 2:1 removes 30 pixels — 15 from the top and 15 from the bottom when centred, or 4.8% of the height. That is not much, but it is enough to clip a descender or shave a logo sitting hard against the edge. The safe-area toggle draws exactly that boundary so you can see what a crop would take.
Will this render identically on my build server?
No, and that is the honest limitation of drawing in a browser. The text uses fonts installed on this machine, so a colleague on a different operating system would get slightly different letterforms and line breaks. Treat the PNG you download as the finished asset — upload that file rather than expecting to reproduce it later. If you need images generated per page at build time, that is a build-step job with an embedded font, not a browser tool.
Why did my title shrink instead of wrapping onto another line?
It does both. The title wraps first, and only shrinks once the wrapped block would run past the space available. The alternative is to keep the font size and clip whatever does not fit, which silently drops words — a smaller headline is much better than a headline missing its last three words.
My preview still shows the old image. Is the file wrong?
Usually not. Platforms cache what they scraped, sometimes for days, so a fresh upload will not appear until their cache expires or you ask them to re-scrape it through their own debugging tool. Changing the filename is the reliable workaround, because it is a different URL as far as the cache is concerned.
Is anything uploaded?
No. The image is drawn on a canvas in the page and the PNG is produced locally, including any logo you add. No request is made to any social platform either — this tool cannot show you a live preview from Facebook or X, only the image you are about to give them.
How we compare
| Feature | Online Tool Store | OG image services | Canva or Figma |
|---|---|---|---|
| Nothing uploaded, no account | ✓ | ✗ | ✗ |
| Marks the real crop boundary | ✓ | ✗ | Manual guides |
| Never clips your title silently | ✓ | Varies | Up to you |
| Gives you the matching meta tags | ✓ | Sometimes | ✗ |
| Generates an image per page automatically | ✗ | ✓ | ✗ |
| Custom fonts, byte-identical everywhere | ✗ | ✓ | ✓ |
| Full layout control, images and illustration | ✗ | Template-bound | ✓ |
This is for the case where a page needs a decent share image in the next minute and you would rather not open a design tool or sign up for a service. If you publish often enough that every post needs one, generate them in your build with an embedded font — that is the version that stays consistent. If the image is a real design piece, use a real design tool.