OG Image Generator — Create 1200×630 Social Images

What is an OG image?

An OG (Open Graph) image is the picture shown when a link is shared on Facebook, LinkedIn, X, Slack, Discord, WhatsApp, iMessage and many other apps. It is declared with the og:image meta tag from the Open Graph protocol, originally created by Facebook and now read by almost every platform that renders link previews. X additionally reads twitter:card — set to summary_large_image it displays the image full-width. A clear, branded preview makes a shared link stand out in a busy feed and tells people what they’ll get before they click.

The right size: 1200 × 630

1200×630 pixels (an aspect ratio of 1.91:1) is the size Facebook recommends and it displays sharply across platforms. X’s large summary card uses a 2:1 frame, so a few pixels at the top and bottom may be cropped — this generator keeps text well inside a safe margin. Keep the file under 5 MB (X’s limit; Facebook allows 8 MB); a PNG from this tool is typically a few hundred KB, and JPEG is smaller for photo backgrounds.

Meta tags you need

<meta property="og:title" content="How to Compress Images">
<meta property="og:description" content="A practical guide…">
<meta property="og:image" content="https://example.com/og/compress.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta name="twitter:card" content="summary_large_image">

The og:image URL must be absolute (including https://) and publicly reachable — not behind a login, blocked by robots.txt or served from localhost. Declaring width and height lets Facebook render the preview on the very first share instead of waiting for the image to be fetched. Create the rest of your head tags with the Meta Tag Generator and verify the live result with the Open Graph Checker.

Design tips for link previews

• Short, large text. Previews are often shown at around 500 px wide or smaller on phones. Aim for a title of 4–10 words; the auto-fit warns you when it has to truncate.
• Don’t repeat the URL bar. Platforms already show your domain and page title under the image, so use the image for the hook, not the full headline plus description.
• High contrast. Use the darkening slider on photos so white text stays readable, and test against both light and dark app themes.
• One image per page. Unique OG images for important pages — blog posts, product pages, docs — get noticeably more attention than a single site-wide logo.
• Refreshing the cache. Platforms cache previews. After changing an image, re-scrape the URL in Facebook’s Sharing Debugger or LinkedIn’s Post Inspector, or give the file a new name.

In Webflow, set the image per page under Page settings → Open Graph settings, or bind it to an image field for CMS collection pages.

Tools that pair well with the OG Image Generator

• SERP Preview — Write a title tag and meta description and see exactly where Google is likely to cut them off — measured in pixels, not just characters, on desktop and mobile.
• Image Resizer — Resize a photo to exact pixel dimensions or a percentage, crop it to fill a social-media size, or fit it inside a frame with a background colour — all locally in your browser.
• Image Compressor — Shrink photos and graphics by 50–90% without visible quality loss.
• Image to Base64 — Turn a PNG, JPEG, SVG, WebP or GIF into a Base64 data URI with copy-ready CSS and HTML — or paste a Base64 string to preview and download the image.