Twitter Card Generator
Build the twitter: meta tags that control how your links look when shared on X (Twitter). Choose a card type, fill in your title, description, image and handles, preview the result, then copy the tags into your page head.
How to create Twitter card tags
- Pick a card type: large image for a wide hero or summary for a small thumbnail.
- Enter your title, description, image URL and optional site and creator handles.
- Copy the generated meta tags and paste them inside your page's <head>.
Examples
Large image card
Large image, title, description and an image URL
<meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:title" content="My Page" /> <meta name="twitter:description" content="A short summary." /> <meta name="twitter:image" content="https://example.com/card.png" />
Frequently asked questions
What are Twitter (X) cards?
Twitter cards, now called X cards, are rich previews that appear when someone shares your link. The twitter: meta tags in your page head tell X which title, description and image to show, so a plain URL turns into a tidy preview card.
What is the difference between summary and summary_large_image?
A summary card shows a small square thumbnail next to the title and description. A summary_large_image card shows a large, full-width banner image above the text, which usually gets more attention in the feed.
Do I still need Twitter cards if I already have Open Graph tags?
Often you do not. X falls back to Open Graph tags (og:title, og:description, og:image) when twitter: tags are missing. Adding a twitter:card tag is still worth it so you can control the layout, and twitter:site or twitter:creator can attribute the post to your account.
What image size should I use?
For a large image card use roughly a 1.91:1 ratio, such as 1200 by 628 pixels. For a summary card use a square image of at least 144 by 144 pixels. Keep files under about 5 MB and use a JPG, PNG or WebP.
Do the site and creator handles need an @ symbol?
X expects handles to start with @. This tool adds the @ for you if you leave it off, so you can type either yoursite or @yoursite and get the same valid tag.
Is my data sent to a server?
No. The tags are generated entirely in your browser as you type, and nothing you enter is uploaded or stored.
Related tools
Open Graph Generator
Generate Open Graph meta tags for rich link previews on Facebook, LinkedIn and Slack. Fill in title, description, URL and image, then copy the HTML.
Meta Tag Generator
Generate clean HTML meta tags for any page. Set title, description, keywords, author and robots, then copy the head block. Runs in your browser.
Article Schema Generator
Generate Article, NewsArticle or BlogPosting JSON-LD schema. Add headline, author, publisher and dates, then copy the script into your page.
Breadcrumb Schema Generator
Build BreadcrumbList JSON-LD structured data. Add your breadcrumb trail, reorder the steps, then copy or download the script for your page.
Bulk Hreflang Generator
Generate hreflang annotations for many languages at once. Add language and URL rows, pick HTML, XML sitemap, or HTTP header output. Runs in your browser.
Canonical Tag Checker
Paste page HTML to find every rel=canonical link and catch issues: missing, duplicate, relative or wrong-target canonicals. Runs in your browser.