OG Image Generator

What is an OG image?

An OG image is the picture a social platform embeds when somebody shares a link to your page. The Open Graph protocol was introduced by Facebook and is now used by LinkedIn, X, Slack, Discord and iMessage. The platform reads the og:image meta tag from your page head and renders the file as a preview card next to the title and description.

A 1200 by 630 pixel PNG is the most widely supported size, with a 1.91 to 1 aspect ratio that fits both feed cards and large link "unfurl" previews without cropping the artwork. This generator produces a single PNG at that exact size.

Who needs an OG image?

Anyone whose pages are shared on social platforms benefits from a consistent OG image. The most common use cases:

• 1 Websites and blogs. Articles, landing pages and product pages all link-share better with a clear preview card.
• 2 SaaS products. Each feature page, pricing page and changelog post can have its own share card.
• 3 Documentation sites. API references and how-to articles are shared on Slack and Discord; an OG image makes those links stand out.
• 4 Open source projects. A project's README link is shared in issue trackers and chat; a 1200 × 630 image rounds out the share card.

Quick Answer

The OG Image Generator turns one PNG or JPG into a 1200 by 630 pixel Open Graph preview PNG — the standard share-card size for Facebook, LinkedIn, X, Slack and Discord. The source image is letterboxed onto a white canvas so the entire image stays visible; nothing is cropped.

Requirements

Supported input

PNG or JPG, up to 10 MB. Any aspect ratio; the source is letterboxed onto a 1200×630 white canvas so the full image stays visible.

Output format

A single PNG file named og-image-1200x630.png, ready to reference from an og:image meta tag in your page head.

What it does not do

No crop, no resize, no upscale. The source is scaled to fit the 1200×630 canvas with white bars on the short sides — that is the documented behaviour, not a bug.

How it works

1. 1 Upload. Choose a PNG or JPG file up to 10 MB.
2. 2 Generate. The image is letterboxed onto a 1200 by 630 white canvas — the entire source stays visible.
3. 3 Download. Save og-image-1200x630.png and reference it from your page's og:image meta tag.

Output guide

The generator always emits a single 1200 × 630 pixel PNG. There is no ZIP and no extras. The table below is what the download contains.

Common OG image mistakes

Most share-card issues come from a missing or stale cache entry on the social platform, or from a wrong meta tag in the page head. These are the issues that come up most often.

• Using a relative path in og:image. The content attribute must be a fully qualified URL. A relative path such as /og-image-1200x630.png is interpreted relative to the current page on most platforms and fails to resolve. Use an absolute https://… URL.
• Forgetting to clear the platform cache. Facebook, LinkedIn and X each keep a cache of the og:image URL and refresh it only on demand. The first deploy of a new image usually shows the old card until the platform's debugger is used to force a re-scrape.
• Uploading a file larger than the platform limit. Most social platforms reject an og:image above about 8 MB. Keep the PNG under that limit so the platform does not silently fall back to a default card.
• Using WebP or SVG. WebP and SVG are not documented og:image types on every social renderer, so the share card falls back to a placeholder. PNG or JPG are the safe choices — both are accepted by every major platform.
• Skipping the og:image:width and og:image:height tags. Adding the explicit width and height hints helps the platform reserve the right amount of space in the feed before the image has loaded, which avoids a layout jump on the share card.

Check the output

After the generator runs, verify these four things on the actual file before you wire it into your page head. A share card that fails one of these checks usually still uploads — it just does not render the way you expect on the social feed.

• Dimensions. Confirm the file is exactly 1200 by 630 pixels. The Open Graph Protocol recommends this size and every major social platform expects it; a different aspect ratio is cropped, letterboxed or downscaled, which moves text and logos off the visible area. The MDN og:image reference lists 1200 by 630 as the recommended dimensions for a feed-share preview.
• File size. Confirm the PNG is under the social platform's published upload limit. Facebook's Sharing Debugger documents an 8 MB upper bound for an og:image; LinkedIn and X use similar limits. If the file is over the limit the platform silently falls back to a default card, which is the most common reason a freshly uploaded OG image does not appear in the share preview.
• Visual quality. Open the file in a browser at its native 1200 by 630 size and check that the headline, logo and any calls to action sit inside the safe area — not too close to the edge where LinkedIn's feed UI, X's avatar overlay, or Facebook's link preview chrome will crop them. The four symptoms of an over-compressed PNG (banding in gradients, fuzzy edges around text, washed-out colour) follow the same rules as the over-compressed image guide; re-export at a higher quality if any of them show.
• Real destination. Upload the file to its real URL on your site, then run the page through Facebook's Sharing Debugger, LinkedIn's Post Inspector and X's Card Validator to see how each platform actually renders the share card. The debuggers also force a cache re-scrape, so they double as the cure for the "old card still showing" issue above. If the meta tag is correct, the file passes the dimension and size checks, and the rendered card looks the way you expect on every platform, the OG image is ready to ship.

Sources

Each factual claim on this page — the Open Graph protocol definition, the 1200×630 social share size, the meta element syntax, and the social meta tag values — is sourced from the canonical documentation below.

• The Open Graph Protocol: https://ogp.me/ — Canonical Open Graph protocol specification, including the og:image, og:image:width and og:image:height tags.
• WHATWG HTML living standard - The meta element: https://html.spec.whatwg.org/multipage/semantics.html#the-meta-element — Definition of the HTML <meta> element and the name / property / content attributes.
• MDN - the meta name attribute: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta/name — HTML reference for the meta name attribute and the standard meta name values.
• MDN - Social meta tags: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta/name#social_meta — Reference for Open Graph and Twitter Card meta tags, including the og:image and twitter:card properties.