OG images that actually get clicks (sizes, design, and implementation)
Your link gets shared on X. On LinkedIn. In a Slack channel with 200 people. On Discord. In iMessage.
What shows up next to that link determines whether anyone clicks it. That's your OG image — the preview card that platforms generate when someone pastes a URL. And most developers either skip it entirely or throw up a random screenshot and call it done.
Here's the thing: a link with a proper OG image gets significantly more engagement than one without. Not marginally more. The preview image is often the single largest visual element in someone's feed. It's your billboard on someone else's platform.
The correct sizes (because every guide gives different numbers)
The OG image spec says 1200x630 pixels. That's the number to use.
Here's why: Facebook originally defined Open Graph, and they standardized on a 1.91:1 aspect ratio. Twitter adopted it. LinkedIn adopted it. Discord, Slack, and iMessage all followed. 1200x630 gives you that ratio at a resolution that looks sharp on high-DPI screens without being unnecessarily large.
Some platforms will crop slightly. X tends to crop a few pixels from each edge. LinkedIn sometimes centers and crops for mobile layouts. Discord preserves the full image. The practical implication: keep important content — text, logos, key visuals — away from the outer 5% of the image.
Other sizes you'll see recommended: 1200x628 (functionally identical, just 2 pixels shorter), 1200x675 (16:9 ratio — this gets cropped on most platforms), and 800x418 (too small for retina displays). Stick with 1200x630 and you cover every platform without worrying about it.
What makes someone click (and what gets scrolled past)
The most effective OG images share three traits: they're readable in a feed, they communicate one idea, and they look intentionally designed rather than auto-generated.
**Text should be large enough to read at thumbnail size.** When your link appears in a feed on mobile, the OG image might display at 400 pixels wide. If your title text is small, it becomes illegible. Use a minimum of 48px font size for headlines (at 1200px canvas width). Test by shrinking the image to 40% — if you can still read the title, it works.
**One clear visual hierarchy.** The strongest OG images have a title, optionally a subtitle or author, and a brand element. That's it. Don't try to fit a paragraph of text, three icons, a logo, and a background photo. Social previews are not infographics.
**Color contrast matters more than aesthetics.** A dark background with light text works. A light background with dark text works. A complex gradient with medium-contrast text over a busy photo? That fails at thumbnail size. High contrast is more important than being clever.
**Brand consistency builds recognition.** If every blog post from your site uses the same visual template — same fonts, same color scheme, same layout — people start recognizing your links in their feed before they even read the title. That's a significant advantage when you're competing for attention in a crowded timeline.
How to add OG images to your site
The implementation is straightforward. Add these meta tags to the `<head>` of every page that might get shared:
```html <meta property="og:image" content="https://yoursite.dev/og.png" /> <meta property="og:image:width" content="1200" /> <meta property="og:image:height" content="630" /> <meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:image" content="https://yoursite.dev/og.png" /> ```
A few things that trip people up:
The image URL must be absolute. `/images/og.png` won't work — platforms can't resolve relative paths because they're fetching from their own servers, not yours. It needs to be `https://yoursite.dev/images/og.png`.
The image must be publicly accessible. If it's behind authentication, a CDN that requires cookies, or a localhost URL, platforms will show a blank preview. Test by pasting the image URL directly in an incognito browser.
File size matters. Platforms have limits — X recommends under 5MB, LinkedIn under 5MB, Facebook under 8MB. But for speed, keep it under 200KB. PNG for text-heavy images, JPEG for photos.
twitter:card must be set to summary_large_image for the large preview format. Without this, X defaults to a small square thumbnail that buries your title text.
Per-page vs. site-wide images
For a homepage or simple site, one OG image for the whole site works fine. But for a blog or product site with many pages, you want per-page OG images. Each blog post should have its own preview image with its title on it.
The reason is simple: when someone shares a specific blog post, the OG image should tell the viewer what that post is about. If every shared link from your site shows the same generic brand image, people can't tell what they're clicking on.
Two approaches to per-page images: generate them at build time (popular with frameworks like Next.js, Astro, and Hugo), or use a tool to create them manually. Build-time generation is better for large sites; manual creation is fine for sites with fewer than 50 pages.
If you want a quick way to create OG images without setting up a build pipeline, we built a free [OG Image Generator](/tools/og) — pick a style, type your title, download the PNG. Eight presets, no signup.
Common mistakes that kill your click-through
**No OG image at all.** This is the most common problem. Platforms will either show nothing, auto-select a random image from your page (often a tiny icon or tracking pixel), or show a generic placeholder. Always set an explicit og:image.
**Using your logo as the OG image.** A 200x200 logo stretched to 1200x630 looks terrible and communicates nothing about what the page contains. If you must use a logo, incorporate it as a small element within a properly sized image.
**Forgetting to test.** You can't see your OG image by looking at your source code. You need to actually share the URL (or use a preview tool) to see what platforms render. X, LinkedIn, and Facebook all cache OG images aggressively — if you update your image, you may need to use their cache-clearing tools to see the change.
**Different platforms, different caching.** X's cache is cleared via the Card Validator. Facebook uses the Sharing Debugger. LinkedIn requires a post inspector URL. Each platform caches independently. Updating the image on your server doesn't update it everywhere instantly.
**Text too small for mobile.** Test your OG image at roughly 400px wide (about one-third of 1200px). If the title isn't legible, increase the font size. Most people will see your preview card on a phone.
The meta tags companion
OG images are one piece of the social preview puzzle. The other pieces — og:title, og:description, twitter:card, and the rest — control the text that appears alongside your image. If you want the full breakdown of every meta tag your site needs, we covered that in [Every meta tag your site actually needs](/blog/every-meta-tag-your-site-actually-needs). And if you want to generate the complete set of meta tags with live previews for each platform, try the [Meta Tag Generator](/tools/meta).
The 5-minute version
If you're here for the shortest possible path to good OG images: create a 1200x630 image with your page title in large, high-contrast text on a solid or simple gradient background. Add your brand name or URL in a smaller font. Save as PNG under 200KB. Add the five meta tags listed above to your page head. Test by sharing the URL. Done.
If you want to skip the image editor entirely, our [OG Image Generator](/tools/og) does this in about 30 seconds. Eight style presets, just type your title and download.