Open Graph Preview

Preview how your page will look when shared on Facebook, Twitter/X, LinkedIn, and Slack. Generate Open Graph and Twitter Card meta tags from a form.

og:title39/70

og:description119/160

og:image URL

Use an absolute URL. Ideal: 1200×630px JPG/PNG under 1MB.

og:url

og:site_name

og:type

Facebook

example.com

My Awesome Blog Post — A Complete Guide

Learn everything you need to know about this topic in our comprehensive guide. Perfect for beginners and experts alike.

Generated Meta Tags

<!-- Open Graph / Facebook -->
<meta property="og:type" content="article" />
<meta property="og:url" content="https://example.com/blog/my-post" />
<meta property="og:title" content="My Awesome Blog Post — A Complete Guide" />
<meta property="og:description" content="Learn everything you need to know about this topic in our comprehensive guide. Perfect for beginners and experts alike." />
<meta property="og:site_name" content="My Website" />

<!-- Twitter -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="My Awesome Blog Post — A Complete Guide" />
<meta name="twitter:description" content="Learn everything you need to know about this topic in our comprehensive guide. Perfect for beginners and experts alike." />

OG Tag Checklist

✓og:title set (50–70 chars)

✓og:description set (120–160 chars)

○Missing or not absolute

✓og:url is absolute HTTPS URL

✓og:site_name set

✓og:type selected

How to Use Open Graph Preview

1Enter your page title, description, URL, and image URL.
2Preview how the link will appear on Facebook, Twitter/X, LinkedIn, and Slack.
3Copy the generated meta tags to your HTML <head>.

Zenovay

Track your website performance

Real-time analytics, session replay, heatmaps, and AI insights. 2-minute setup, privacy-first.

Try Zenovay Analytics — Free

Open Graph CheckerPreview how your page looks when shared on Facebook, Twitter, and LinkedIn. Check all OG and Twitter Card tags.

HTTP Header CheckerInspect HTTP response headers of any URL. Check security headers, caching, content type, and more.

Robots.txt ValidatorValidate and analyze your robots.txt file. Check rules, sitemaps, and common crawling issues.

Frequently Asked Questions

What are Open Graph tags?▾

Open Graph (OG) tags are HTML meta tags that control how URLs appear when shared on social media platforms like Facebook, LinkedIn, Twitter/X, Slack, and Discord. Developed by Facebook in 2010, OG protocol is now the standard for link previews across the web. Key tags: og:title (headline), og:description (summary), og:image (thumbnail), og:url (canonical URL). Without OG tags, platforms guess the content — often poorly. With proper OG tags, you control exactly how your content looks when shared, dramatically improving click-through rates.

What is the difference between Open Graph and Twitter Cards?▾

Open Graph is the general standard used by Facebook, LinkedIn, Slack, Discord, and most platforms. Twitter Cards are Twitter/X-specific meta tags (twitter:card, twitter:title, twitter:description, twitter:image). Most implementations need both. Good news: if Twitter-specific tags are absent, Twitter falls back to OG tags. Recommended: set both for maximum compatibility. Twitter card types: summary (small image), summary_large_image (full-width banner — most common), app (mobile app), player (video). The summary_large_image type with a 1200×628px image creates the most eye-catching previews.

What is the ideal image size for Open Graph?▾

Recommended OG image size: 1200×630px (1.91:1 ratio). Minimum: 600×315px. Maximum file size: under 8MB (Facebook limit), ideally under 1MB for fast loading. Facebook will crop images that don't meet the ratio. LinkedIn prefers 1200×627px. Twitter/X summary_large_image: 1200×675px (16:9 ratio). Always use absolute URLs for og:image (including https://). Use JPG or PNG format. Include alt text via og:image:alt for accessibility. Pro tip: include your brand/logo in the image since it appears without context in social feeds.

How do I validate my Open Graph tags?▾

Testing tools: Facebook Sharing Debugger (developers.facebook.com/tools/debug) — paste your URL, scrapes and shows preview + errors. LinkedIn Post Inspector (linkedin.com/post-inspector) — same for LinkedIn. Twitter Card Validator (cards-dev.twitter.com/validator) — for Twitter cards. Note: Facebook and LinkedIn cache previews aggressively. After fixing tags, use the debugger's "Scrape Again" button to force refresh the cache. Common issues: missing og:image (no preview shown), image too small (ignored), relative image URLs (not supported), missing og:title fallback to page title.

What is og:type and when should I use different values?▾

og:type tells platforms what kind of content the page is. Most common values: website (default — homepage or general pages). article (blog posts, news articles — enables article:published_time, article:author). product (e-commerce items — enables og:price:amount). video.movie / video.episode (video content). music.song / music.album (audio content). For articles: add article:published_time (ISO 8601 date), article:author (URL of author page), article:section (category), article:tag (keywords). For most sites, website and article cover 99% of use cases.

Image Tools