Skip to content

OG Image Generator: 1200×630 Cards in Seconds

An OG image generator makes the picture that appears when your page is shared. Type a title and subtitle, pick a theme and layout, add a logo if you like, and download a 1200×630 PNG — drawn in your browser and laid out to stay readable when platforms crop it.

Theme

1200 × 630 PNG · … KB · made in your browser, nothing uploaded

The image is drawn on a canvas in your browser. Nothing you type or upload is sent anywhere. Free, no signup. Updated Oct 24, 2026 by the AEOeye team.

Open Graph Image Generator: Layouts That Survive Cropping

Platforms don't show your image the same way. Facebook and LinkedIn use a wide 1.91:1 frame; Slack shows a small thumbnail; some messaging apps crop closer to square. A layout that only works at full size loses its headline everywhere else.

So the generator keeps text inside a central safe area and away from the edges, scales long titles down to three lines, and puts the brand at the bottom where a crop is least likely to cut it.

A modern computer screen displaying web design work, showcasing creative visuals in a workspace.
Photo by Tranmautritam on Pexels

What makes a good OG image?

One idea, readable at thumbnail size:

  1. A short headline — six to ten words. Long titles become unreadable at phone size.
  2. High contrast — dark text on light, or light on dark; avoid busy photos behind text.
  3. Your brand, small — a name or logo, not a full-width banner.
  4. Different per page — a generic logo card for every URL wastes the space.

What size and format should I export?

1200×630 PNG, which is what this tool produces. Meta recommends at least 1200×630 at a 1.91:1 ratio, and LinkedIn's minimum is 1200×627. PNG keeps text crisp; switch to JPEG only for photo-heavy images that come out large.

That's also what the web has settled on: when we measured the og:image of 270 big-brand homepages in October 2026 (dataset), the median width was 1200 pixels and PNG was the most common format, 166 of 270.

Hands examining colorful fabric swatches on a table, highlighting design choices.
Photo by Helena Lopes on Pexels

How do I add it to my page?

Upload the PNG and reference it in your page head, ideally with its dimensions:

<meta property="og:image" content="https://yoursite.com/og/page.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">

Then confirm it loads and crops well with the OG image checker, and generate the rest of your tags with the meta tag generator.

One page checked. What about the rest of your site?

The free SEO audit crawls your site and scores ~90 checks across 7 areas — with the evidence and the fix for each problem.

Free · no account · crawls up to 20 pages and runs Google PageSpeed Insights. Usually 60–90 seconds.

FAQ

What is an OG image?

+

The image named in a page's og:image tag. Facebook, LinkedIn, X, Slack, Discord and messaging apps show it in the preview card when someone shares the link.

Is this OG image generator free?

+

Yes. It runs entirely in your browser with no signup, no watermark and no upload — the PNG is created on your device and downloaded directly.

Can I generate OG images automatically for every page?

+

Yes, with code. Frameworks such as Next.js can render OG images per page at build or request time. This tool is for designing the template or making images by hand.

Sources

Related free tools

All schema & social previews tools