Twitter Open Graph Preview Tool
Preview how your links appear on Twitter. Test your Open Graph meta tags and optimize your Twitter link previews for maximum engagement.
Loading Twitter preview...
Twitter Open Graph Guide
How Twitter Handles Open Graph Tags
Twitter (now X) supports both the standard Open Graph protocol and its own Twitter Card system. While Twitter will fall back to OG tags if Twitter Card tags are missing, using Twitter-specific tags gives you better control over how your links appear.
Twitter Card Types
- summary - Small card with title, description, and thumbnail (120×120px)
- summary_large_image - Large card with title, description, and large image (recommended)
- app - App download card
- player - Video or audio player card
Twitter Image Dimensions & Requirements
- Summary Large Image: 1200×675px (1.78:1 aspect ratio)
- Minimum size: 300×157px
- Maximum file size: 5MB (aim for under 1MB)
- Supported formats: JPG, PNG, GIF, WebP
Required Twitter Card Tags
<!-- Twitter Card Tags -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Your Page Title" />
<meta name="twitter:description" content="Your page description" />
<meta name="twitter:image" content="https://example.com/image.jpg" />
<!-- Open Graph Tags (Twitter falls back to these) -->
<meta property="og:title" content="Your Page Title" />
<meta property="og:description" content="Your page description" />
<meta property="og:image" content="https://example.com/image.jpg" />
<meta property="og:url" content="https://example.com/page" />Optional Twitter Tags
twitter:site- Your Twitter handle (e.g., @username)twitter:creator- Author's Twitter handletwitter:image:alt- Alt text for the image (important for accessibility)
Common Twitter Card Mistakes
1. Missing twitter:card Tag:
Without the twitter:card tag, Twitter may not display your image properly, even if OG tags are present.
2. Wrong Image Aspect Ratio:
Twitter's native 1200×675px (1.78:1) provides better visual results than Facebook's 1200×630px (1.91:1).
3. Relative Image URLs:
❌ <meta name="twitter:image" content="/images/card.jpg" />
✅ <meta name="twitter:image" content="https://example.com/images/card.jpg" />
Implementation Example (Nuxt 3)
useSeoMeta({
// Open Graph
ogTitle: 'Your Page Title',
ogDescription: 'Your description',
ogImage: 'https://example.com/og-image.jpg',
ogUrl: 'https://example.com/page',
// Twitter Card
twitterCard: 'summary_large_image',
twitterTitle: 'Your Page Title',
twitterDescription: 'Your description',
twitterImage: 'https://example.com/twitter-image.jpg',
twitterSite: '@yourhandle',
twitterCreator: '@authorhandle'
})Twitter Open Graph FAQ
What image size should I use for Twitter Cards?
For summary_large_image cards, use 1200×675px (1.78:1 aspect ratio). This is Twitter's recommended size and provides the best visual results. Minimum size is 300×157px, maximum file size is 5MB.
Do I need both Twitter Card tags and Open Graph tags?
Yes, include both. Twitter will fall back to Open Graph tags if Twitter Card tags are missing, but using Twitter-specific tags like twitter:card, twitter:title, and twitter:image gives you better control and ensures optimal display.
What is the difference between Twitter Cards and Open Graph?
Twitter Cards are Twitter's extension of Open Graph. While Twitter supports OG tags, Twitter Card tags provide platform-specific control. Key differences: Twitter recommends 1.78:1 aspect ratio (vs 1.91:1 for OG), and offers card types like summary, summary_large_image, app, and player.
How do I test my Twitter Cards?
Use our free Twitter preview tool above, or the official Twitter Card Validator to preview and debug your cards. You can also share a test tweet to verify the final appearance.
Why is my Twitter Card not showing an image?
Common causes: 1) Missing twitter:card meta tag, 2) Image URL is relative (not absolute), 3) Image is too small, 4) Twitter's cache hasn't updated yet. Use the Twitter Card Validator to diagnose issues.
What are the Twitter Card types?
Twitter supports: summary (small thumbnail), summary_large_image (large image above title), app (app download card), and player (video/audio). Most websites use summary_large_image for maximum visual impact.
Preview All Platforms at Once
See how your links appear on Facebook, Twitter, LinkedIn, Slack, Discord, WhatsApp, Telegram, and iMessage - all in one view.
Try the Full Preview Tool