Every time someone shares a link to your website, a blog post, a product page, or a campaign landing page, that link renders a preview card. On Slack, on iMessage, on Twitter/X, on LinkedIn, on Facebook — the preview card shows your OG image. It's the first visual impression of every piece of content you publish, and it's the brand touchpoint that most teams treat as an afterthought.
The Open Graph protocol — defined by the og:image meta tag — tells platforms which image to use for that preview. If you don't specify one, platforms fall back to whatever image they can scrape from the page, which is usually wrong. Getting the OG image right is not a minor detail. It's the difference between a link that gets clicks and one that gets ignored.
The Technical Baseline
The OG specification recommends 1200×628 pixels as the standard size. This gives you a 1.91:1 aspect ratio. Both Facebook and LinkedIn's documentation specify this as the recommended size for link preview cards. Twitter/X has its own summary card formats, and the large-image card variant also renders at roughly 2:1.
Minimum viable: 600×314 pixels. Below that, some platforms may not render the image at all. In practice, designing at 1200×628 and exporting at full resolution is the correct target — platform compression will handle the quality reduction.
File format: JPEG for photographic OG images (higher compression efficiency), PNG for text-heavy or flat-color designs where JPEG compression artifacts would be visible. WebP is supported by most modern crawlers but not all — JPEG remains the more conservative choice for broad compatibility. File size should stay under 8MB; under 1MB is better. Most well-optimized images at 1200×628 should land between 60–200KB.
One technical trap: OG images must be at an absolute URL, not a relative path. The content of the og:image meta tag must be a complete URL including the protocol (https://). Relative paths are not supported across all scrapers and will silently fail on some platforms.
What Actually Gets Clicks
We're not saying visual appeal is the only factor in whether a shared link gets clicked — the headline, the source credibility, and the context in which it's shared all matter more than the image. But we are saying that a well-designed OG image is one of the few elements you can control after a link leaves your site, and teams that treat it as a primary design deliverable consistently see better engagement than teams that use auto-generated or scraped fallbacks.
What reads well in a 1.91:1 preview card is different from what reads well in a full-page hero. The OG image is viewed at small-to-medium size in a social feed alongside competing content. The design principles that work:
High contrast between foreground and background. Low-contrast OG images disappear in feed contexts. A beige text on light gray that reads perfectly on your website becomes near-invisible at preview card dimensions. Your OG image contrast should pass WCAG AA at body text sizes — not for accessibility compliance reasons, but because if text is legible at small text-equivalent sizes, it's legible in a preview card.
Single clear focal point. The OG image is not the place for a dense composition. One visual element — a product, a typographic lockup, a bold background treatment with a headline — reads faster and more distinctly than multiple competing visual elements. The viewer has half a second before they scroll past.
Brand identity visible without context. The OG image appears without the page title in some contexts and the URL in others. Your brand mark should be readable on the image itself. This doesn't mean the logo needs to dominate — a subtle but clearly legible logo in a corner or a brand color that's unambiguously yours is sufficient.
Common Failure Modes
Teams that haven't thought carefully about OG images tend to make the same few mistakes:
Using the hero image directly. Website hero images are often designed for 16:9 or wider aspect ratios. Pulling the hero image as the OG image usually means cropping that 16:9 image to 1.91:1, which cuts a significant portion of the composition. Elements that were carefully positioned in the full-width hero — the logo, the key product — may end up cropped or awkwardly repositioned in the narrower preview card dimensions.
No text on the image. If the page's written headline is the primary reason someone should click the link, consider whether it should also appear in the OG image. Platforms show the page title and description separately from the image in most preview card layouts, but the image is the visual anchor. Text on the image can reinforce the message or give additional context beyond what the title provides.
One OG image for all pages. A single brand OG image for the homepage makes sense. Using the same image for your blog posts, product pages, and landing pages means every link from your site looks identical in social previews — there's no way for a viewer to distinguish a link to your pricing page from a link to a three-year-old blog post. Per-page OG images, or at minimum per-category OG images with distinct visual treatment, significantly improve link differentiation.
Designing a Scalable OG System
For teams that publish content frequently — blog posts, campaign landing pages, product updates — designing a fresh OG image for every piece of content is unsustainable if each requires creative work from scratch. The solution is a template system: a set of OG image layouts within which variable content (headline text, category label, featured image) can be swapped while the brand elements (logo, color treatment, typographic style) stay constant.
A minimal OG template system needs two or three layouts: one for editorial content (blog, thought leadership), one for product pages (product-focused, more visual), and optionally one for campaign landing pages (high-contrast, CTA-oriented). With these three templates, any page on the site can get a purpose-appropriate OG image by filling in the variable slots rather than designing from scratch.
The template design itself is where craft matters. An OG template that reads clearly at 300px wide in a mobile feed, maintains brand identity, and works across the full range of content types is a design asset worth spending time on. It will be rendered millions of times if your content distribution is healthy — far more often than most assets in your brand library.
Verification Before Publishing
OG image rendering varies by platform and can behave unexpectedly when crawlers cache stale images. Before publishing a page with a new OG image, verify it using the platform's own debugging tools. Facebook, LinkedIn, and Twitter/X each have URL inspector or card validator tools in their developer consoles that let you see exactly how a URL's preview will render — and force a cache refresh when you update the image.
Crawlers typically cache OG data for 7–30 days depending on the platform. If you update an OG image on a page that's already been shared, the old image may continue rendering for existing shares until the cache expires or you force a refresh through the platform's developer tool. This is expected behavior and not a bug, but it means OG image updates to already-circulating content don't propagate instantly.
