Fix og:image Too Small: Use 1200x630 for Full-Width Previews

What's happening

The Open Graph protocol does not enforce a minimum image size, but social platforms have rendering thresholds. Facebook and LinkedIn use a 600px width cutoff: images below that width fall back to a small square thumbnail layout, while images at or above 600px wide use the large card layout with the image dominating the preview.

The recommended size is 1200x630 pixels at a 1.91:1 aspect ratio. This serves both retina displays (where 600x315 would otherwise look soft) and the 'large card' rendering on every major platform. iMessage, WhatsApp, Slack, Discord, and Telegram follow the same convention.

Common bad sizes include 400x300 (legacy thumbnail), 800x800 square (Pinterest-style), and 200x200 (favicon-as-OG). Each renders worse than a properly sized image even though the og:image tag is technically present and valid.

Why it matters

Preview real estate collapses. The large card layout occupies ~600px of feed width with the image at full bleed. The small thumbnail layout occupies ~80px with the image as a left rail. The visual difference in feed scrollers is dramatic.

Engagement drops 40-60%. Across A/B tests, large preview cards consistently outperform small thumbnail cards by a wide margin because the image gets attention before the headline text does.

Brand recognition suffers. Logos and headline-overlay designs only work at the large size; at thumbnail size they are unreadable. Without recognition cues, users do not associate the link with your brand.

Common causes

• Image was uploaded at a smaller size and never resized.
• OG image generator outputs at retina-baseline 600x315 instead of 1200x630.
• CDN downsamples images aggressively during transformation.
• Image is a logo or icon designed for a different context (favicon, header).
• WordPress thumbnail size was selected by accident instead of full size.
• OG image is a square aspect ratio (e.g., 800x800) that does not fit the 1.91:1 layout.

Detect this on your site

Run a quick scan with the OG Checker. The tool surfaces this exact issue with the records and context needed to apply the fix below.

How to fix it

1. 1

   Audit current og:image dimensions

   Crawl the site and report the served image dimensions for every og:image. The OG Checker fetches each image and reports width, height, and the resulting preview layout per platform.

2. 2

   Resize to 1200x630

   1200x630 at 1.91:1 aspect ratio. If you cannot regenerate, use any image processing tool to upscale; if quality suffers, redesign at the native size. PNG for graphic designs with text, JPG for photo-led content.

3. 3

   Update the OG image generator

   If you use Vercel OG, Cloudinary, or another generator, set the output to 1200x630. For Vercel OG, the size prop on the JSX response defaults to 1200x630 — confirm yours is not overridden.

4. 4

   Add og:image:width and og:image:height

   Declare width=1200 and height=630 explicitly. Some platforms use these values to reserve layout space and skip the actual image fetch on first render — wrong values cause layout shift.

5. 5

   Force-refresh the cache

   Facebook's Sharing Debugger and LinkedIn's Post Inspector cache previews. After resizing, paste each URL and click 'Scrape Again' to force a refresh.

6. 6

   Verify across platforms

   Test the URL on Facebook, LinkedIn, Slack, Discord, and Telegram. Each renders slightly differently — Slack and Discord crop more aggressively, LinkedIn is more lenient. The 1200x630 size works acceptably on all.

Related fixes