How to Create an OG Image

When someone pastes your link into Slack, X, LinkedIn, WhatsApp or Discord, a preview card appears. That card is generated from a few meta tags in your page's head, and the image in it — the Open Graph image — does more to decide whether anyone clicks than your title does.

Get it wrong and your link renders as a bare grey box, or worse, a crop of some random image from the page. This guide covers the size to use, the tags that make it work, and why previews so often fail to update.

Use 1200×630

One size covers every major platform: 1200×630 pixels, a 1.91:1 ratio.

This is the size X, Facebook, LinkedIn and Slack all render at full width without cropping. You do not need per-platform variants — a single 1200×630 image is the correct answer for effectively all of them, and anything smaller than 600×315 gets downgraded to a small thumbnail card instead of the large one you want.

Design for a thumbnail, not a poster

Preview cards are viewed small, often on a phone, frequently in a crowded feed. That has consequences:

• Big text. Your title should be readable at a third of the card's size. If you have to squint at 400px wide, it is too small.
• Few words. Five to ten. A card is not a paragraph.
• High contrast. Light text on a dark area, or the reverse. Mid-tone text on a photo disappears.
• Keep content away from the edges. Some clients round the corners or crop a few pixels.
• Do not put anything critical in the bottom-right. Several platforms overlay the domain or a play button there.

Make one

1. Open the OG image generator. 2. Type your page title. The preview updates live, and the text wraps to up to three lines with the font size stepping down automatically until it fits the safe area — so it will not overflow. 3. Pick a background preset, or load your own image. Your image is cover-fitted and a dark gradient scrim is laid over it, which is what keeps white text readable over a photo that might be bright, busy, or both. 4. Optionally add a subtitle and a small accent label, such as your domain. 5. Download the 1200×630 PNG.

If a single word still will not fit at the smallest size, shorten it. Long URLs are almost always the culprit.

The tags

Upload the PNG somewhere your page can reference, then add to the head of that page:

• og:image — the absolute URL of the image
• og:title — the headline for the card
• og:description — one or two lines of supporting text
• og:url — the canonical URL of the page
• twitter:card set to summary_large_image — without this, X renders a small square thumbnail instead of the wide card

The single most common mistake is a relative path in og:image. Crawlers fetch that URL from outside your site, so `/og-image.png` resolves to nothing for them. It must be the full `https://yourdomain.com/og-image.png`.

Two smaller ones worth avoiding: pointing og:image at a file behind a login or a robots-blocked path, and serving it over plain HTTP on an HTTPS page.

Compress it before you ship it

A card from a generator can be a heavy PNG, and it is fetched every time your link is unfurled — including by crawlers and chat clients that do not cache aggressively. Run it through the image compressor or convert it with the WebP optimizer first.

One caveat on format: PNG and JPG are the safe choices for og:image. WebP support among social crawlers is inconsistent, so while WebP is the right default for images on your pages, it is not yet the right default for preview cards. Compress the PNG rather than converting it.

Why your preview will not update

This is the most common frustration, and it is almost always caching rather than a mistake in your markup.

Platforms cache the unfurled preview, sometimes for days, and they do not re-fetch just because you changed the file. What to do:

1. Verify the image URL loads in a private window. If it 404s or needs a login, nothing else matters. 2. Use the platform's own debugger. Facebook's Sharing Debugger and LinkedIn's Post Inspector both re-scrape on demand, which is the reliable way to force a refresh. 3. Change the filename when you replace the image — `og-image-v2.png` rather than overwriting `og-image.png`. This sidesteps caching entirely and is the most dependable fix. 4. Check you are not serving different tags to crawlers. If the preview is built client-side by JavaScript, some crawlers will never see it. Open Graph tags must be in the HTML the server sends.

Point 4 matters more than it looks: unlike Google, most social crawlers do not execute JavaScript. Tags injected on the client are invisible to them.

One image, or one per page?

Both are legitimate:

• A single sitewide card is fine for a small site or an app. It is one file and one tag, and it never goes stale.
• Per-page cards perform better for content — blog posts, guides, documentation — because a card carrying the actual article title is far more clickable than a generic logo.

If you generate per-page cards by hand, do it for your most-shared pages rather than all of them. The long tail rarely earns the effort.

Nothing is uploaded

The card is rendered on a canvas in your browser and downloads straight from the page. Unreleased page titles and unannounced product names are exactly the sort of thing you do not want passing through someone else's server, and here they do not.

Troubleshooting

• No image in the preview at all. Usually a relative og:image URL. Make it absolute.
• A small square card instead of a wide one. Missing `twitter:card` set to `summary_large_image`, or an image below 600×315.
• The wrong image appears. A platform picked something off the page because og:image was missing, unreachable, or invalid.
• Text is cut off. Your title is too long for the safe area. Shorten it — the generator scales font size but cannot invent space.
• It looks right in one app and broken in another. Different caches expire at different times. Re-scrape with each platform's debugger, or ship a new filename.