Last updated
Twitter Card Generator Examples
The Twitter Card Generator creates the meta tags needed to control how your pages appear when shared on Twitter/X. Below are practical examples for all card types with complete meta tag output.
Summary Card (Article/Blog Post)
<!-- Summary card — small thumbnail with title and description -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@mywebsite">
<meta name="twitter:creator" content="@authorhandle">
<meta name="twitter:title" content="10 Tips for Better JavaScript Code">
<meta name="twitter:description" content="Improve your JavaScript with these practical tips covering clean code, performance, and modern ES6+ features.">
<meta name="twitter:image" content="https://example.com/images/article-thumb.jpg">
<meta name="twitter:image:alt" content="JavaScript code on a dark background">
<!-- Image requirements for summary card:
Minimum: 144×144 pixels
Recommended: 400×400 pixels
Aspect ratio: 1:1 (square)
Max file size: 5MB
Formats: JPG, PNG, WEBP, GIF -->
Summary with Large Image Card
<!-- Large image card — prominent image above title -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@mywebsite">
<meta name="twitter:creator" content="@authorhandle">
<meta name="twitter:title" content="Getting Started with Docker and Kubernetes">
<meta name="twitter:description" content="A step-by-step guide to containerizing your applications and deploying them with Kubernetes.">
<meta name="twitter:image" content="https://example.com/images/docker-kubernetes-hero.jpg">
<meta name="twitter:image:alt" content="Docker and Kubernetes logos on a blue background">
<!-- Image requirements for summary_large_image:
Minimum: 300×157 pixels
Recommended: 1200×628 pixels
Aspect ratio: 2:1 (landscape)
Max file size: 5MB -->
Combined Twitter + Open Graph Tags
<!-- Complete social sharing meta tags (Twitter + Facebook/LinkedIn) -->
<!-- Open Graph (Facebook, LinkedIn, etc.) -->
<meta property="og:type" content="article">
<meta property="og:title" content="Getting Started with Docker and Kubernetes">
<meta property="og:description" content="A step-by-step guide to containerizing your applications.">
<meta property="og:image" content="https://example.com/images/docker-kubernetes-hero.jpg">
<meta property="og:url" content="https://example.com/blog/docker-kubernetes-guide">
<meta property="og:site_name" content="My Tech Blog">
<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@mywebsite">
<meta name="twitter:title" content="Getting Started with Docker and Kubernetes">
<meta name="twitter:description" content="A step-by-step guide to containerizing your applications.">
<meta name="twitter:image" content="https://example.com/images/docker-kubernetes-hero.jpg">
App Card
<!-- App card — promotes a mobile app -->
<meta name="twitter:card" content="app">
<meta name="twitter:site" content="@myapp">
<meta name="twitter:description" content="The best task manager for developers. Track issues, manage sprints, and ship faster.">
<meta name="twitter:app:name:iphone" content="DevTracker">
<meta name="twitter:app:id:iphone" content="123456789">
<meta name="twitter:app:url:iphone" content="devtracker://open">
<meta name="twitter:app:name:googleplay" content="DevTracker">
<meta name="twitter:app:id:googleplay" content="com.example.devtracker">
<meta name="twitter:app:url:googleplay" content="devtracker://open">
Player Card (Video/Audio)
<!-- Player card — embeds video/audio in tweet -->
<meta name="twitter:card" content="player">
<meta name="twitter:site" content="@mywebsite">
<meta name="twitter:title" content="Introduction to TypeScript — Video Tutorial">
<meta name="twitter:description" content="Learn TypeScript from scratch in this 30-minute video tutorial.">
<meta name="twitter:image" content="https://example.com/images/video-thumbnail.jpg">
<meta name="twitter:player" content="https://example.com/embed/video-id">
<meta name="twitter:player:width" content="1280">
<meta name="twitter:player:height" content="720">
Title and Description Best Practices
<!-- Title: max 70 characters (Twitter truncates longer titles) -->
<!-- Good (52 chars): -->
<meta name="twitter:title" content="10 JavaScript Tips Every Developer Should Know">
<!-- Too long (80 chars — will be truncated): -->
<meta name="twitter:title" content="The Complete Guide to JavaScript Best Practices for Modern Web Development">
<!-- Description: max 200 characters (Twitter shows ~2 lines) -->
<!-- Good (120 chars): -->
<meta name="twitter:description" content="Improve your JavaScript skills with these practical tips covering clean code, performance, and ES6+ features.">
Dynamic Meta Tags (Next.js)
// Next.js metadata API (app router)
export const metadata = {
title: 'Getting Started with Docker',
description: 'A step-by-step guide to containerizing your apps.',
openGraph: {
title: 'Getting Started with Docker',
description: 'A step-by-step guide to containerizing your apps.',
images: [{ url: 'https://example.com/og-image.jpg', width: 1200, height: 628 }],
},
twitter: {
card: 'summary_large_image',
site: '@mywebsite',
creator: '@authorhandle',
title: 'Getting Started with Docker',
description: 'A step-by-step guide to containerizing your apps.',
images: ['https://example.com/og-image.jpg'],
},
};
Validate Your Twitter Cards
// Tools to validate Twitter Card implementation:
// 1. Twitter Card Validator: https://cards-dev.twitter.com/validator
// 2. Open Graph Debugger: https://developers.facebook.com/tools/debug/
// 3. LinkedIn Post Inspector: https://www.linkedin.com/post-inspector/
// Common issues:
// - Image not showing: check image URL is publicly accessible
// - Wrong image size: verify aspect ratio matches card type
// - Title truncated: keep under 70 characters
// - Card not rendering: ensure meta tags are in <head>, not <body>
Card Type Comparison
- summary: small square thumbnail, title, description — good for articles
- summary_large_image: large landscape image, title, description — best for visual content
- app: promotes iOS/Android apps with store links
- player: embeds video or audio player in the tweet
Required Tags by Card Type
- All cards: twitter:card, twitter:title, twitter:description
- summary: twitter:image (optional but strongly recommended)
- summary_large_image: twitter:image (required for large image display)
- app: twitter:app:name:iphone or twitter:app:name:googleplay
- player: twitter:player, twitter:player:width, twitter:player:height, twitter:image
Enter your page details in the Twitter Card Generator and get the complete set of meta tags ready to paste into your HTML head section.