All Free Tools

Meta Image Previewer

Your meta image is often the first impression of your content—on social shares, in Slack previews, in AI-generated summaries, and in search results. But each platform crops images differently: Twitter uses 1200×675, Facebook 1200×630, LinkedIn 1200×627, Slack 360×240, WhatsApp 300×157. This tool shows exactly how your content appears on every platform before you publish.

Preview meta images

Enter a URL or upload an image to see how it appears across social platforms.

How it works

1

Enter URL or upload

Provide a URL to fetch existing meta tags from any page, or upload an image directly to preview new designs.

2

View platform previews

See how your image appears on Twitter, Facebook, LinkedIn, Slack, and WhatsApp—with accurate cropping for each.

3

Optimize and deploy

Adjust your image based on previews, update your meta tags, then clear platform caches to see changes live.

Complete Guide

The Complete Guide to Meta Images for Social and AI Visibility

When your content is shared on social media, posted in Slack, or cited by AI assistants, the meta image is often the first visual impression. A compelling image can dramatically increase engagement, while a poorly cropped or missing image can undermine even the best content.

This guide covers everything you need to know about meta images: technical specifications, platform-specific requirements, design best practices, and common issues to avoid.

Understanding Meta Image Tags

Meta images are controlled by two main tag systems: Open Graph (og:) tags and Twitter Card tags. Understanding both is essential for comprehensive social optimization.

Open Graph Tags

Open Graph is the universal standard for social sharing metadata. Originally created by Facebook, it's now used by LinkedIn, Slack, WhatsApp, Discord, Pinterest, and most other platforms. Key tags include:

  • og:image — The primary image URL (required)
  • og:image:width — Image width in pixels (recommended)
  • og:image:height — Image height in pixels (recommended)
  • og:image:alt — Alt text for accessibility
  • og:title — Title displayed with the image
  • og:description — Description text

Twitter Card Tags

Twitter has its own card system that falls back to Open Graph when Twitter-specific tags aren't present:

  • twitter:card — Card type (summary, summary_large_image)
  • twitter:image — Twitter-specific image URL
  • twitter:title — Twitter-specific title
  • twitter:description — Twitter-specific description

For most sites, setting Open Graph tags is sufficient—Twitter will use them as fallbacks. Only add Twitter-specific tags if you need different content for Twitter.

Platform-Specific Requirements

Each platform displays meta images differently. Understanding these differences helps you design images that look good everywhere.

Twitter/X

Twitter supports two card types with different image requirements:

  • summary: Small square image (144×144 minimum, 1:1 aspect ratio)
  • summary_large_image: Large landscape image (300×157 minimum, 1.91:1 aspect ratio)

Most sites should use summary_large_image for maximum visual impact. The optimal size is 1200×675 pixels (16:9) or 1200×630 (1.91:1).

Facebook

Facebook displays images at 1.91:1 aspect ratio. Recommended size is 1200×630 pixels. Images smaller than 600×315 may display as smaller thumbnails in some contexts. Facebook is strict about caching—use their Sharing Debugger to refresh after updates.

LinkedIn

LinkedIn uses 1.91:1 aspect ratio with recommended size of 1200×627 pixels. LinkedIn's cropping can be unpredictable—keep important content well-centered. Use the Post Inspector to preview and refresh cache.

Slack

Slack displays link previews with images at approximately 3:2 aspect ratio, scaled to fit message bubbles. Smaller images (around 360×240 displayed size) mean text must be larger and simpler to remain readable. Slack caches aggressively—workspace admins may need to clear cache for updates.

WhatsApp

WhatsApp shows very small preview images (300×157 displayed size). Complex images and small text become unreadable. Focus on simple, bold visuals that communicate at tiny sizes. Brand recognition (logos, colors) matters more than detailed content.

Designing Effective Meta Images

Creating images that work across all platforms requires thoughtful design:

The Safe Zone

Different platforms crop images differently. To ensure important content isn't cropped, keep critical elements within the center 60% of your image. This "safe zone" approach means your logo, text, and key visuals will display correctly regardless of platform-specific cropping.

Text Guidelines

If including text in your meta image:

  • Limit to 6 words or fewer
  • Use large, bold fonts (minimum 40px at 1200px width)
  • Ensure high contrast between text and background
  • Avoid placing text near edges (crop risk)
  • Test readability at 200×105px (approximate smallest display size)

