Create an OG image (Open Graph preview image) for your website or social shares, then download the generated OGIMAGE output instantly.
<meta property="og:image" content="https://your-site.com/og-image.png" /> <meta property="og:image:width" content="1200" /> <meta property="og:image:height" content="630" />
<meta property="og:image" content="..."> snippet — already includes og:image:width, og:image:height, and a twitter:image fallback.Open Graph (OG) tags were introduced by Facebook in 2010 and adopted by virtually every platform that renders link previews: X/Twitter, LinkedIn, Slack, Discord, WhatsApp, iMessage, Pinterest, Reddit, and most chat clients. When you paste a URL into any of those, the platform's crawler reads the page's <head>, finds og:image, and renders a preview card. A page without an OG image gets a tiny favicon or no thumbnail at all — easy to scroll past.
| Property | Status | What it does |
|---|---|---|
og:title |
Required (OGP) | The card headline; falls back to <title> if missing |
og:type |
Required (OGP) | Object class — website, article, video.movie, etc. |
og:image |
Required (OGP) | Absolute URL to the preview image |
og:url |
Required (OGP) | Canonical URL used as the object's permanent ID |
og:description |
Recommended | One-to-two-sentence summary under the title |
og:site_name |
Recommended | Site label (e.g., "GitHub") shown above the card |
og:image:width / og:image:height |
Recommended | Lets crawlers reserve layout space before the image loads |
og:image:alt |
Recommended | Accessibility text; required by X/Twitter, optional for Facebook |
og:image:type |
Optional | MIME type, e.g. image/png |
og:locale |
Optional | Language territory, defaults to en_US |
twitter:card |
Required for X | Set to summary_large_image for the 1200×630 wide card |
| Platform | Recommended size | Aspect | File size cap |
|---|---|---|---|
| Facebook (link preview) | 1200×630 | 1.91:1 | 8 MB max, ideally under 1 MB |
| X / Twitter (summary_large_image) | 1200×628 | ~2:1 | 5 MB |
| LinkedIn (article preview) | 1200×627 | 1.91:1 | ~5 MB |
| Discord (large embed) | 1200×630 | 1.91:1 | No published cap; ~8 MB is safe |
| Slack (unfurl) | 1200×630 | 1.91:1 | No published cap |
| WhatsApp (chat preview) | Crawler grabs og:image; thumb rendered at ~300×200 |
— | <300 KB recommended for fast unfurl |
| 1000×1500 vertical preferred | 2:3 | 32 MB |
1200×630 is the single size that works everywhere — Facebook displays it without cropping, X uses it for summary_large_image, LinkedIn accepts it as 1200×627-equivalent, and Discord/Slack show it as a large inline card. (Facebook image best practices, Open Graph Protocol)
Facebook's own documentation recommends "images that are at least 1200 x 630 pixels for the best display on high resolution devices" and a 1.91:1 aspect ratio "to display the full image in Feed without any cropping." Because Facebook drove the early adoption of Open Graph, every other platform optimized for the same ratio — so a single 1200×630 PNG renders cleanly on X, LinkedIn, Slack, Discord, iMessage, and WhatsApp without a per-platform image.
Facebook caps the image file at 8 MB, but recommends keeping it well under 1 MB so the scraper finishes within its short timeout window. X/Twitter caps at 5 MB. LinkedIn doesn't publish a hard number but rejects very large files. For the broadest compatibility and fastest unfurl on Slack/Discord, target 200-500 KB — that's why this generator lets you export JPG (smaller) in addition to PNG.
Three common causes. (1) The crawler is hitting a stale CDN cache — paste the URL into Facebook's Sharing Debugger and click "Scrape Again" two or three times; for X, post the link from a draft account or use the in-app share preview. (2) The og:image URL is relative or http:// on an HTTPS site — it must be an absolute https:// URL. (3) Your image is hot-linked from a server that blocks bots; serve it from the same domain or a CDN that allows facebookexternalhit, Twitterbot, and LinkedInBot user agents.
twitter:image tag?Usually no. X/Twitter falls back to og:image if twitter:image is missing, which is why this generator emits both. You only need a separate twitter:image if you want a different crop for X — e.g., a wider banner for summary_large_image and a square thumbnail for the smaller summary card.
PNG if the design has flat colors, sharp text, logos, or transparency in the source — text stays crisp without JPEG ringing. JPG if the card is photo-heavy or a screenshot with gradients; you'll usually get a 3-5× smaller file at quality 85, which keeps unfurls fast. Both are accepted by every major platform; WebP is accepted by X and modern crawlers but still inconsistent on older link-preview services, so PNG/JPG is the safest export.
Two approaches. The fastest is to append a cache-busting query string to the image URL — og-image.png?v=2 — and update the og:image tag. Facebook treats the new URL as a different object and re-fetches. The second is to run the page through the Facebook Sharing Debugger or LinkedIn Post Inspector and click their refresh button; this forces their scraper to drop the cached version within minutes.
Yes — that's what services like Vercel's @vercel/og (built on the Satori HTML-to-SVG library) and Cloudflare Workers do. They render OG images at request time from page metadata, so every blog post or product page gets a unique card without manually exporting one. This generator is for the static case: brand assets, landing pages, and one-off announcements where you want pixel-perfect control. For a dynamic pipeline, build once with Satori/Resvg and cache at the CDN edge.
Facebook introduced Open Graph at its 2010 F8 conference as a way to let any web page describe itself as a rich object for the social graph. The spec is published at ogp.me and remains the canonical reference — it defines the four required properties (og:title, og:type, og:image, og:url) plus recommended and structured properties. Despite being a Facebook-originated spec, it's now the de facto standard read by every major link-preview crawler, which is why a single set of OG tags powers previews from iMessage to Slack.
Use a dedicated tool for those. For a square site icon, generate a high-res PNG here and run it through compress PNG before uploading. For a JPG variant of the OG image, see convert PNG to JPG. If you need a tighter crop for a different platform, crop image handles arbitrary aspect ratios. And if you're embedding the OG image inside a card that also needs a scannable code, QR code generator is on the same site.