Free OG Image Generator

This generator draws an Open Graph image in your browser. Enter a title, pick a template and size, then download a PNG or JPG for your og:image tag. Nothing is uploaded and you do not need an account.

Preview

1200 × 630

Contrast —

Export

PNG · JPG · WebP

Meta tags

<meta property="og:image" content="https://yoursite.com/og-image.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta name="twitter:card" content="summary_large_image" />

Edit

Content

23 / 120

35 / 160

Style

Ready themes

Background
Logo / image
Size

Add it to your site

Host the downloaded file on your domain, then put these tags in the document head. Width and height follow the preset you selected above.

<meta property="og:image" content="https://yoursite.com/og-image.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta name="twitter:card" content="summary_large_image" />

Framework notes

Place the tags in the <head> of the page you want people to share. Host the PNG or JPG at a stable HTTPS URL and use that full URL in og:image — relative paths fail in most crawlers. Deploy the HTML, then scrape the live URL.

How to create an OG image

  1. Write the title people will see in the feed. Keep it short enough to read at a glance. A subtitle is optional; skip it if it repeats the headline.
  2. Choose a template and a size preset. Leave Open Graph 1200×630 selected unless you know you need a square, a tall pin, or an X-sized card.
  3. Set colours that match your site. If you upload a photo, raise the dark overlay until the type stays readable. Turn on the safe-area guide and keep words inside the box.
  4. Download PNG for sharp text, or JPG if the file is heavy. Host that file on your domain at a URL that will not change every deploy unless you plan to recache.
  5. Add the meta tags from this page to your document head, using the real https URL of the file. Then scrape the live page in a platform debugger or thelink preview checker.

What is an Open Graph image?

An Open Graph image is the picture a chat app or social network shows when someone pastes your URL. The Open Graph protocol defines a small set of meta tags. og:imageis the one that points at that picture. Facebook popularised the tags; LinkedIn, Slack, iMessage and many others still read them. X uses similar tags (and Twitter Card tags) for large summary images.

Without an og:image, the crawler guesses. You might get a random crop from the article, a tiny icon, or a blank box. A dedicated 1200×630 graphic with a readable title is more predictable than hoping the first photograph in the HTML is the right one. The file must be reachable with a normal GET request. Crawlers do not log in, run your single-page app, or wait on a client-side router.

You still need og:title andog:description for the text next to the picture. This generator only builds the image. Pair the PNG with those tags on the same page you intend to share.

Best OG image size and format

For a single file that works almost everywhere, export 1200×630 pixels (about 1.91:1). Facebook, LinkedIn and WhatsApp link previews all sit near that ratio. X large cards are close; this tool’s Twitter/X preset uses 1200×675 if you want a dedicated file. Square 1080×1080 and Pinterest 1000×1500 exist for those crops, not as a replacement for the default OG size.

PNG is the right default when the image is type on a flat or gradient background. JPG is reasonable when you start from a photograph and need a smaller download. Stay under a megabyte. Several platforms refuse or recode huge files, and a slow image delays the preview. SVG is a poor og:image: crawlers expect a raster. WebP support is still uneven, so prefer PNG or JPG for the tagged file.

Leave padding around the title. Some apps letterbox or crop toward the centre. The safe-area overlay on this page is a guide, not a guarantee. For a table of platform sizes, see thesocial media image size guide.

Common OG image mistakes

  • Text too small. A headline that looks fine on a 27-inch monitor can vanish in a mobile feed. Use the auto-fit option and check the preview at the width of a phone.
  • Wrong ratio. A vertical story frame tagged as og:image will be cropped. Start from 1200×630 unless you control the destination.
  • File too large. Multi-megabyte PNGs fail silently on some crawlers. Compress or switch to JPG and watch the size warning above.
  • Relative URL./og.png is not enough. Usehttps://your-domain/og.png.
  • Cached preview. Replacing a file at the same URL often does nothing until you force a rescrape. Change the path or query string, then run the debugger.

OG image not showing?

If the live page has a valid, absolute og:image and the file returns 200 to anonymous requests, the usual leftover problem is cache. Facebook Sharing Debugger, LinkedIn Post Inspector and X’s card validator each have a scrape or refresh button. Run them after you deploy, not only after you save a local file.

Also confirm the tag is in the HTML source, robots.txt does not block the image, and the certificate is valid. A longer checklist will be published inGuides.

Frequently asked questions

Answers about this generator: cost, privacy, size, file type and stubborn social caches.

Is the OG Image Generator free?

Yes. You can design a share image, download PNG or JPG, and copy the meta tags without paying or creating an account. Exports have no watermark. If a paid plan is added later, it will be optional and clearly labelled. The generator runs in your browser, so hosting cost is the only reason ads may appear on the site later.

Are my images uploaded anywhere?

No. Titles, logos and background photos stay in this browser tab. Drawing happens on a canvas in local memory, and Download saves a file to your device. Closing the tab discards the working image. SocialImageKit does not receive the PNG, and there is no account that could store it.

What is the best size?

Use 1200×630 pixels for a generic Open Graph image. That ratio also covers Facebook, LinkedIn and WhatsApp link previews. Switch the preset to 1200×675 for X, 1080×1080 for a square crop, or 1000×1500 for Pinterest. Keep important text inside the safe-area guide so platforms that crop still show a readable title.

Should I export PNG or JPG?

PNG is the safer default for headlines and simple graphics because edges stay sharp. JPG helps when you use a photo background and the PNG is large. Keep the file under a megabyte so crawlers fetch it quickly. Avoid SVG for og:image; several platforms will not render it as the share picture.

Can I use the images commercially?

Yes. Images you generate are yours to use on your own sites, products and campaigns. Do not upload logos or photos you do not have rights to. SocialImageKit does not claim the PNG. Check the licence of any background photo or brand mark you add before you publish.

Why does my social preview not update?

Apps cache og:image aggressively. After you replace the file, re-scrape the page in Facebook Sharing Debugger, LinkedIn Post Inspector or X’s card validator. If the URL did not change, add a query string or a new path. Confirm the tag exists in the first HTML response, not only after client-side JavaScript runs.