Branding Considerations

Meta images are brand touchpoints. Include your logo or brand mark for recognition, but keep it secondary to the content message. Use consistent brand colors to build recognition across multiple shared links.

Content Relevance

Generic images hurt click-through rates. Each page should have a meta image that reflects its specific content. A blog post about SEO should have an SEO-related image, not a generic company logo. Relevance drives engagement.

Technical Implementation

Image Hosting

Meta images must be hosted at absolute URLs (https://yoursite.com/images/og-image.jpg). Relative paths won't work. Ensure your image server:

  • Returns proper HTTPS with valid certificate
  • Sets correct Content-Type headers (image/jpeg, image/png)
  • Allows crawler access (check robots.txt)
  • Has reliable uptime (unavailable images break previews)

File Optimization

Large files slow preview loading and may timeout. Optimize your meta images:

  • Target 100-500KB file size
  • Use JPEG quality 80-85% for photographs
  • Use PNG only when transparency is needed
  • Consider WebP for modern browsers
  • 72 DPI is sufficient for web display

Dynamic Image Generation

For sites with many pages (blogs, products, etc.), consider dynamic meta image generation. Tools and services can automatically create images using page titles, featured images, and brand templates. This ensures every page has a relevant, properly formatted meta image without manual creation.

Common Issues and Solutions

Image Not Appearing

When meta images don't appear:

  • Verify the URL is absolute (includes https://)
  • Check that the image URL returns 200 (not 404 or redirect)
  • Confirm the server isn't blocking crawlers
  • Ensure file size is under 5MB (under 1MB preferred)
  • Validate SSL certificate if using HTTPS

Outdated Image Displaying

Platforms cache meta images aggressively. After updating:

  • Facebook: Use Sharing Debugger to scrape again
  • Twitter: Share the link to force refresh (or wait)
  • LinkedIn: Use Post Inspector
  • Slack: May require workspace cache clear

For urgent updates, consider using a new image URL (add version query parameter) to bypass caching entirely.

Poor Cropping

If important content is being cropped:

  • Center critical elements (faces, text, logos)
  • Test with our previewer before deploying
  • Use the safe zone (center 60%)
  • Consider platform-specific images if needed

Meta Images and AI Visibility

Meta images increasingly matter for AI visibility:

AI-Powered Search

Search engines like Perplexity and Bing Chat often display rich previews that include meta images. A compelling image makes your result more clickable in these contexts.

AI Citations

When AI assistants cite sources, some interfaces display preview cards that include meta images. A professional, relevant image enhances credibility.

Indirect Effects

Good meta images drive more social shares and engagement. This social signal contributes to overall authority that AI models recognize. The virtuous cycle: better images → more engagement → more authority → better AI visibility.

Using the Meta Image Previewer

Our previewer helps you verify meta images before going live. Enter any URL to fetch and preview existing images, or upload new designs to test before deployment. See exactly how each platform will display your image, identify cropping issues, and verify all meta tags are correctly set.

Testing before publishing prevents embarrassing cropping issues, missing images, and poor first impressions. The few minutes spent previewing can save your content from appearing unprofessional across millions of social shares.

Why use this tool?

5 Platform Previews

See exactly how your image appears on Twitter/X, Facebook, LinkedIn, Slack, and WhatsApp—each with accurate aspect ratios and cropping.

Fetch or Upload

Test existing pages by entering a URL, or upload new images to preview before deploying. Iterate on designs without publishing.

Accurate Cropping

Each preview shows the exact dimensions and cropping each platform uses. No more surprises when you share your link.

Meta Tag Extraction

See all your og:image, twitter:image, og:title, og:description, and other meta tags extracted and displayed clearly.

Instant Feedback

Know immediately if your image will be cropped poorly, if text will be cut off, or if the preview looks unprofessional.

Best Practice Guidance

Get recommendations on optimal image sizes, formats, safe zones for text, and design considerations for each platform.

Frequently Asked Questions

Why do meta images matter for AI and social visibility?

Meta images (Open Graph and Twitter Cards) control how your content appears when shared on social platforms, in Slack messages, in AI-generated summaries, and in search previews. A compelling image dramatically increases click-through rates—posts with images get 2.3x more engagement. When AI assistants cite your content, the meta image often appears in the preview. This tool ensures your images look perfect everywhere they might appear.

What size should my meta image be?

Use 1200×630 pixels as your default—this works well across most platforms and is the Open Graph recommended size. Twitter prefers 1200×675 (16:9) for summary_large_image cards, but 1200×630 displays fine. LinkedIn uses 1200×627, Facebook uses 1200×630. The image will be cropped differently on each platform, so keep important content (text, logos, faces) in the center 60% of the image—the "safe zone."

What's the difference between Open Graph and Twitter Card tags?

Open Graph (og:) tags are the universal standard—used by Facebook, LinkedIn, Slack, WhatsApp, Discord, and most platforms. Twitter Card tags (twitter:) are X/Twitter-specific but will fall back to OG tags if not present. Best practice: Always set OG tags, only add Twitter-specific tags if you need different content for Twitter (like a different image or card type). If your OG and Twitter content are identical, you only need OG tags.

Why does my image look different on each platform?

Each platform crops images to different aspect ratios: Twitter uses 1.91:1 (16:9 for large cards), Facebook uses 1.91:1, LinkedIn uses 1.91:1 but with different centering, Slack uses approximately 3:2, and WhatsApp uses a much smaller preview at 1.91:1. Even with the same aspect ratio, platforms may center differently or show different amounts of the image. This tool shows you exactly how each platform will display your image so you can design accordingly.

What file format and size should I use?

File format: JPEG for photographs and complex images (smaller file size), PNG for graphics with text, logos, or transparency needs, WebP for modern optimization (good support now). Avoid GIF for meta images. File size: Keep under 1MB for optimal loading—most platforms have a 5MB limit, but large images slow down previews and may timeout. Aim for 100-500KB as the sweet spot. Resolution: 72 DPI is sufficient for web display.

How do I update my meta image after publishing?

Platforms cache meta images aggressively—sometimes for days or weeks. After updating your tags, you'll need to clear each platform's cache: (1) Facebook: Use the Sharing Debugger at developers.facebook.com/tools/debug, (2) Twitter: Use the Card Validator (though it's been deprecated, sharing the link sometimes forces refresh), (3) LinkedIn: Use the Post Inspector at linkedin.com/post-inspector, (4) Slack: Clear workspace cache or wait 30 minutes. Changes may take up to 24 hours to fully propagate.

Why isn't my image showing at all?

Common causes for missing images: (1) URL isn't absolute—must include full https://yoursite.com/image.jpg, not relative paths, (2) Image is too large (>5MB) and times out, (3) Server blocks crawlers—check that Facebook/Twitter/LinkedIn can access your image URL, (4) HTTPS issues—mixed content or certificate errors, (5) Image URL returns 404 or redirect, (6) Wrong content-type header from server. Use this tool to verify your tags are correctly set and the image URL is accessible.

What text should I put on my meta image?

Meta image text best practices: (1) Keep text to 6 words or less—it must be readable at small sizes, (2) Use high contrast colors (don't rely on light text on light backgrounds), (3) Include your logo/brand mark for recognition, (4) Match the image to the page content—generic images hurt click-through, (5) Avoid text in corners—they're most likely to be cropped, (6) Test at small sizes (200×105px) to ensure readability. Remember: the title and description appear alongside the image, so don't duplicate that text in the image.

Do I need different images for different platforms?

Usually no—one well-designed 1200×630 image with content centered works everywhere. However, you might want different images if: (1) Your brand has platform-specific audiences (professional image for LinkedIn, casual for Twitter), (2) You're running platform-specific campaigns, (3) The default crop looks bad on a specific platform. To use different images, set og:image for the default and twitter:image for Twitter-specific. Most sites only need one image.

How do meta images affect AI and search visibility?

Meta images impact AI visibility in several ways: (1) AI-powered search (Perplexity, Bing Chat) often displays preview images from meta tags, (2) When AI cites your content in responses, the preview may include your meta image, (3) Rich search results sometimes pull from OG images, (4) Social signals (shares, engagement) influenced by good images indirectly affect your authority. A compelling meta image increases clicks from every source—social, search, AI, and direct links.

Want deeper insights?

Our free tools are just the beginning. Get comprehensive AI visibility monitoring with Visiblie.

View Pricing