OG Image Previewer

Upload an image and preview how it will appear as a social sharing card on Twitter, Facebook, LinkedIn, Discord, Slack, and iMessage. Check aspect ratio and character limits.

Drag & drop a file here, or

JPG PNG WebP Recommended: 1200×630px, ratio 1.91:1

6 Platforms

Preview your OG image on Twitter/X, Facebook, LinkedIn, Discord, Slack, and iMessage — each with platform-accurate card styling and character limits.

Aspect Ratio Check

Warns if your image is too small, too large, or has a non-standard aspect ratio. The ideal OG image is 1200×630px with a 1.91:1 ratio.

100% Private

Your image stays on your device. The previews are rendered locally in your browser. No server upload, no storage, no tracking.

Advertisement

How it works

What are OG images and why they matter

Open Graph (OG) images are the preview thumbnails that appear when you share a URL on social media, messaging apps, or in search results. A well-designed OG image dramatically increases click-through rates — posts with compelling preview cards get significantly more engagement than plain text links. The standard OG image size is 1200×630 pixels with a 1.91:1 aspect ratio, fitting most platforms. To resize your image to the right dimensions, use the Image Resizer or the Social Media Resizer.

Dimensions and aspect ratio by platform

Twitter, Facebook, LinkedIn, Discord, and iMessage all use approximately 1.91:1 ratio. Slack uses 1.78:1 (16:9). The universal recommendation is 1200×630px which works across all platforms. Images below 600px wide may not generate a large card on Twitter. Files over 5MB may be rejected. This tool checks all these constraints automatically and warns you before you publish. To compress oversized images, use the Image Compressor.

Title and description character limits

Each platform truncates og:title and og:description at different lengths. Twitter shows about 70 characters for the title. Facebook and LinkedIn cut descriptions at 110-100 characters. Discord is the most generous at 256/350. The previewer shows truncation in real time as you type, so you can optimize your meta content for each platform. To add text directly on the image, use the Image Annotator. For cropping to specific ratios, try the Image Cropper.

How to set OG tags on your site

Add these meta tags in your HTML head: og:title, og:description, og:image (absolute URL to your image), og:url, and og:type. For Twitter-specific cards, add twitter:card with "summary_large_image" value. Most CMS platforms (WordPress, Shopify, Squarespace) have plugins or built-in fields for OG tags. After setting them, use the previewer to verify how the card looks before sharing. To generate all favicon sizes for your site, use the Favicon Generator. Explore all 92 image tools.

The most common OG image mistakes are easy to avoid once you know what to check. Using an image smaller than 600 pixels wide prevents Twitter from generating a large summary card, falling back to a tiny thumbnail instead. Forgetting to use an absolute URL for the og:image tag (starting with https://) causes many platforms to ignore the image entirely. Text-heavy OG images often have critical words cut off because each platform crops differently — Facebook centers the crop, LinkedIn crops from the top, and Twitter uses a slight center-weighted crop. Always test your card on multiple platforms before publishing.

A solid OG image workflow starts with creating or selecting your image, then running it through the Quality Analyzer to ensure resolution and sharpness are sufficient for preview cards. Next, use this previewer to check how it renders across all platforms. To test how your OG card appears to users with vision impairments, the Color Blindness Simulator checks contrast and readability. For adding a logo or brand overlay directly onto the image, the Image Watermark tool positions repeating or corner-placed marks.

If you manage multiple pages and need consistent branded cards, extract your brand colors first with the Dominant Color Analyzer to maintain visual consistency across all shared links. For converting your OG image to different formats required by specific platforms, the Format Converter handles PNG, JPEG, and WebP conversions client-side. Read our OG preview guide for tips, examples, and best practices.

Frequently Asked Questions

What is the ideal OG image size?

The universal recommendation is 1200×630 pixels with a 1.91:1 aspect ratio. This works on Twitter, Facebook, LinkedIn, Discord, Slack, and iMessage. Minimum recommended is 600×315px for a large card. Files should be under 5MB — JPEG or PNG format.

Why does my image look cropped on some platforms?

Each platform displays OG images at a fixed aspect ratio (usually 1.91:1). If your image has a different ratio, the platform crops it to fit — typically from the center. To avoid unexpected cropping, use a 1200×630px image. The previewer shows exactly how each platform will crop your image.

Does this upload my image to a server?

No. The image stays on your device. Previews are rendered in your browser using the image as a local blob URL. No data is sent to any server.

What is the difference between og:image and twitter:image?

og:image is the Open Graph standard used by Facebook, LinkedIn, Discord, Slack, and most platforms. Twitter uses its own twitter:card and twitter:image tags. For best compatibility, set both: og:image for general platforms and twitter:card="summary_large_image" with twitter:image for Twitter/X.

Why are my title and description being truncated?

Each platform has different character limits. Twitter shows about 70 characters for the title, Facebook about 60, LinkedIn about 70. Descriptions are truncated at 100-200 characters depending on the platform. The previewer shows the exact truncation in real time, with character counts per platform.

Can I preview without uploading an image?

You need to upload an image to see the visual preview. However, the title, description, and URL fields update the card text in real time. For testing existing live URLs, you can use the platform-specific debugging tools: Twitter Card Validator, Facebook Sharing Debugger, or LinkedIn Post Inspector.