OG Image Best Practices for 2026: Design, Dimensions, and Performance

OG images are no longer just about social media previews. In 2026, they influence visibility in AI search engines, messaging apps, content aggregators, and even desktop notifications. Getting them right means understanding both the technical constraints and the design principles that make a preview image compelling at every size.

This guide covers the specific practices that matter most, with actionable recommendations you can apply today.

Dimensions and Aspect Ratio

The standard OG image size remains 1200 x 630 pixels (1.91:1 aspect ratio). This has been stable for years and works across all major platforms:

| Platform | Recommended | Display Size | Notes | |----------|-------------|-------------|-------| | Facebook | 1200x630 | Varies by placement | Minimum 600x315 | | Twitter/X | 1200x630 | 508x265 in feed | Uses summary_large_image card | | LinkedIn | 1200x630 | 552x289 in feed | Crops slightly on mobile | | Slack | 1200x630 | ~400px wide | Scales proportionally | | Discord | 1200x630 | ~400px wide | Renders in embed | | iMessage | 1200x630 | Varies by device | Full width in chat |

Key rule: design at 1200x630, but assume it will be displayed at 400-600px wide. This means your text and visual elements need to be readable at roughly half the design size.

If you only remember one number: 1200 x 630. Do not use square images (they get cropped awkwardly), do not use vertical images (most platforms ignore or distort them), and do not go below 1200px wide (platforms may reject images under 600px).

File Size and Format

OG image file size directly affects how quickly platforms can render your preview. Slow-loading images sometimes get skipped entirely -- the platform shows a text-only preview instead.

Target: under 200 KB. This is achievable for most OG images:

PNG (100-300 KB): Best for text-heavy images, solid colors, and graphics with sharp edges. Use PNG when your OG image is primarily typography on a gradient or solid background.
JPEG (50-150 KB): Best for photographic backgrounds or complex imagery. Use 80-85% quality.
WebP (30-100 KB): Supported by most modern platforms. Smaller files with equivalent quality. Not yet universal -- some older crawlers may not handle it.

Avoid SVG for OG images. Most social platform crawlers do not render SVG and will skip the image entirely.

When using ogimg.xyz, file size is handled automatically. The API generates optimized PNG images that stay well under the 200 KB threshold for typical text-based OG images.

Text Readability at Small Sizes

This is where most OG images fail. Designers create beautiful images at full size, but forget that users see them as small thumbnails in a fast-moving feed.

Font Size Guidelines

Title text: Minimum 48px at 1200x630 design size. This renders at roughly 20-24px at typical display sizes. Below this threshold, text becomes unreadable on mobile.
Secondary text: Minimum 28px at design size. If it is not readable at display size, remove it entirely. A clean title-only image beats a cluttered image every time.
Logo/branding: Keep it small (under 15% of the image area). The point of the OG image is the content title, not your logo.

Contrast and Backgrounds

Use high contrast between text and background. A minimum contrast ratio of 4.5:1 (WCAG AA) is a good baseline, but aim higher for small text.
Avoid busy photographic backgrounds behind text. If you use a photo, add a dark overlay (60-80% opacity) behind the text area.
Test on both light and dark mode interfaces. Your OG image appears on white backgrounds (LinkedIn, Facebook light mode) and dark backgrounds (Twitter/X dark mode, Discord). Avoid images that blend into either.

Safe Zone

Keep all important content within the center 80% of the image. Platforms sometimes crop 5-10% from edges, especially on mobile and in notification previews. Do not place text or logos near the borders.

Brand Consistency

Your OG images are a branding surface. Every social share is a micro-advertisement for your site. Consistency across hundreds or thousands of pages reinforces brand recognition.

What to keep consistent:

Color palette: Use your brand's primary and secondary colors. Limit to 2-3 colors per image.
Typography: Use the same font family across all OG images. If your brand uses Inter on the website, use Inter in your OG images.
Layout structure: Keep the same general composition. Title in the same position, logo in the same corner, same text alignment.
Visual identity: If you use gradients, always use gradients. If you use solid backgrounds, stay solid. Mixing styles across pages looks inconsistent.

