Twitter Card Generator

Create Twitter Card meta tags with live preview for all four card types: summary, summary_large_image, app, and player. Copy the generated code directly.

Key features

Supports all 4 Twitter Card types (summary, large image, app, player)
Live preview shows exactly how your tweet will look
Generates complete meta tag code ready to paste
Character limits and best practices built into the interface

Guide

Twitter Cards (now called X Cards following the platform rebrand) are HTML meta tags that control how your web pages appear when shared on Twitter/X. Without these tags, shared links show as plain text URLs. With properly configured Card tags, shared links display rich preview cards with images, titles, descriptions, and call-to-action elements that increase click-through rates substantially. Engagement data across multiple content platforms shows that tweets with rich media cards receive 40 to 150 percent more engagement than plain text links. This guide covers every Card type, every meta tag, validation methods, common errors, and optimization strategies for maximum social media visibility. ## How Twitter Cards Work When a user shares a URL on Twitter/X, the platform sends a crawler (Twitterbot, user-agent string: "Twitterbot/1.0") to fetch the page and read its meta tags. The bot looks for tags in the <head> section with the name attribute prefixed by "twitter:". If these tags are present and valid, Twitter renders a rich Card below the tweet text. If twitter: tags are missing, the bot falls back to Open Graph (og:) tags. If neither exists, the link appears as plain text with no preview. The fetched Card data is cached by Twitter for approximately 7 days. If you update your Card tags, the old version may persist until the cache expires. You can force a cache refresh using the Twitter Card Validator tool or by appending a query parameter to the URL (e.g., adding ?v=2 to the end). Twitterbot follows HTTP redirects (up to 5 hops) and respects robots.txt. If your robots.txt file blocks Twitterbot, no Card will render. The bot does not execute JavaScript, which is critical for single-page application developers. ## Card Types ### Summary Card The summary Card displays a small square thumbnail (144x144 pixels minimum, 4096x4096 maximum), a title, a description, and the site attribution. This is the default Card type and works well for articles, blog posts, product pages, and general content. The card renders as a compact horizontal layout on desktop and a vertical layout on mobile. Required tags: - twitter:card with value "summary" - twitter:title with your page title (maximum 70 characters, truncated with ellipsis if exceeded) Recommended tags: - twitter:description (maximum 200 characters, but only the first 125 characters are visible on most displays) - twitter:image (URL to the thumbnail image, minimum 144x144 pixels) - twitter:site (the @username of the website) Example implementation: <meta name="twitter:card" content="summary" /> <meta name="twitter:site" content="@yoursite" /> <meta name="twitter:title" content="Your Page Title" /> <meta name="twitter:description" content="A concise description of the page content." /> <meta name="twitter:image" content="https://yoursite.com/image.jpg" /> ### Summary Card with Large Image This is the most popular Card type for content marketing, blog promotion, and product launches. It displays a large, prominently featured image above the title and description. The image spans the full width of the tweet on both mobile and desktop, making it the most visually dominant Card format. The recommended image size is 1200x628 pixels (1.91:1 aspect ratio). Minimum size is 300x157 pixels. Images smaller than the minimum are not displayed, and the Card falls back to the summary format. Required tags: - twitter:card with value "summary_large_image" - twitter:title Recommended tags: - twitter:description - twitter:image - twitter:image:alt (alternative text for accessibility, maximum 420 characters) - twitter:site - twitter:creator (the @username of the content author, displayed separately from the site) The large image Card is the strongest option for driving clicks because the visual dominance of the large image in the timeline interrupts scrolling behavior. A/B testing across multiple content publishers shows that large image Cards generate 20 to 40 percent more clicks than summary Cards for the same content. The key is using a high-quality, relevant image with good contrast and minimal text overlay. ### Player Card The Player Card embeds an audio or video player directly in the tweet. It requires approval from Twitter through a whitelisting process. The player is an iframe that loads your specified URL. Required tags: - twitter:card with value "player" - twitter:title - twitter:player (HTTPS URL to the iframe player) - twitter:player:width (width of the player in pixels) - twitter:player:height (height of the player in pixels) - twitter:image (placeholder image shown before the user clicks play) Player Cards must serve content over HTTPS. The player URL must not redirect. The iframe must be responsive and functional. Twitter reviews Player Card applications manually, and approval can take several business days. Large platforms like YouTube, Vimeo, SoundCloud, and Spotify have pre-approved Player Cards. For smaller sites, you need to submit your domain through the Twitter developer portal. Player Card dimensions should follow a 16:9 or 4:3 aspect ratio for video. Common sizes are 1280x720 (16:9) and 640x480 (4:3). The twitter:player:stream tag can specify a direct video file URL for native playback. ### App Card The App Card promotes a mobile application with install buttons for iOS and Android. It displays the app icon, name, rating, price, and a direct install button that links to the appropriate app store. Required tags: - twitter:card with value "app" - twitter:site - twitter:app:id:iphone or twitter:app:id:googleplay (the app store numeric IDs) Optional tags: - twitter:app:name:iphone - twitter:app:name:googleplay - twitter:app:url:iphone (custom URL scheme for deep linking into the app if already installed) - twitter:app:url:googleplay - twitter:app:id:ipad (if the iPad version has a different app store ID) App Cards are primarily useful for app launch announcements, app review articles, and app download landing pages. The Card automatically detects the user's device and shows the relevant app store button. ## Open Graph Fallback Twitter reads Open Graph tags as fallbacks when twitter: tags are absent. The mapping is: - og:title falls back to twitter:title - og:description falls back to twitter:description - og:image falls back to twitter:image If you already have Open Graph tags for Facebook and LinkedIn, you can skip the twitter: equivalents for title, description, and image. However, you must always include the twitter:card tag because there is no Open Graph equivalent that specifies the Card type. Without twitter:card, no Card renders at all. A practical approach is to set Open Graph tags as the base and add only the twitter: tags that differ or have no OG equivalent: - Always include twitter:card (mandatory, no OG fallback) - Include twitter:site and twitter:creator (no OG equivalent) - Include twitter:image only if you want a different image than og:image (for example, a different crop ratio) - Include twitter:title only if you want a different title than og:title (for example, a shorter version that fits the 70-character limit) This approach minimizes tag duplication and maintenance overhead. ## Image Optimization Image quality makes or breaks your Card performance because the image is the first thing users see. Follow these specifications: For summary Cards: 240x240 pixels (displayed at approximately 144x144). Square aspect ratio (1:1). File size under 1 MB. Supported formats: JPG, PNG, GIF (first frame only), WEBP. For summary_large_image Cards: 1200x628 pixels (1.91:1 ratio). File size under 5 MB. The image must not be smaller than 300x157 pixels. Images between 300x157 and 600x314 appear slightly blurry on retina displays. Use 1200x628 or larger for crisp rendering on all devices. For all Cards: the image URL must be absolute (starting with https://), not relative. The image server must respond within 3 seconds or the fetch times out. Images behind authentication, paywalls, or robots.txt blocks will not be fetched. Animated GIFs display only the first frame in Cards (use native video upload for animated content). SVG images are not supported. Design tips: Place the most important visual content in the center of the image because edges may be cropped on mobile. Avoid text that fills more than 20 percent of the image area because small text becomes unreadable at the Card display size. Use high contrast and saturated colors that stand out in the timeline (Twitter's interface uses white/dark grey backgrounds). Brand logos should appear at a readable size. If your article features a person, show their face prominently because human faces draw attention. ## Validation and Debugging The Twitter Card Validator (cards-dev.twitter.com/validator) lets you preview how your Card will appear before sharing. Enter your URL and the tool fetches your page, reads the meta tags, and renders a preview. It also displays warnings for missing or invalid tags and shows the raw tag values it detected. Common validation errors: "Card type not found": The twitter:card tag is missing or has an invalid value. Valid values are: summary, summary_large_image, player, app. Check for typos ("summary_large_Image" with a capital I will fail). "Image not found": The twitter:image URL returns a 404, the server is too slow (over 3 seconds), the image is behind a login, the URL uses HTTP instead of HTTPS, or the image format is not supported. Verify the image URL is accessible from an incognito browser window. "Title too long": The twitter:title value exceeds 70 characters. The excess text will be truncated with an ellipsis. Rewrite to fit within the limit. "robots.txt restriction": Your robots.txt file blocks Twitterbot. Add "User-agent: Twitterbot" with "Allow: /" to your robots.txt if you want Cards to work. If your Card is not updating after changing tags, append a random query parameter to the URL in the validator (?v=2 or ?cache=bust) to bypass the cache. Alternatively, wait 7 days for the cache to expire naturally. When debugging, use curl to see exactly what Twitterbot sees: curl -A "Twitterbot/1.0" https://yoursite.com/page This shows the raw HTML response without JavaScript execution. All your meta tags must be present in this response. ## Implementation for Single-Page Applications Single-page applications (SPAs) built with React, Vue, Angular, or Svelte present a challenge because Twitterbot does not execute JavaScript. It reads only the initial HTML response from the server. If your meta tags are injected by JavaScript after page load (using react-helmet, vue-meta, or similar), Twitterbot sees an empty head section and no Card renders. Solutions ranked by effectiveness: 1. Server-side rendering (SSR) with frameworks like Next.js, Nuxt, Remix, SvelteKit, or Angular Universal. Meta tags are in the HTML response before JavaScript executes. This is the most reliable solution and also benefits SEO. 2. Pre-rendering services like Prerender.io, Rendertron, or Puppeteer-based solutions that detect bot user agents (including Twitterbot) and serve a pre-rendered HTML snapshot while serving the SPA to regular users. 3. Static site generation (SSG) for content that does not change frequently. Build-time rendering produces HTML files with meta tags baked in. 4. Edge-side rendering with Cloudflare Workers, Vercel Edge Functions, or AWS Lambda@Edge that inject meta tags at the CDN level based on the requested URL path. This avoids changing your application architecture. 5. Static meta tags in the HTML template's index.html for sites with only one shareable page (like a single-page marketing site). ## Best Practices for Maximum Engagement Write titles that create a clear value proposition in 70 characters or fewer. Instead of "Blog Post - Our Company," write "How to Reduce Server Costs by 40% Using Container Optimization." Front-load the key information in both titles and descriptions because truncation cuts from the end. Write descriptions that complement the title rather than repeating it. The description should expand on the title's promise and give the reader a specific reason to click. Include a data point, a specific benefit, or a clear scope statement. Use different images for Twitter Cards and Facebook Open Graph if the recommended aspect ratios differ for your content. Twitter large image Cards use 1.91:1 while Facebook link previews also use 1.91:1, so in practice the same image works for both platforms. Include twitter:image:alt text for every image. This helps visually impaired users who rely on screen readers, improves your accessibility profile, and demonstrates content quality signals to the platform. Test your Cards on both mobile and desktop. The rendering differs between platforms, and what looks good on desktop may have readability issues on mobile where the Card width is narrower. Schedule your tweets for peak engagement times in your audience's time zone. The Card content is the same regardless of when you post, but the engagement rate depends heavily on timing. Analyze your Twitter Analytics to find your audience's peak activity hours. This tool generates the complete set of Twitter Card meta tags based on your inputs. Enter your page title, description, image URL, Card type, and site handle, and the tool outputs ready-to-paste HTML meta tags with correct formatting and character limits enforced. It also validates your inputs against Twitter's requirements and warns about potential issues before you publish.

Frequently asked questions

What is a Twitter Card?

It's the rich preview that appears when someone shares your link on Twitter/X - with image, title, and description.

Which card type should I use?

For blog posts, use "summary_large_image" for the largest visual impact. The tool shows previews for all types.