Twitter Template: The Meta Tags That Control Your Card
Learn the exact Open Graph and Twitter meta tags that control how your link looks on X, with a copy-paste template, image sizes, and fixes for broken cards.
Twitter Template: The Meta Tags That Control How Your Link Looks
A Twitter template is the small block of HTML meta tags you place in your page's <head> that tells X (formerly Twitter) how to render your link when someone shares it: the headline, the description, and the preview image. The short answer to "what goes in a Twitter card template?" is a handful of twitter: tags plus a set of Open Graph (og:) tags as a fallback. Get those right and your link turns into a rich card with a large image instead of a bare blue URL.
This guide teaches you exactly which tags matter, what each value does, the image sizes X expects, and how to copy-paste a working template into any site. We will walk through a complete, real example in <code> blocks so you can see the structure, then cover validation and common mistakes. When you would rather skip the hand-coding, the free Twitter Card Generator builds the whole block for you in your browser, no signup, so you can paste it straight into your template.
What a Twitter Card Actually Is
When you paste a link into a post on X, the platform sends a crawler to your URL and reads the meta tags in your HTML head. From those tags it assembles a "card" - the visual preview attached to the post. There are two card types you will use in practice:
- Summary card - a small square thumbnail next to the title and description. Good for text-heavy pages and quick links.
- Summary card with large image - a full-width banner image above the title and description. This is the high-engagement format most marketers want.
X also supports player cards (for video and audio) and app cards (for mobile app install links), but the two summary types cover the vast majority of websites and blogs. Choosing between them is a single tag value, which we cover below.
If you set no card tags at all, X falls back to your Open Graph tags. If you have neither, your link shows as plain text with no image - the difference between a post people scroll past and one they click.
The Core Twitter Template Tags
Here is the minimum set of tags that produce a large-image card. Every value is a placeholder you replace with your own page's details. These go inside <head>.
The four essential Twitter-specific tags are:
twitter:card- the card type:summaryorsummary_large_imagetwitter:title- the headline shown on the card (keep it under ~70 characters)twitter:description- one or two sentences (under ~200 characters)twitter:image- an absolute URL to the preview image
Written as HTML, the block looks like this:
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="How to Compress Images for Faster Pages">
<meta name="twitter:description" content="A plain-English guide to shrinking image files without losing quality.">
<meta name="twitter:image" content="https://example.com/images/compress-hero.png">
Optional but recommended tags
Two more tags improve attribution and accessibility:
twitter:site- your site's @handle, e.g.@yourbrand, shown as the source.twitter:image:alt- alt text describing the preview image for screen readers.
As HTML:
<meta name="twitter:site" content="@yourbrand">
<meta name="twitter:image:alt" content="Before and after of a compressed product photo">
Why You Still Need Open Graph Tags
Here is a detail that trips up a lot of people: X reads Open Graph tags as a fallback. If you only set og: tags and no twitter: tags, X will still build a card from them. In practice the cleanest approach is to set both - Open Graph for Facebook, LinkedIn, Slack, Discord, and most other platforms, plus a few Twitter-specific tags to control the card type and attribution.
The Open Graph equivalents map almost one to one:
| Open Graph tag | Twitter equivalent | What it controls |
|---|---|---|
og:title | twitter:title | The card headline |
og:description | twitter:description | The supporting text |
og:image | twitter:image | The preview image |
og:url | (uses page URL) | The canonical link |
og:type | (no equivalent) | Content type, e.g. website or article |
Because of this overlap, a smart template sets Open Graph for the shared values and adds only twitter:card and twitter:site on the Twitter side. That keeps your head clean and avoids contradictory values.
A Complete Worked Example
Below is a full, production-ready template combining Open Graph and Twitter tags for a single blog post. This is the kind of block the Twitter Card Generator outputs, ready to paste between your <head> tags.
<!-- Open Graph (used by most platforms and as Twitter fallback) -->
<meta property="og:type" content="article">
<meta property="og:url" content="https://example.com/blog/compress-images">
<meta property="og:title" content="How to Compress Images for Faster Pages">
<meta property="og:description" content="A plain-English guide to shrinking image files without losing quality.">
<meta property="og:image" content="https://example.com/images/compress-hero.png">
<!-- Twitter-specific -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@yourbrand">
<meta name="twitter:image:alt" content="Before and after of a compressed product photo">
Notice that the title, description, and image are defined once on the Open Graph side and reused by X automatically. Only the card type, the site handle, and the image alt text are Twitter-specific. This is the most maintainable pattern, because you update one set of values and both networks stay in sync.
Image Sizes and Requirements
The image is what makes or breaks engagement, and X has specific expectations. Getting the dimensions wrong is the single most common reason a card looks cropped or blurry.
| Card type | Recommended size | Aspect ratio | Notes |
|---|---|---|---|
summary_large_image | 1200 x 628 px | 1.91:1 | Full-width banner, highest engagement |
summary | 240 x 240 px or larger, square | 1:1 | Small thumbnail beside the text |
A few practical rules for the image:
- Use an absolute URL (starting with
https://), never a relative path. Crawlers cannot resolve relative paths. - Keep the file under about 5 MB; oversized images may be ignored.
- Stick to JPG, PNG, or WebP. Animated GIFs render as a static first frame.
- Put important content in the center, away from edges, since cards crop differently on mobile and desktop.
How to Add and Test Your Twitter Template
The process is the same whether you hand-code or generate the block. Follow these steps in order.
- Generate or write the tags. Fill in your real title, description, image URL, and handle. The free Twitter Card Generator does this in seconds and shows a live preview so you can see the card before you ship it.
- Paste them into your
<head>. In WordPress, an SEO plugin usually has fields for these. In a static site or custom app, paste the block directly into your template's head section. - Use absolute URLs. Double-check the
twitter:imageandog:urlvalues resolve when opened directly in a browser. - Validate. Run the live URL through X's Card Validator (or share it in a private draft) to confirm the card renders. X caches aggressively, so re-validating forces a fresh fetch.
- Clear the cache if needed. If you fixed a tag but still see the old card, the crawler is serving a cached version. Re-submitting the URL to the validator usually refreshes it.
One caution: X caches your card for a while after the first crawl. If you change the image and the old one still shows, that is the cache, not your code. Give it time or re-run the validator.
Common Mistakes That Break Twitter Cards
When a card refuses to render, it is almost always one of these:
- Relative image URLs.
/images/hero.pngwill not work; it must be the fullhttps://address. - Tags outside the
<head>. Meta tags placed in the body are ignored. - A blocked crawler. If your
robots.txtor a firewall blocks the X bot, it cannot read your tags. - Image too small or wrong ratio. A tiny image downgrades a large-image card to a summary card or none at all.
- Stale cache. You fixed it, but the validator was never re-run to refresh the preview.
- Duplicate conflicting tags. Two
twitter:titletags with different values confuse the parser; keep one of each.
Put Your Twitter Template to Work
A good Twitter template is short: define your title, description, and image once with Open Graph tags, add twitter:card and twitter:site for control and attribution, use a 1200 x 628 image at an absolute URL, then validate. Do that and every link you share turns into a clean, clickable card instead of a bare URL.
The fastest way to get a correct, copy-paste-ready block is the free Twitter Card Generator, which previews the card live as you type and outputs both Open Graph and Twitter tags. For more on configuring and maintaining your site, browse the full Website Management Tools hub. You may also find our guides to checking an SSL certificate and running a WHOIS lookup useful when you are getting a new domain share-ready.
Frequently Asked Questions
What is a Twitter card template?
It is a block of HTML meta tags in your page's <head> that tells X how to display your link when shared - the title, description, and preview image. The core tags are twitter:card, twitter:title, twitter:description, and twitter:image, usually paired with Open Graph tags as a fallback.
Do I need both Open Graph and Twitter tags?
You do not strictly need both, because X reads Open Graph tags as a fallback. The cleanest setup defines the title, description, and image once with Open Graph tags (which also serve Facebook, LinkedIn, Slack, and others) and adds only twitter:card and twitter:site on the Twitter side.
What image size should a Twitter card use?
For a large-image card use 1200 x 628 pixels at a 1.91:1 ratio. For a small summary card, a square image of at least 240 x 240 pixels works. Always use an absolute https:// URL and keep the file under about 5 MB.
Why is my Twitter card not showing?
The usual causes are a relative (non-absolute) image URL, meta tags placed outside the <head>, a crawler blocked by robots.txt, an image that is too small, or a stale cache. Re-running the URL through X's Card Validator refreshes the preview and surfaces most errors.
What is the difference between summary and summary_large_image?
The summary card shows a small square thumbnail beside the title and description. The summary_large_image card shows a full-width banner image above the text and typically drives more engagement. You switch between them with the single twitter:card value.
How do I test my Twitter card before posting?
Run your live URL through X's Card Validator, or use a generator that shows a live preview as you fill in the fields. The free Twitter Card Generator previews the card in your browser so you can confirm the layout before adding the tags to your site.
How long until my updated card appears?
X caches cards after the first crawl, so a change may not appear immediately. Re-submitting the URL to the Card Validator usually forces a fresh fetch and updates the preview within a few minutes.
Do Twitter cards affect SEO?
Card tags do not directly change your search rankings, but they increase click-through rate on social posts, which drives more traffic. The Open Graph tags you set for cards also help every other platform render your link cleanly, so the work pays off well beyond X.