When using ogimg.xyz templates, select one template for your entire site and stick with it. Consistency beats variety for brand OG images.

Template Strategies for Different Content Types

Not every page on your site should use the same OG image layout. Different content types benefit from different visual approaches:

Blog posts: Title + author + category tag. Keep it text-focused so the topic is immediately clear in a feed.
Product pages: Product name + key value proposition + subtle product screenshot or icon.
Documentation: Section title + the doc site branding. Developers share docs constantly -- make these look clean and technical.
Landing pages: Primary headline + a visual that communicates the product concept. These should look more polished than content pages.
User profiles / dashboards: User's name + content summary. Useful for platforms where users share their profiles.

With ogimg.xyz, you can switch templates per content type while maintaining brand consistency through shared colors and typography.

A/B Testing Your OG Images

Most teams never test their OG images. This is a missed opportunity. Small changes in OG image design can shift click-through rates by 20-40%.

What to test:

Title length: Short punchy titles vs. longer descriptive titles
Color schemes: Dark backgrounds vs. light backgrounds
Including a description vs. title-only designs
Template style: Minimal vs. information-dense layouts

How to test:

1. Create two versions of your OG image for the same page 2. Use URL parameters or server-side logic to serve different versions to different shares 3. Track click-through rates using UTM parameters on your shared URLs 4. Run each variant for at least 100 shares before drawing conclusions

A simple approach: rotate between two templates on a weekly basis and compare referral traffic from social channels in your analytics.

AI Search Engines and OG Images

This is the significant shift in 2026. AI-powered search engines and answer engines -- including Google's AI Overviews, Perplexity, ChatGPT search, and others -- are increasingly using structured metadata to understand and surface content.

While AI search engines primarily care about page content and schema markup, OG metadata contributes to how these systems understand your page's topic and relevance. A well-structured og:title and og:description that accurately represent your content help AI systems correctly categorize and cite your pages.

Additionally, when AI search results include source links, those links often render with OG image previews. A professional OG image increases the likelihood that users click through from an AI-generated answer to your actual page.

For comprehensive AI search visibility optimization, tools like Geonapse help you audit and improve how your content appears to AI search engines -- covering structured data, content signals, and brand visibility across AI platforms. Pairing strong OG images (via ogimg.xyz) with AI visibility optimization (via Geonapse) covers both the visual and semantic sides of modern discoverability.

Performance Considerations

OG images are fetched by external crawlers, not your users' browsers during normal page visits. But performance still matters:

Crawler timeouts: Facebook's crawler gives your og:image URL about 4-5 seconds to respond. If your image generation takes longer, the crawler moves on and caches an empty preview. This cache can persist for days.
CDN caching: Serve OG images from a CDN. First-hit generation is fine, but subsequent requests should be sub-100ms.
Avoid generating at request time on your origin server: Running Puppeteer or a headless browser on your application server to generate OG images adds latency and consumes memory. Use a dedicated service or edge function.

ogimg.xyz handles this by generating images at the edge with aggressive caching. First requests generate in under 2 seconds; cached requests serve in under 50ms. This stays well within crawler timeout windows.

Quick Reference Checklist

Before shipping your OG image implementation, verify:

Dimensions are exactly 1200 x 630 pixels
File size is under 200 KB
Title text is at minimum 48px at design size
Important content is within the center 80% of the image
Text passes a 4.5:1 contrast ratio against the background
Images load in under 4 seconds from a cold cache
All meta tags use absolute HTTPS URLs
You have tested with at least two platform debuggers
Your template is consistent across all pages of the same content type

OG images are a small detail with outsized impact. Get the fundamentals right, keep your implementation automated, and every link shared from your site becomes a well-designed, click-worthy preview.