Open Graph Preview
See exactly how your page looks when shared on 5 platforms. Edit title, description, and image to optimize. Copy all HTML meta tags in one click.
Google Preview
https://example.com/page
My Awesome Page Title
A compelling description that makes people want to click your link when shared on social media.
HTML Meta Tags
<!-- Open Graph --> <meta property="og:title" content="My Awesome Page Title" /> <meta property="og:description" content="A compelling description that makes people want to click your link when shared on social media." /> <meta property="og:image" content="https://example.com/image.jpg" /> <meta property="og:url" content="https://example.com/page" /> <meta property="og:site_name" content="My Website" /> <!-- Twitter Card --> <meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:title" content="My Awesome Page Title" /> <meta name="twitter:description" content="A compelling description that makes people want to click your link when shared on social media." />
How to use Open Graph Preview
Preview exactly how your URL will appear when shared on Facebook, Twitter/X, LinkedIn, WhatsApp, Slack, Discord, and iMessage — using the actual Open Graph and Twitter Card metadata from your page. Enter any URL to fetch and render its og:title, og:description, og:image, and card layout in a pixel-accurate social share preview. Essential for checking link previews before publishing or launching.
- Enter the full URL of the page you want to preview (include https://).
- The tool fetches the page's Open Graph tags via a proxy (to handle CORS).
- Select the platform to see platform-specific card rendering (Facebook link post, Twitter summary card, etc.).
- Review each field: og:title, og:description, og:image size and crop.
- If the preview is wrong, edit the metadata using the og:tags generator tool.
Your data never leaves your device — 100% private processing.
How Open Graph metadata works
Open Graph (OG) is a protocol developed by Facebook that lets web pages define how they appear in social shares. When you paste a URL on Facebook, LinkedIn, Twitter, or any OG-aware platform, the platform fetches the URL and reads <meta property="og:..."> tags from the HTML. Key tags: og:title (the headline), og:description (the summary text), og:image (the preview image — recommended 1200×630 for most platforms), og:url (canonical URL), og:type (website, article, video). Twitter additionally supports its own twitter:card, twitter:title, twitter:description, and twitter:image tags that override OG when present.
| Tag | Recommended value | Notes |
|---|---|---|
| og:title | 40–60 characters | Truncated on mobile at ~55 chars |
| og:description | 100–155 characters | Shown on desktop, often hidden on mobile |
| og:image | 1200×630 px, < 1MB | JPG or PNG; must be publicly accessible |
| og:image:alt | Describe the image | Accessibility requirement |
| og:type | website or article | Affects how Facebook structures the card |
Debugging missing or wrong previews
If a social platform shows a wrong preview (old image, incorrect title), it's usually a caching issue — platforms cache OG metadata for hours or days. Use the platform's official cache-clearing tool: Facebook's Sharing Debugger (developers.facebook.com/tools/debug), LinkedIn Post Inspector (linkedin.com/post-inspector), or Twitter Card Validator (cards-dev.twitter.com/validator). These tools force a fresh fetch of your URL. For Next.js sites, ensure OG image routes return proper Cache-Control headers and that og:image uses an absolute URL, not a relative path.
Glossary
- Open Graph
- A metadata protocol (OGP) by Facebook that standardizes how web pages define their social share appearance.
- Twitter Card
- Twitter-specific metadata tags that control how URLs appear in tweets — overrides Open Graph when both are present.
- og:image
- The preview image shown when a URL is shared — should be 1200×630px and publicly accessible via HTTPS.
- Cache invalidation
- Forcing a social platform to re-fetch metadata for a URL after you have updated the OG tags on the page.
Related reading
Frequently Asked Questions
Get weekly tool tips & updates
New tools, power-user tips, and productivity hacks — delivered free every Friday.
No spam, ever. Unsubscribe with one click.
Why use Open Graph Preview?
- Preview how posts and metadata appear on each platform
- Validate character counts against platform limits
- Generate production-ready meta tags with one click
- Identify username availability across all major networks
Common use cases
- Preview how a blog post looks when shared on Facebook
- Check Twitter card tags before a product launch
- Find an available username across all social networks
- Generate Open Graph tags for a landing page
- Create a social media post mockup for a client pitch
Related Social Media
Meta Tag Generator
Generate SEO meta tags, Open Graph tags, and Twitter Card tags online. Preview Google search snippet and copy all tags instantly.
Social Media Character Counter
Count characters for Twitter/X, Instagram, LinkedIn, Facebook, and more. Live counter with limit warnings for every major social media platform.
Social Media Image Resizer
Resize images for Instagram, Twitter, Facebook, LinkedIn, YouTube, and TikTok. All the right dimensions in one click. Free online social media image resizer.
YouTube Thumbnail Downloader
Download YouTube video thumbnails in HD, HQ, MQ, and SD quality. Paste any YouTube URL or video ID to save the thumbnail. Free and instant.
YouTube Earnings Calculator
Estimate YouTube channel earnings based on views and niche RPM. See daily, monthly, and yearly revenue projections. Free YouTube money calculator.
Engagement Rate Calculator
Calculate social media engagement rate for Instagram, TikTok, Twitter, YouTube, Facebook, and LinkedIn. See if your engagement is poor, average, good
Explore all Social Media.