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.

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 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 (like twitter:card, twitter:title) provide platform-specific control and better results on Twitter/X.

How do I test my Twitter Cards?

Use the Twitter Card Validator (cards-dev.twitter.com/validator) to preview and debug your cards. You can also use our Open Graph Preview Tool to see how your links appear across all platforms.

Twitter (X) Open Graph Preview Guide - Optimize Your Twitter Cards

Quick Answer

Twitter (X) uses both Open Graph tags and Twitter Card meta tags. For best results, use twitter:card set to "summary_large_image" with an image size of 1200×675px. Twitter falls back to OG tags but prefers Twitter-specific tags for better control.

How Twitter Handles Open Graph Tags

Twitter (formerly 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

Twitter supports several card types, each optimized for different content:

summary - Small card with title, description, and thumbnail (120×120px)
summary_large_image - Large card with title, description, and large image (1200×675px recommended)
app - App download card
player - Video or audio player card

For most websites, summary_large_image provides the best visual impact and engagement.

Twitter Image Dimensions & Requirements

Twitter has specific image requirements that differ slightly from standard Open Graph recommendations:

Recommended Image Size

Summary Large Image: 1200×675px (1.78:1 aspect ratio)
Minimum size: 300×157px
Maximum file size: 5MB (but aim for under 1MB for faster loading)
Format: JPG, PNG, GIF, or WebP

Image Best Practices for Twitter

Use high contrast colors - Twitter's UI is dark, so bright images stand out
Keep text large and readable (minimum 40px font size)
Avoid placing important content in the bottom 20% of the image (where Twitter overlays the domain)
Test on both light and dark mode Twitter interfaces
Include your brand logo or visual identity

Required Twitter Card Tags

At minimum, include these Twitter Card meta tags in your page's <head>:

<!-- 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 handle
twitter:image:alt - Alt text for the image (important for accessibility)

Common Twitter Card Mistakes

1. Missing twitter:card Tag

❌ <meta property="og:image" content="..." /> (only OG tags)

✅ <meta name="twitter:card" content="summary_large_image" /> + OG tags

Without the twitter:card tag, Twitter may not display your image properly, even if OG tags are present.

2. Wrong Image Aspect Ratio

Using Facebook's recommended 1200×630px (1.91:1) works, but Twitter's native 1200×675px (1.78:1) provides better visual results:

Twitter crops images to fit its card format
Images that are too tall or too wide may be cropped awkwardly
Test your images using the Twitter Card Validator

3. Relative Image URLs

❌ <meta name="twitter:image" content="/images/twitter-card.jpg" />

✅ <meta name="twitter:image" content="https://example.com/images/twitter-card.jpg" />

Twitter requires absolute URLs with the full protocol (https://). Relative paths will not work.

4. Not Testing Before Publishing

Always validate your Twitter Cards before sharing:

Use the Twitter Card Validator to preview and debug
Test with our Open Graph Preview Tool to see how it appears
Share a test tweet to verify the final appearance

Twitter Cards vs Open Graph Tags

While Twitter supports Open Graph tags, there are key differences:

Feature	Open Graph	Twitter Cards
Image aspect ratio	1.91:1 (1200×630px)	1.78:1 (1200×675px)
Card type control	Limited	Full control via twitter:card
Site/creator attribution	Not supported	twitter:site, twitter:creator
Fallback behavior	N/A	Falls back to OG tags if missing

Best Practice: Include both Twitter Card tags and Open Graph tags. This ensures compatibility across all platforms while giving Twitter the specific tags it prefers.

Implementation Examples

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'
})

Next.js 14+

export const metadata = {
  openGraph: {
    title: 'Your Page Title',
    description: 'Your description',
    images: ['https://example.com/og-image.jpg'],
    url: 'https://example.com/page'
  },
  twitter: {
    card: 'summary_large_image',
    title: 'Your Page Title',
    description: 'Your description',
    images: ['https://example.com/twitter-image.jpg'],
    site: '@yourhandle',
    creator: '@authorhandle'
  }
}

Testing Your Twitter Cards

Validate with Twitter Card Validator - Use the official validator to preview and debug
Preview with our tool - Test with our Open Graph Preview Tool to see how it appears across platforms
Test on mobile - Most Twitter users view on mobile, so ensure your cards look good on small screens
Check dark mode - Twitter's dark mode is popular; verify your images have good contrast
Monitor engagement - Track CTR and engagement metrics to optimize your cards over time