About Open Graph Preview

Test how your web pages appear when shared on social media platforms. Enter a URL to fetch its Open Graph, Twitter Card, and other meta tags, then see platform-specific previews and an OG completeness score.

✓Facebook / Open Graph preview
✓Twitter / X card preview
✓LinkedIn share preview
✓Discord embed preview
✓OG completeness score & analysis
✓Full meta tag listing

Complete Guide to Open Graph Tags

Free Online Open Graph Preview & Validator

Check how any URL appears when shared on Facebook, Twitter (X), LinkedIn, Discord, Slack, and other social platforms. Our free Open Graph preview tool fetches the page's OG meta tags and displays realistic previews for each platform, along with a completeness score and detailed analysis of missing tags.

What Is the Open Graph Protocol?

The Open Graph protocol was originally created by Facebook in 2010 and enables any web page to become a rich object in a social graph. When you share a link on social media, the platform's crawler reads the <meta> tags with property="og:..." attributes to determine the title, description, image, and other metadata displayed in the preview card.

Essential Open Graph Tags

<!-- Required OG Tags -->
<meta property="og:title" content="Page Title">
<meta property="og:description" content="Page description">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:url" content="https://example.com/page">
<meta property="og:type" content="website">

<!-- Recommended OG Tags -->
<meta property="og:site_name" content="Site Name">
<meta property="og:locale" content="en_US">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">

Twitter Card Tags

Twitter (X) uses its own set of meta tags for link previews. If Twitter-specific tags are missing, it falls back to Open Graph tags. The two main card types are summary (small square image with text) and summary_large_image (large image banner above text).

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Page Title">
<meta name="twitter:description" content="Description">
<meta name="twitter:image" content="https://example.com/image.jpg">
<meta name="twitter:site" content="@yourhandle">

How Each Platform Uses OG Tags

📘 Facebook & Messenger

  • Uses all og: prefixed tags
  • Recommended image: 1200×630px
  • Shows site name, title, description
  • Caches previews (use Sharing Debugger to refresh)

🐦 Twitter / X

  • Uses twitter: tags first, then OG
  • Two card types: summary & summary_large_image
  • Title limited to ~70 characters
  • Image min 120×120px (summary) or 300×157px (large)

💼 LinkedIn

  • Uses Open Graph tags
  • Recommended image: 1200×627px
  • Shows image, title, and domain
  • Use Post Inspector to refresh cache

💬 Discord & Slack

  • Uses Open Graph + Twitter tags
  • Shows colored left border embeds
  • Displays site name, title, description, image
  • Supports oEmbed for rich previews

OG Image Best Practices

📐 Size & Format

  • Ideal size: 1200×630 pixels
  • Minimum: 600×315 pixels
  • Aspect ratio: 1.91:1
  • File size: Under 5MB (ideally <1MB)
  • Formats: JPG, PNG, or WebP

🎨 Design Tips

  • Keep key content in center safe zone
  • Use readable text over images
  • Include your brand logo
  • Use high contrast colors
  • Test at small sizes (mobile preview)

How to Use This Tool

  1. Enter a URL: Paste the full URL of the page you want to preview into the input field.
  2. Click Preview: The tool fetches the page and extracts all Open Graph, Twitter Card, and meta tags.
  3. Check Previews: Switch between Facebook, Twitter/X, LinkedIn, and Discord tabs to see how the link will appear on each platform.
  4. Review Score: Check the OG score to see how complete your metadata is, and review specific missing tags.
  5. Browse All Tags: Use the “All Tags” tab to see every meta tag detected on the page.
  6. Fix & Re-test: Update your page's meta tags, redeploy, and test again to verify the changes.

Common OG Tag Issues

Missing og:image: Without an image, social previews look plain and get significantly less engagement. Always include a relevant, high-quality image.

Wrong image size: Images that are too small or have the wrong aspect ratio may be cropped or ignored entirely. Use 1200×630px for best results.

Cached previews: Social platforms cache OG data. After updating tags, use each platform's cache-clearing tool (Facebook Sharing Debugger, Twitter Card Validator, LinkedIn Post Inspector).

Relative URLs: Always use absolute URLs (starting with https://) for og:image and og:url. Relative paths won't work.

Perfect For

  • Web developers and designers
  • SEO specialists
  • Social media managers
  • Content marketers
  • Digital marketing teams
  • QA testers
  • Bloggers and content creators
  • E-commerce store owners
  • Product managers
  • Startup founders
  • Freelance developers
  • Anyone sharing links on social media

🔒 How It Works

This tool fetches the HTML of the provided URL server-side to read its meta tags (similar to how social media crawlers work). Only the HTML <head> section is read, and no data is stored. Your requests are not logged or tracked.

Related SEO & Web Tools

<meta>

Meta Tag Generator

Generate optimized OG, Twitter Card, and SEO meta tags for your pages.

</>&&amp;&lt; &gt;

HTML Entity Encoder

Encode special characters for safe use in meta tag content values.

Favicon Downloader

Download favicons from any website in multiple sizes and formats.

Domain Age Checker

Check when a domain was registered and how old it is.

DNS

DNS Checker

Look up DNS records for any domain — A, AAAA, MX, TXT, CNAME, NS.

S

SSL Checker

Verify SSL certificate details, expiry dates, and security configuration.