Twitter Card Meta Tag Generator
Generate Twitter Card meta tags for compelling link previews on Twitter/X
Configure Tags
0/60 characters
0/160 characters
Generated Code
<meta name="robots" content="index, follow"> <meta property="og:type" content="website"> <meta name="twitter:card" content="summary_large_image"> <meta name="theme-color" content="#000000"> <meta name="viewport" content="width=device-width, initial-scale=1">
💡 Tip: Copy these tags and paste them inside the <head> section of your HTML document.
Other Meta Tag Generators
About Twitter Card Meta Tag Generator
Twitter Card meta tags control how your links appear when shared on Twitter/X. Without them, shared links appear as plain text URLs — easily overlooked in a fast-moving feed. With proper Twitter Card tags, your links expand into rich media previews with large images, titles, and descriptions that stop the scroll and drive engagement.
Twitter's card system is separate from Open Graph — while Twitter does fall back to OG tags when twitter: tags are absent, relying solely on OG tags often produces suboptimal results. The critical difference is the twitter:card type tag, which explicitly sets whether your preview appears as a compact summary card or a large image card. This single tag has an outsized impact on click-through rates.
The Twitter Card meta tag generator produces correctly formatted tags for all card types with proper name attributes, handle formats, and image specifications. Copy-paste the output directly into your HTML head or Next.js metadata configuration.
Twitter Cards vs Open Graph Tags
Twitter Card tags use the name attribute (not property like OG tags) and the twitter: prefix. The most important tag is twitter:card which sets the card type — this determines whether you get a small summary card or a large image card, and it has no OG equivalent.
The four main card types serve different purposes. summary is a compact card with a small square thumbnail — good for text-focused content. summary_large_image shows a large banner image above the title — best for visual content, blog posts, and anything where image impact matters. app cards link to mobile apps with install buttons. player cards embed audio or video directly in the timeline.
For most websites and content, summary_large_image is the correct choice. It delivers maximum visual impact and consistently outperforms the summary card in click-through rate benchmarks. The only reason to choose summary over summary_large_image is when your content is purely text-focused and you don't have a compelling image to show.
Key Considerations
Card Type is Critical
twitter:card is the single most important Twitter tag. Use summary_large_image for any page with compelling visual content. Without this tag, Twitter may default to a summary card or no card at all, regardless of how well your other tags are configured. Always set this explicitly — never rely on defaults.
Handle Format
twitter:site and twitter:creator values must include the @ symbol (e.g., @yourbrand, not yourbrand). twitter:site is your brand's Twitter account. twitter:creator is the individual content author's account. Both are optional but add credibility and make it easy for readers to follow you from the preview card.
Image Specifications
For summary_large_image, use images of at least 1200x628px. Images must be under 5MB, in JPG, PNG, WEBP, or GIF format, served over HTTPS. Twitter's crawler (Twitterbot) must be able to access the image — ensure it's not blocked in robots.txt.
Robots.txt Access for Twitterbot
Twitter's crawler identifies as Twitterbot. If your robots.txt blocks all bots or has restrictive rules, Twitterbot may be unable to fetch your page or images, causing card generation to fail. Explicitly allow Twitterbot in robots.txt if you have restrictive crawl rules.
Common Twitter Card Tag Issues
Card Type Errors
- •Missing twitter:card tag — Twitter cannot determine card format without it
- •Using summary when summary_large_image would be far more impactful
- •Incorrect card type value — must be exactly summary or summary_large_image
- •Using property= attribute instead of name= on twitter: tags
Image Issues
- •Image under minimum size displaying as small thumbnail despite large card type
- •Image using HTTP URL — Twitter requires HTTPS
- •Image blocked for Twitterbot in robots.txt preventing card image loading
- •Image over 5MB causing card to render without image
Handle and Attribution
- •Missing @ symbol in twitter:site or twitter:creator values
- •twitter:creator pointing to brand account instead of individual author
- •Suspended or renamed Twitter account referenced in twitter:site
- •Inconsistent handle casing across pages
Implementation Guide
Complete Twitter Card Tag Set
All recommended Twitter Card tags for a content page:
<head>
<!-- Twitter Card tags — use name= not property= -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@YourBrandHandle" />
<meta name="twitter:creator" content="@AuthorHandle" />
<meta name="twitter:title" content="Your Title for Twitter Feed" />
<meta name="twitter:description" content="Compelling description under 200 characters." />
<meta name="twitter:image" content="https://yourdomain.com/twitter-card.jpg" />
<meta name="twitter:image:alt" content="Descriptive alt text for accessibility" />
<!-- Always include OG tags as fallback -->
<meta property="og:title" content="Your Page Title" />
<meta property="og:image" content="https://yourdomain.com/og-image.jpg" />
</head>Next.js 15 Twitter Card Metadata
Configure Twitter Card tags using the Next.js metadata API:
// app/your-page/page.tsx
export const metadata = {
twitter: {
card: "summary_large_image",
site: "@YourBrandHandle",
creator: "@AuthorHandle",
title: "Your Page Title for Twitter",
description: "Twitter-optimised description under 200 characters.",
images: [
{
url: "https://yourdomain.com/twitter-card.jpg",
alt: "Descriptive alt text",
},
],
},
openGraph: {
title: "Your Page Title",
description: "Your description",
images: ["https://yourdomain.com/og-image.jpg"],
},
};Allow Twitterbot in robots.txt
Ensure Twitter's crawler can access your pages and images:
# robots.txt
User-agent: *
Allow: /
User-agent: Twitterbot
Allow: /
# Next.js robots.ts equivalent:
export default function robots() {
return {
rules: [
{ userAgent: "*", allow: "/" },
{ userAgent: "Twitterbot", allow: "/" },
],
sitemap: "https://yourdomain.com/sitemap.xml",
};
}Common Use Cases
- Setting up Twitter Cards for a new site before launch
- Upgrading from summary to summary_large_image cards site-wide
- Adding author attribution to content creator accounts
- Generating Twitter tags for product pages and landing pages
- Debugging why Twitter shows small cards instead of large image previews
Pro Tip
Test your Twitter Card tags by sending your URL to yourself in a Twitter/X DM — this is the fastest way to see exactly how your card renders in the actual interface. The visual difference between a summary card and a summary_large_image card is dramatic and immediately motivates fixing the card type.