Blog Developer 6 min read

OG Image Preview — Test How Your Link Looks on Social Media

You share a link on Twitter. The card looks wrong — image cropped, title cut off, description mangled. You fix it, redeploy, purge cache, share again. Still wrong. There's a faster way to check this before deploying.

OG image preview — test social media card appearance before sharing

Open Graph (OG) tags control how your page appears when someone shares it on social media, in chat apps, or in any platform that unfurls link previews. The og:image, og:title, and og:description meta tags determine the card that billions of people see daily in their feeds. Get them wrong, and your carefully designed page gets shared with a blurry image, a truncated title, or no preview at all.

Try it free: OG Image Previewer — Preview how your links appear on social media. Runs in your browser, no signup needed.

The OG Image Previewer lets you test your image, title, and description against six platforms — Twitter/X, Facebook, LinkedIn, Discord, Slack, and iMessage — before you deploy. Upload your image, type your title and description, and see exactly how each platform will render your card. Everything runs locally, no URLs to publish first.

The 1200×630 Standard

If you remember one number from this article, make it 1200×630. That's 1200 pixels wide, 630 pixels tall, with a 1.91:1 aspect ratio. This is the de facto standard that every major platform handles correctly.

Twitter, Facebook, LinkedIn, Discord, Slack, and iMessage all display link cards at approximately 1.91:1. If your image matches this ratio, it shows without cropping on every platform. If it doesn't — say you use a 1200×1200 square image — each platform crops it differently, usually from the center, cutting off the top and bottom. Important content at the edges disappears.

The minimum size for a large card is 600×315 pixels. Below that, some platforms fall back to a small thumbnail instead of a full-width card. But 1200×630 is better because high-density screens (Retina, HiDPI) display twice the pixels per CSS unit. A 600-wide image looks sharp on a standard screen but soft on a modern phone. 1200 pixels covers both.

For creating images at exactly the right dimensions, the Image Resizer has social media presets including the 1200×630 Facebook post size. For more platform-specific dimensions (Instagram, YouTube, LinkedIn banner), the Social Media Resizer covers the full spectrum.

Title and Description: Character Limits by Platform

Every platform truncates at a different point. Write your title and description for the smallest limit and they'll work everywhere.

Title safe zone: under 60 characters. Twitter shows about 70 characters, Facebook about 60, LinkedIn about 70. At 60 characters, your title displays in full on all three. Beyond that, you're gambling on which platform the reader uses.

Description safe zone: under 120 characters. Twitter allows about 125, Facebook about 155, LinkedIn less. At 120 characters, you're safe everywhere. The description is secondary to the image and title — think of it as a single sentence that adds context, not a paragraph.

The previewer shows character counts and truncation for each platform in real time as you type. This is faster than deploying, sharing, and checking — especially when you need to iterate on wording.

See how your link card looks on Twitter, Facebook, LinkedIn, Discord, Slack, and iMessage before sharing.

Preview OG Image →

Setting OG Tags on Your Site

OG tags go in the <head> section of your HTML page. The essential ones for link previews are og:image, og:title, og:description, and og:url. For Twitter, add twitter:card, twitter:image, and optionally twitter:title and twitter:description.

A minimal set that works everywhere:

<meta property="og:title" content="Your Page Title">

<meta property="og:description" content="A one-sentence description.">

<meta property="og:image" content="https://yoursite.com/og-image.jpg">

<meta property="og:url" content="https://yoursite.com/page">

<meta name="twitter:card" content="summary_large_image">

Three critical details: the og:image URL must be absolute (starting with https://), not relative. The image must be publicly accessible — no authentication, no robots.txt blocking. And the URL must resolve to an actual image file, not a redirect chain that times out.

Common OG Image Mistakes

Text too close to edges. Platforms crop images at the edges, especially on mobile. Keep important text and logos in the center 80% of the image. A title that touches the left edge of your 1200×630 image will be partially hidden on some platforms.

Too much text. OG images work best as visual hooks — a bold title, a simple illustration, brand colors. Cramming paragraphs of text into the image makes it unreadable at the small sizes platforms display it. If you need text, keep it under 10 words at a large font size.

Low contrast. Many platforms display link cards in both light and dark modes. An image that looks great on a white background might blend into a dark feed. Test your image against both backgrounds. The Contrast Checker can verify text-to-background contrast ratios.

Wrong format. JPEG and PNG are universally supported. WebP is also widely supported as of 2026. SVG is not supported as an OG image by most platforms. If your OG image is in SVG, convert it to PNG first with the SVG to PNG converter.

Missing Twitter tags. If you only set og:image, Twitter/X may use it — but the card type defaults to "summary" (small square thumbnail) unless you explicitly set twitter:card="summary_large_image". Always set both OG and Twitter meta tags for control on every platform.

Testing Workflow

Before deployment. Use the OG Image Previewer to test your image, title, and description against all six platforms locally. No need to deploy anything. Iterate on the image design and copy until the cards look right everywhere. This saves the deploy-share-check-fix cycle.

After deployment. Once the page is live, verify that platforms can fetch your OG tags. Use the Facebook Sharing Debugger to force a re-scrape, the Twitter Card Validator to check the card, and the LinkedIn Post Inspector for LinkedIn. These tools fetch your actual live URL and show what the platform sees.

Cache issues. Platforms cache OG data aggressively. If you update your OG image or title and the old version still shows when sharing, force a cache refresh through the platform debugger tools. Sharing the URL in a private message to yourself is another way to trigger a fresh fetch.

If you're generating OG images for multiple pages, keep a consistent template: same dimensions (1200×630), same background style, same font, same logo placement. The Image Watermark tool can add your logo to images in a consistent position.

Common Questions

What's the best OG image size? 1200×630 pixels (1.91:1 ratio). Works on every platform without cropping. Minimum 600×315 for large cards.

Why does my link show no image? Missing or incorrect og:image tag, relative URL instead of absolute, image file not publicly accessible, or platform cache showing stale data. Use the platform debugger to diagnose.

Do I need both og:image and twitter:image? For full control, yes. Facebook, LinkedIn, Discord use og:image. Twitter uses twitter:image with twitter:card. Twitter falls back to og:image if its own tags are missing, but the card type may default to a small thumbnail.

How long can the title and description be? Keep titles under 60 characters and descriptions under 120 characters to avoid truncation on any platform.

The Card People Actually See

When someone shares your link, the OG card is your page's first impression. It's not the page itself — it's a small image and two lines of text in a feed full of other cards. Getting the image size right, keeping the title punchy, and testing across platforms takes five minutes with the OG Image Previewer. Five minutes that determine whether people click through or scroll past.

Preview OG Image
Share:
S

Scanly.co — 92 free image analysis tools

Photo forensics, metadata, privacy, OCR, and utilities. All client-side.

Advertisement