Back to Free Tools

Open Graph Preview — See How Links Appear on Facebook, Twitter & Slack

See exactly how your links will look when shared on Facebook, Twitter/X, Google, Slack, and Discord. Enter your Open Graph meta tags, preview across platforms, generate copy-ready HTML, and get a completeness score out of 100.

All processing happens in your browser. No data is sent to any server.
0 / 60 chars
0 / 155 chars
(auto-filled from og: fields)
(auto-filled from og: fields)

Completeness Score

10

Needs work

Completeness Checklist

og:title is set
og:description is set
og:image is set
og:url is set
og:site_name is set
twitter:card is set
Title length <= 60 chars
Description length <= 155 chars
Image URL is valid (https://)
URL format is valid

Preview Panels

No image set

example.com

No title set

No description set

Actual display may vary by platform

How It Works

1

Enter Your Meta Tags

Fill in your og:title, og:description, og:image URL, og:url, og:site_name, and choose a twitter:card type. Twitter fields auto-fill from OG values.

2

Preview Across Platforms

Switch between Facebook, Twitter/X, Google SERP, and Slack/Discord tabs to see how your link will appear on each platform in real time.

3

Optimize & Export

Follow the completeness checklist to hit 100/100, then copy the generated HTML meta tags to paste into your page head.

Why Preview Your Open Graph Tags?

Maximize Click-Through Rate

Links with optimized titles, descriptions, and images get 2-3x more clicks when shared on social media. A broken or missing preview kills engagement.

100% Private & Browser-Based

No data leaves your browser. No account required, no URL fetching, no CORS issues. Enter your tags manually and preview instantly.

Multi-Platform in One Place

Instead of checking Facebook Debugger, Twitter Card Validator, and Google separately, preview all four platforms side by side in a single tool.

What Is Open Graph and Why Does It Matter?

Open Graph is a protocol originally created by Facebook that lets you control how your web pages are represented when shared on social media. When someone shares a link on Facebook, Twitter, LinkedIn, Slack, Discord, or iMessage, the platform reads your Open Graph meta tags to generate a rich preview card with a title, description, and image.

Without properly configured OG tags, platforms either generate a blank preview or pull random text and images from your page - leading to unattractive shares that get fewer clicks. Studies show that links with optimized social previews receive 2-3x higher click-through rates compared to links with broken or missing previews.

Essential Open Graph Tags Every Page Needs

The four required OG tags are:

  • og:title - The title of your page as it should appear in social shares. Keep it under 60 characters to avoid truncation.
  • og:description - A brief summary of the page content. Aim for 55-155 characters. This is your chance to write compelling copy that drives clicks.
  • og:image - The URL of the image to display. Use 1200x630px for best results across all platforms. Must be an absolute URL starting with https://.
  • og:url - The canonical URL of the page. This tells platforms which URL to associate with the shared content.

Additionally, og:site_name and og:type are strongly recommended. The site_name appears as a subtle label above the title on Facebook, giving brand context to the share.

Twitter Cards vs. Open Graph

Twitter/X has its own meta tag system called Twitter Cards. The two most common card types are:

  • summary - A compact card with a small square thumbnail (120x120px) on the left and text on the right. Best for articles and text-heavy content.
  • summary_large_image - A large card with a wide image (1200x628px recommended) above the text. Best for visual content, product pages, and landing pages.

If you only set OG tags and not Twitter-specific tags, Twitter will fall back to your OG values. However, setting twitter:card is required to control which layout Twitter uses. You can also set twitter:title and twitter:description to override OG values with Twitter-specific copy.

Platform-Specific Preview Differences

  • Facebook: Displays og:image in a 1.91:1 aspect ratio above the title and description. The og:site_name appears in gray text at the top. Images must be at least 200x200px.
  • Twitter/X: Layout depends on the twitter:card type. summary_large_image uses a 2:1 image ratio. The domain is shown below the description.
  • Google: Uses meta title and description (not OG tags) for search results, but may use og:image for Discover and news carousels.
  • Slack/Discord: Both read OG tags. Slack shows a colored left border, site name, title as a link, description, and image. Discord is similar but uses embed styling.

Common Open Graph Mistakes to Avoid

  • Using relative image URLs instead of absolute URLs starting with https://
  • Setting og:image to an image behind authentication or on localhost
  • Using images smaller than 200x200 pixels
  • Forgetting to set og:type (defaults to "website" but should be explicit)
  • Duplicating the exact same OG tags across all pages
  • Not testing after changes - platforms cache aggressively
  • Writing og:description longer than 155 characters (gets truncated)
  • Missing the twitter:card tag, causing Twitter to use a fallback layout

Frequently Asked Questions

What are Open Graph meta tags?
Open Graph meta tags are HTML tags in your page's <head> that control how links appear when shared on social media. The most important tags are og:title, og:description, og:image, and og:url, used by Facebook, LinkedIn, Slack, Discord, and messaging apps.
What is the difference between og:title and twitter:title?
og:title is the universal Open Graph title used by most platforms, while twitter:title is specific to Twitter/X. If twitter:title is not set, Twitter falls back to og:title. This tool auto-fills Twitter fields from your OG values but lets you override them if you want a different title on Twitter.
What is the recommended og:image size?
Use an image at least 1200x630 pixels (1.91:1 aspect ratio) for best results across all platforms. Facebook requires a minimum of 200x200 pixels but recommends 1200x630. Twitter recommends the same for summary_large_image cards. Keep file size under 5MB.
What is the difference between summary and summary_large_image Twitter cards?
The "summary" card shows a small square thumbnail beside text, while "summary_large_image" shows a large full-width image above text. Use summary_large_image when you have a high-quality, wide image; use summary for text-heavy content or when you lack a good image.
Why does my OG image not show on Facebook?
Your OG image likely fails due to an inaccessible URL, small size, unsupported format, or cached old data. Check that the image URL is publicly accessible (not behind auth or localhost), at least 200x200px, in JPG/PNG/WebP format, and use Facebook's Sharing Debugger to force a re-scrape.
Does this tool fetch my URL remotely?
No, this tool runs entirely in your browser and never fetches URLs or sends data to a server. It works on manual input only, which avoids CORS issues and keeps your data completely private. Enter your planned meta tag values to preview how they will look.
How does the completeness score work?
The score rates your Open Graph setup out of 100 based on 10 checks across tags and best practices. It evaluates whether og:title, og:description, og:image, og:url, and og:site_name are set, whether twitter:card is configured, whether title and description are within recommended character limits, whether the image URL uses HTTPS, and whether the page URL is valid.
Is this tool free to use?
Yes, 100% free with no limits, no account required, and no data uploaded. Everything runs entirely in your browser.

Related Tools You Might Like

Meta Tag Checker→Page Audit→Size Checker→
Zero Data CollectionPrivacy-FirstGDPR Compliant
Privacy Policy ·Terms ·Security

Last updated: 2025-03-17 · Built & maintained by the Aibrify team — trusted by 10,000+ marketers

Ready to Automate Your Social Media Sharing?

Aibrify helps you create, schedule, and optimize social media posts with AI - including automatic Open Graph optimization for every link you share.

Start Free TrialExplore All Free Tools