Open Graph Preview

OG Preview illustration

Check how your page looks when shared on social media. Validate OG tags, Twitter Cards, and more.

How This Open Graph Checker Works

This tool fetches the HTML of any URL and extracts all Open Graph, Twitter Card, and standard meta tags. It then renders pixel-accurate preview cards showing exactly how your page will look when shared on each social media platform.

travel_explore

Fetch

Validates core OG tags (og:title, og:image), Twitter Cards, and canonical links instantly.

devices

Preview

Visualize link displays perfectly matched to Facebook, Twitter, LinkedIn, Discord, and WhatsApp styling arrays.

troubleshoot

Audit

Examines image dimensions, ensures URL routing capabilities, and flags misconfigured character limits reliably.

OG Tag Examples & Patterns

Explore these real-world examples to see how different sites handle Open Graph tags.

Well Optimized
GitHub.com

Dedicated og:image at the right dimensions, concise title, compelling description.

<meta property="og:image" ...>
<meta name="twitter:card" ...>
Blog Post
Article Example

A real blog post with complete OG metadata, Twitter Cards, and a dedicated hero image.

<meta property="og:type" content="article">
Twitter Card
EngTools.dev

Uses twitter:card summary_large_image with OG tags — a solid baseline implementation.

<meta name="twitter:card" content="summary_large_image">
<meta property="og:title" content="...">
Missing Tags
example.com

No Open Graph tags — just a basic title and description. Social media generates a generic preview.

<!-- No OG tags present -->
Video Page
YouTube

Uses video-specific OG tags including og:video and twitter player cards.

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

Frequently Asked Questions

What are Open Graph tags? expand_more
Open Graph (OG) tags are HTML meta tags in your page's <head> that control how your page appears when shared on social media. They were created by Facebook and are now used by most platforms including LinkedIn, Discord, WhatsApp, and Slack. The most important tags are og:title, og:description, og:image, and og:url.
What is the difference between Open Graph and Twitter Cards? expand_more
Open Graph tags are the universal standard used by most platforms. Twitter Cards (twitter:card, twitter:title, etc.) are Twitter/X-specific tags that override OG tags on that platform. If you don't set Twitter Card tags, Twitter falls back to your OG tags. Best practice is to set both.
What is the recommended og:image size? expand_more
The recommended size is 1200×630 pixels (1.91:1 aspect ratio). This works well across all platforms. The minimum is 600×315 pixels. Images should be under 8MB and in JPEG or PNG format. Twitter's summary card type uses a smaller 1:1 aspect ratio (minimum 144×144px).
Why is my social media preview not showing the right image? expand_more
Common causes include: (1) the og:image URL is relative instead of absolute, (2) the image is too small, (3) the image URL returns a 404, (4) the social platform has cached an old version. Use this checker to diagnose the exact issue, then use each platform's cache-clearing tool to update.