The Authoritative Guide to Open Graph & Social Image Safe Zones, Aspect Ratios & Cropping Quirks
Comprehensive Technical Guide & Best Practices
1The 1200x630 Golden Standard & Cross-Platform Aspect Ratios
In modern social sharing, 1200 x 630 pixels (a 1.91:1 aspect ratio) is the universal golden standard for Open Graph images (og:image). Supported natively by Facebook, LinkedIn, Twitter/X, Discord, Slack, Pinterest, and WhatsApp, a 1200x630 graphic ensures sharp rendering on retina displays without excessive bandwidth consumption.
However, each social network employs distinct viewport cropping behaviors:
- Facebook & WhatsApp (1.91:1): Displays the full 1200x630 image horizontally without cropping on desktop and mobile feeds.
- Twitter / X Large Image Card (summary_large_image): Scales images to roughly 1.91:1 on web feeds, but rounds corners with an 8px border radius on iOS and Android apps.
- LinkedIn Feed Viewport (1.91:1 / 1200x627): Enforces an internal viewport of 1200 x 627 pixels. When publishing 16:9 graphics (1920x1080 or 1200x675), LinkedIn slices 24 pixels directly off the top and bottom.
- Twitter / X Small Card (summary): Crops the image into a 1:1 square thumbnail (minimum 144x144px; recommended 400x400px to 600x600px) positioned to the left of the title.
- Always design hero graphics at 1200x630 pixels (1.91:1 aspect ratio).
- Account for Twitter's rounded corner radii on mobile clients.
- LinkedIn automatically clips 24px off top/bottom on 16:9 banners.
2The 60px Safe Zone Margin & Critical Content Area
When designing social media graphics containing typography, branding marks, badges, or human faces, placing elements too close to the canvas edges causes visual clipping across different mobile devices.
Follow the 60px Buffer Margin Rule:
- Canvas Dimensions: 1200 x 630 pixels.
- Top & Bottom Margins: 60 pixels of empty buffer padding.
- Left & Right Margins: 60 pixels of empty buffer padding.
- Central Safe Zone:
1080 x 510 pixels. All text headlines, subtitle copy, company logos, and primary focal subjects must reside strictly within this 1080x510 central zone.
By confining all critical text inside the safe zone, your message remains 100% legible whether rendered on desktop browser feeds, mobile app news streams, or square widget previews.
- Keep all typography and logos within the central 1080x510px safe zone.
- Maintain a minimum 60px padding buffer on all four borders.
- Prevent mobile app UI overlays from obscuring essential value propositions.
3Crawler Payload Limits, File Formats & Cache Invalidation
Beyond visual dimensions, social crawlers enforce strict technical constraints when fetching remote social cards:
- File Size Constraints: While Facebook allows images up to 8MB and Twitter up to 5MB, best practice dictates keeping social image payloads under 1MB (ideally 100–300 KB). Social crawlers operate with strict timeout budgets (often 3–5 seconds); heavy multi-megabyte PNG files frequently cause timeout dropouts resulting in blank cards.
- Supported Formats: PNG, JPG, and WebP are universally supported. While SVG is standard in web development, social crawlers (Facebook External Hit, Twitterbot, LinkedInBot) do not render SVG open graph images. Always serve rasterized PNG or WebP assets.
- Cache Invalidation: When updating an existing social image, crawlers retain cached versions for up to 30 days. To force immediate cache invalidation across all networks, append a version query string (e.g.,
https://example.com/og.png?v=2) to yourog:imagetag.
- Optimize image file sizes between 100 KB and 500 KB to avoid crawler fetch timeouts.
- Never declare SVG files in og:image; use PNG, WebP, or JPG.
- Append cache-busting query strings (?v=2) when refreshing existing social cards.