Open Graph Preview Checker
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.
What It Checks
- Open Graph tags:
og:title,og:description,og:image,og:url,og:type, andog:site_name. - Twitter Card tags:
twitter:card,twitter:title,twitter:description,twitter:image, andtwitter:site. - Standard tags:
<title>,<meta name="description">, and<link rel="canonical">. - Image validation: Checks if the og:image URL is accessible, and reports the file type and size.
- Tag audit: Evaluates all tags and provides an A/B/C/F grade based on completeness and best practices.
Frequently Asked Questions
What are Open Graph tags?
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?
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?
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?
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.
How do I add Open Graph tags to my website?
Add <meta> tags to the <head> section of your HTML. Check your URL with this tool, then use the "Copy-Paste OG Tags" section to get ready-to-use markup. Most CMS platforms (WordPress, Shopify, Squarespace) have SEO plugins that generate these tags automatically.
OG Tag Examples & Common Patterns
Explore these real-world examples to see how different sites handle Open Graph tags. Click any example to check it live.
Well-Optimized Page — GitHub
GitHub's homepage is a textbook example of good OG implementation: dedicated og:image at the right dimensions, concise title, compelling description, and full Twitter Card tags.
<meta property="og:title" content="GitHub: Let's build from here">
<meta property="og:description" content="GitHub is where over 100 million developers...">
<meta property="og:image" content="https://github.githubassets.com/images/...">
<meta name="twitter:card" content="summary_large_image">Check it: Notice the large image preview, consistent title across platforms, and the summary_large_image Twitter card type.
Minimal Tags — example.com
example.com has virtually no Open Graph tags — just a basic <title> and <meta description>. This is what most pages look like before OG optimization.
<title>Example Domain</title>
<!-- No og:title, og:description, og:image, or twitter:card -->Check it: See the "C" or "F" grade — social media platforms fall back to the page title and generate a generic preview with no image.
Blog Post with Full Tags
A real blog post with complete OG metadata, Twitter Cards, and a dedicated hero image. Shows how article-type pages should be configured with og:type set to "article".
<meta property="og:type" content="article">
<meta property="og:title" content="Best Coding Interview Prep Tools...">
<meta property="og:description" content="From LeetCode to AI mock interviews...">
<meta property="og:image" content="https://intervu.dev/blog/images/...">
<meta name="twitter:card" content="summary_large_image">Check it: Notice the og:type is set to "article" — this tells platforms this is content, not a homepage. The hero image and description are tailored for sharing.
EngTools — Our Own Site
Check how our own site handles OG tags. We practice what we preach — custom OG images, full Twitter Cards, and structured data.
<meta property="og:title" content="Free Online Engineering Tools | EngTools">
<meta property="og:description" content="A collection of free, fast, and...">
<meta name="twitter:card" content="summary_large_image">Check it: A good reference for how to set up OG tags on a developer tool site. Compare the preview across all 5 platforms.
Video Page — YouTube
YouTube uses video-specific OG tags including og:type set to "video.other" and og:video tags. See how video content differs from standard pages.
<meta property="og:type" content="video.other">
<meta property="og:video:url" content="https://www.youtube.com/embed/...">
<meta property="og:image" content="https://i.ytimg.com/vi/...">
<meta name="twitter:card" content="player">Check it: Notice the video-specific OG type and the Twitter "player" card type, which enables inline video playback on Twitter.