Social Media Preview Images: The Complete 2026 Guide
Every time someone shares your link — on Twitter, LinkedIn, Slack, Discord, iMessage, or WhatsApp — the platform generates a preview card. That card's image is your first impression. And in 2026, with billions of links shared daily, getting your social media preview images right isn't optional. It's the difference between a link that gets clicks and one that gets scrolled past.
This guide covers everything: exact size requirements for every major platform, the technical implementation behind Open Graph images, Twitter Cards, LinkedIn previews, and proven best practices for maximizing engagement. Whether you're a developer, marketer, or founder — this is the definitive reference for social share images in 2026.
Table of Contents
- What Are Social Media Preview Images?
- Why Preview Images Are Critical for Engagement
- 2026 Image Size Requirements by Platform
- Open Graph Images Explained
- Twitter/X Cards: Types & Specs
- LinkedIn Link Preview Images
- Messaging Apps: Discord, Slack, WhatsApp & More
- Best Practices for Maximum Engagement
- How to Generate Preview Images Automatically
- Testing & Validation Tools
What Are Social Media Preview Images?
Social media preview images — also called link preview images, social share images, or OG images — are the visual thumbnails that platforms display when a URL is shared. They're pulled from meta tags in your page's HTML, specifically the og:image meta property.
The technology behind this is the Open Graph protocol, created by Facebook in 2010. When a platform's crawler encounters a shared URL, it fetches the page, reads the Open Graph meta tags, and constructs a rich preview card with a title, description, and image. Twitter has its own extension called Twitter Cards, and LinkedIn uses a combination of OG tags and its own crawler behavior.
Without a defined OG image, platforms either show a blank preview, pull a random image from your page (often the wrong one), or display a tiny favicon — none of which inspire confidence or clicks.
Why Preview Images Are Critical for Engagement
Preview images are your content's storefront window. In a feed crowded with posts, a visually compelling preview card stops the scroll.
Beyond raw numbers, preview images serve three crucial functions: brand recognition (people learn to recognize your visual style), content signaling (the image tells users what to expect before clicking), and credibility (a polished preview implies a polished product).
In B2B contexts, this matters even more. When someone shares your SaaS link in a Slack channel or Teams thread, the preview image is often what determines whether a decision-maker clicks through. A missing or generic image signals "not ready for prime time."
2026 Image Size Requirements by Platform
Each platform has specific image requirements. Here's the definitive reference for 2026:
| Platform | Recommended Size | Aspect Ratio | Max File Size | Format |
|---|---|---|---|---|
| 1200 × 630 px | 1.91:1 | 8 MB | PNG, JPEG, GIF | |
| Twitter/X | 1200 × 628 px | 1.91:1 | 5 MB | PNG, JPEG, GIF, WEBP |
| 1200 × 627 px | 1.91:1 | 5 MB | PNG, JPEG | |
| Discord | 1200 × 630 px | 1.91:1 | 8 MB | PNG, JPEG, GIF |
| Slack | 1200 × 630 px | 1.91:1 | 5 MB | PNG, JPEG |
| 1200 × 630 px | 1.91:1 | 5 MB | PNG, JPEG | |
| iMessage | 1200 × 630 px | 1.91:1 | N/A | PNG, JPEG |
| Telegram | 1200 × 630 px | 1.91:1 | 5 MB | PNG, JPEG |
🎯 The Universal Safe Size
1200 × 630 pixels at a 1.91:1 aspect ratio works perfectly across every major platform in 2026. Use PNG for text-heavy graphics and JPEG for photo-heavy images. Keep file size under 1 MB for the fastest loading, though most platforms accept up to 5–8 MB.
Open Graph Images Explained
The Open Graph protocol is the foundation that powers preview images across most platforms. Here are the essential meta tags you need:
<!-- Essential OG Tags --> <meta property="og:title" content="Your Page Title" /> <meta property="og:description" content="A compelling description" /> <meta property="og:image" content="https://yoursite.com/og.png" /> <meta property="og:image:width" content="1200" /> <meta property="og:image:height" content="630" /> <meta property="og:image:alt" content="Description of the image" /> <meta property="og:url" content="https://yoursite.com/page" /> <meta property="og:type" content="website" /> <meta property="og:site_name" content="Your Site Name" />
Key rules: the og:image URL must be absolute (not relative) and served over HTTPS. Including og:image:width and og:image:height helps platforms render the preview faster without needing to fetch and measure the image first.
The og:image:alt tag is often overlooked but serves two purposes: accessibility for screen readers and providing fallback text if the image fails to load. Always include it.
Twitter/X Cards: Types & Specs
Twitter uses its own card system alongside OG tags. The two main types you'll use:
summary_large_image
The most common card type. Displays a large image above the title and description.
- • Image: 1200 × 628 px (min 300 × 157)
- • Aspect ratio: 2:1 (1.91:1 works)
- • Max file size: 5 MB
- • Title: max 70 characters
- • Description: max 200 characters
summary
A compact card with a small square thumbnail on the left.
- • Image: 144 × 144 px (min 120 × 120)
- • Aspect ratio: 1:1
- • Max file size: 5 MB
- • Title: max 70 characters
- • Description: max 200 characters
<!-- Twitter Card Tags --> <meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:site" content="@youraccount" /> <meta name="twitter:title" content="Your Page Title" /> <meta name="twitter:description" content="Compelling description" /> <meta name="twitter:image" content="https://yoursite.com/og.png" /> <meta name="twitter:image:alt" content="Image description" />
Pro tip: Twitter will fall back to OG tags if Twitter-specific tags are missing. However, for maximum control, always include both. The twitter:image takes precedence over og:image on Twitter, so you can serve different images per platform if needed.
LinkedIn Link Preview Images
LinkedIn's link previews are especially important for B2B content. The platform uses OG tags but has some specific behaviors worth noting:
Recommended size: 1200 × 627 pixels. LinkedIn crops slightly differently than Twitter, so test your images specifically here.
Aggressive caching: LinkedIn caches preview images heavily. If you update your OG image, use the LinkedIn Post Inspector to force a re-fetch.
Article posts vs link posts: When sharing a URL as a post, the OG image appears prominently. For article-format posts, LinkedIn uses its own cover image field.
Text placement matters: LinkedIn displays the title and domain below the image. Avoid putting critical text at the very bottom of your OG image — it'll visually compete with the overlay.
Messaging Apps: Discord, Slack, WhatsApp & More
Messaging and collaboration platforms are where many link previews are seen first — especially in professional contexts:
Discord
Discord shows rich embeds using OG tags with the image displayed inline. It supports both large images (1.91:1) and square thumbnails. Discord also reads og:site_name and displays it as the embed's author. The accent color on the left side of the embed is pulled from the theme-color meta tag.
Slack
Slack unfurls links automatically, showing OG image, title, and description in a compact card. Slack respects OG tags but also supports twitter:image as fallback. Large images display inline; smaller ones appear as thumbnails. For B2B SaaS products, Slack previews are often where decision-makers first encounter your product.
WhatsApp & Telegram
Both apps generate link previews using OG tags. WhatsApp shows a smaller preview card with a square-ish crop, so ensure your key visual elements are centered. Telegram displays a larger, more generous preview and also supports instant view for certain page structures.
iMessage
Apple's iMessage generates link previews using OG tags and tends to display them as large bubbles. It's one of the more forgiving platforms in terms of cropping, but always test. The Apple crawler can be slow to fetch images, so ensure your image CDN responds quickly.
Best Practices for Maximum Engagement
Creating the image is only half the battle. These best practices will maximize the impact of your social media preview images:
1. Brand Consistency is Non-Negotiable
Every OG image should be immediately recognizable as yours. Use your brand colors, fonts, and visual style consistently. Over time, this builds recognition — people start clicking your links because they recognize the preview.
2. Keep Text Large and Readable
Preview images are often displayed at small sizes, especially on mobile. Use a minimum 40px font for headlines and limit text to 5–8 words. If the text isn't readable at 400px wide, it's too small.
3. Use the Center 80% Safe Zone
Different platforms crop preview images differently. Keep all critical elements — text, logos, key visuals — within the center 80% of the image. The outer edges may be cropped on certain platforms.
4. Make Each Page Unique
A generic site-wide OG image is a missed opportunity. Page-specific images that reflect the content title perform dramatically better. Tools like BrandSnap can generate unique images at scale, so there's no excuse for using the same image everywhere.
5. Avoid Text Over Complex Backgrounds
Text overlaid on busy photos or gradients is hard to read at small sizes. Use solid backgrounds, subtle patterns, or strong contrast to ensure readability. Dark text on light backgrounds or light text on dark backgrounds — keep it simple.
6. Optimize File Size
Aim for 200–500 KB. Large images slow down preview generation, and some platforms timeout if the image takes too long to fetch. Use PNG for text-heavy graphics and JPEG at 85% quality for photo-heavy images.
7. Include Your Logo (Subtly)
A small logo in the corner reinforces brand recognition without dominating the design. Most platforms also show the domain name below the image, so the logo is a secondary branding element — not the primary one.
8. Test on Every Platform Before Publishing
What looks perfect on Twitter might get cropped oddly on LinkedIn or WhatsApp. Always validate with platform-specific tools before going live with a new OG image.
How to Generate Preview Images Automatically
Manually designing preview images for every page doesn't scale. Here are the main approaches to automating the process:
Code-based (Vercel OG, Satori): Write JSX components that render as images. Full programmatic control but requires developer time and results often look plain. Best for teams with dedicated front-end developers.
Template-based (Placid, Bannerbear): Design a template once, then generate variations via API with dynamic data. More polished than code-based but templates can feel rigid.
AI-powered (BrandSnap): Enter a URL and AI analyzes your brand to generate unique, professional preview images in seconds. No design skills, no coding, no template tweaking. BrandSnap generates OG images, social media banners, and favicons from a single URL — making it the fastest path from zero to polished social previews.
Why BrandSnap for Preview Images
BrandSnap isn't just an OG image generator — it creates your entire social media visual identity. Enter your URL, choose from 10 AI design styles, and get perfectly sized images for every platform: OG images (1200×630), Twitter headers (1500×500), LinkedIn banners (1584×396), and more. Every image uses your actual brand colors and typography, so they look custom-made — not template-generated.
Testing & Validation Tools
Always validate your preview images before going live. Here are the official tools for each platform:
Facebook Sharing Debugger
Validates OG tags, shows preview, clears cache
Twitter Card Validator
Preview Twitter card rendering
LinkedIn Post Inspector
Validates and re-fetches LinkedIn preview
Open Graph Checker (opengraph.xyz)
Multi-platform preview in one tool
Debugging tip: If your preview image isn't updating, it's almost always a caching issue. Use the platform's debugger/inspector tool to force a re-fetch. Also verify that your server returns the correct Content-Type header for the image and that it loads in under 5 seconds.
Generate Perfect Preview Images in Seconds
Stop designing OG images manually. BrandSnap creates perfectly sized social media preview images for every platform — from a single URL.
Related Articles
How to Create OG Images for Your Website (2026 Guide) →
Step-by-step guide to creating and implementing OG images with manual and automated approaches.
How to Add Open Graph Tags to Next.js, React, and WordPress →
Technical tutorial with code examples for implementing OG tags across popular frameworks.
BrandSnap vs Canva for OG Images: Which Is Better for Developers? →
An honest comparison of BrandSnap and Canva for the developer and SaaS use case.