Twitter Card & Open Graph Preview Tool
Test how your links will appear when shared on Twitter, Facebook, LinkedIn, Discord, and other platforms. Validate your Open Graph and Twitter Card meta tags instantly.
How it works
Enter any URL to see how it will appear when shared on social media
Multi-Platform Preview
See exactly how your link appears on Twitter, Facebook, LinkedIn, Discord, and Slack.
Meta Tag Validation
Get instant feedback on missing or problematic Open Graph and Twitter Card tags.
Instant Results
No signup required. Get real-time previews without leaving the page.
Developer Friendly
View all detected meta tags with their values to debug your implementation.
Essential Meta Tags for Social Sharing
OG Open Graph Protocol
Used by Facebook, LinkedIn, Pinterest, and most social platforms. These are the essential tags:
<meta property="og:title" content="Your Title">
<meta property="og:description" content="Description">
<meta property="og:image" content="https://...">
<meta property="og:url" content="https://...">
<meta property="og:type" content="website">X Twitter Cards
Twitter uses its own tags but falls back to Open Graph if not present. Key tags:
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Your Title">
<meta name="twitter:description" content="Description">
<meta name="twitter:image" content="https://...">
<meta name="twitter:site" content="@username">Recommended Image Sizes
Twitter (Large Card)
1200 x 628px
Aspect ratio: 1.91:1
Facebook / LinkedIn
1200 x 630px
Aspect ratio: 1.91:1
Twitter (Summary)
144 x 144px (min)
Square aspect ratio
How the Preview Tool Works
When you enter a URL, the tool fetches the page the same way a social platform's crawler would, then parses out its Open Graph tags, Twitter Card tags, and standard meta tags. From those it builds faithful mockups of how the link unfurls on Twitter / X, Facebook, LinkedIn, Discord, and Slack, and lists suggestions for anything missing or weak — a title that will truncate, an absent og:image, or no description at all.
Checking before you publish matters because each platform reads the same page differently. Twitter chooses between a small summary card and a large image card based on the twitter:card value, LinkedIn shows the title and domain but often drops the description, Discord tints its embed with theme_color, and Slack displays your favicon and site name above the link. A page that looks perfect in one feed can render as a bare gray link in another, and that difference shows up directly in click-through rates.
Common Use Cases
- Verifying a blog post's card before hitting publish and sharing it
- Debugging why a landing page shares with no image or the wrong headline
- Confirming a CMS, theme, or framework migration didn't break existing meta tags
- Comparing how one URL renders across five platforms without posting anywhere
- Auditing client sites for missing social metadata during an SEO review
Frequently Asked Questions
I fixed my meta tags, so why does the old preview still appear when I share?
Social platforms cache the data they scraped the first time your link was shared. Facebook lets you force a refresh through its Sharing Debugger, LinkedIn has a Post Inspector that does the same, and other platforms refresh their caches on their own schedule. This tool always fetches the live page, so use it to confirm the fix is deployed, then trigger a re-scrape on the platform.
Do I need both Open Graph and Twitter Card tags?
Mostly no — Twitter falls back to og:title, og:description, and og:image when its own tags are absent. The one tag worth adding explicitly is twitter:card, because it controls whether your link renders as a small summary thumbnail or a full-width large image card.
What image size works across all platforms?
A 1200 x 630 pixel image at a 1.91:1 aspect ratio displays well on Twitter large cards, Facebook, LinkedIn, and Discord alike. Serve it over HTTPS with an absolute URL — relative paths and mixed-content images are a frequent reason cards render without an image.
Why does the tool detect no tags on my page?
The usual culprit is client-side rendering: if your meta tags are injected by JavaScript after the page loads, they are missing from the raw HTML that crawlers (and this tool) receive. Server-side rendering, static generation, or pre-rendering puts the tags back where scrapers can see them. A robots block or a firewall rejecting bot requests can cause the same symptom.
Can I preview localhost or pages behind a login?
No. The URL must be publicly reachable, because the fetch happens from a server just like a real social crawler. For work in progress, deploy to a staging URL or use a tunneling service that exposes your local build temporarily.
What is the difference between summary and summary_large_image?
A summary card shows a small square thumbnail beside the title and description, while summary_large_image places a full-width banner image above the text. The large format is the common choice for articles and marketing pages since it occupies far more space in the timeline.
Discussion
Start the conversation
Leave a comment
Loading comments...