Why is my large image card showing as a small thumbnail on X?

X downgrades large-image cards when the image is missing, smaller than about 300×157, or failed to load when the crawler visited. The preview's placeholder state mirrors that behavior locally: with no image URL it shows "No image provided" on a blank area. Serve a valid image of at least 1200×630 and re-validate the URL in the Card Validator.

What are twitter:site and twitter:creator for?

twitter:site attributes the card to the publishing account — the brand's handle — and twitter:creator attributes it to the individual author's handle. X uses them to append attribution lines to the shared post and to help users follow the right account. Both are optional, but filling them builds brand and author visibility on every share.

How long can the card title and description be?

The counters track the title live and the description against 200 characters, and the rendered card clamps the title to one line and the description to two on the large layout. Keep the title under about 70 characters and the description under 200 so nothing is cut off mid-sentence; the line-clamp in the preview is your warning that the live card will trim text too.

Do Twitter Card tags override Open Graph tags?

Yes. X reads twitter:card and the twitter: fields first and only falls back to og: tags when the twitter versions are absent. If your site already emits Open Graph, adding this generator's twitter block gives X explicit control over the card type and handles, which is the reliable way to guarantee the layout you want.

How can I test the card after publishing?

X provides the Card Validator at cards-dev.x.com/validator: paste the live URL and it renders the card exactly as the crawler sees it, including any cached state. Because X caches cards aggressively, always re-validate after changing tags — if the old card still shows, the validator's refresh cycle will clear the cache and re-fetch the page.

SEO

Twitter Card Preview

Preview how a page renders as a Twitter/X card with meta tags.

twittercardpreviewsocialx

Loading tool…

Recommended tools

Namecheap

Affiliate links — we may earn a commission if you sign up.

About the Twitter Card Preview

The Twitter Card Preview lets you configure how a page will appear when shared on X and copies out the matching meta tags. Choose between the summary card (a small square thumbnail with text beside it) and summary_large_image (a full-width 2:1 image), then set the title, description, image URL, and both @handles — site and creator. The preview renders both card layouts faithfully: the large card clamps the title to one line and the description to two, while the summary card shows the square thumbnail on the left with title and description stacked on the right, and the domain above the title is derived from your image URL. If you omit the image, the preview shows a placeholder state, which mirrors how X falls back to a plain link preview when no valid image is found. Stats track card type, title and description length, and image presence, and the generated meta tags include twitter:card, twitter:title, twitter:description, twitter:image, twitter:site, and twitter:creator. Since posts with strong link cards earn significantly more engagement than bare URLs, checking both layouts before publishing is cheap insurance for every link your team shares.

Hand-written guide

Examples

Input

Card type: summary_large_image (default) · Title: "The Ultimate Guide to Sustainable Coffee" · Description: "A practical guide to choosing and brewing sustainable coffee at home." · Image: "https://example.com/card.png" · Site: "@fernandeslabs" · Creator: "@fernandeslabs"

Output

<!-- Twitter Card meta tags -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="The Ultimate Guide to Sustainable Coffee" />
<meta name="twitter:description" content="A practical guide to choosing and brewing sustainable coffee at home." />
<meta name="twitter:image" content="https://example.com/card.png" />
<meta name="twitter:site" content="@fernandeslabs" />
<meta name="twitter:creator" content="@fernandeslabs" />

Note: The preview renders the full-width 2:1 image with the domain example.com above the title. Stats show Card type: large and Has image: Yes.

Input

Card type: summary · Title: "Weekly Digest #42" · Description: "The five links worth your time this week."

Output

<!-- Twitter Card meta tags -->
<meta name="twitter:card" content="summary" />
<meta name="twitter:title" content="Weekly Digest #42" />
<meta name="twitter:description" content="The five links worth your time this week." />
<meta name="twitter:site" content="@fernandeslabs" />
<meta name="twitter:creator" content="@fernandeslabs" />

Note: Switching the card type changes the preview to the square-thumbnail-on-left layout and updates the first tag to content="summary". Without an image URL, no twitter:image tag is emitted.

Input

Card type: summary_large_image · Image left empty

Output

<!-- Twitter Card meta tags -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="The Ultimate Guide to Sustainable Coffee" />
<meta name="twitter:description" content="A practical guide to choosing and brewing sustainable coffee at home." />
<meta name="twitter:site" content="@fernandeslabs" />
<meta name="twitter:creator" content="@fernandeslabs" />

Note: The preview shows the "No image provided" placeholder in the image area, matching how X renders a large-image card without a usable image. The tag block omits twitter:image.

How to use

1
Pick a Card type from the selector: summary for a small square thumbnail or summary_large_image for a full-width image.
2
Edit the Title and Description fields — the description counter tracks characters against 200.
3
Add the Image URL and set the Site (@handle) and Creator (@handle) fields for attribution.
4
Review the card preview; for large cards the image area renders at 2:1 and the domain is derived from the image URL.
5
Copy the generated Twitter meta tags and place them in your page's <head>, then test a share in the X Card Validator.

Common use cases

Content team pre-publish checks — confirm the large-image card renders for every blog post before scheduling shares.
Brand handle consistency — verify site and creator attribution tags across author pages and team blogs.
Campaign launches — preview the exact card buyers see when sales tweets link to a landing page.
A/B card experiments — switch between summary and summary_large_image to compare engagement on the same URL.
Developer handoffs — generate the tag block once and paste it into templates instead of explaining card markup.
Reputation monitoring — check that reshared third-party content produces the intended card for your domain.

Technical SEO best practices

Use summary_large_image for content pages and summary only when a small square logo thumbnail is more appropriate, such as on blog index pages.
Keep the title under about 70 characters and the description under 200 so card text is never cut off mid-sentence.
Serve card images at least 1200×630 for large cards; smaller images render in the legacy small format.
Fill both twitter:site and twitter:creator — the first credits the brand, the second the author, and both build attribution.
Test with the official X Card Validator after any template change, since X caches cards aggressively.
Keep the @handles exact — a typo attributes the card to a different account or to none at all.

Tips

Compare the large and summary layouts on the same content before deciding which suits the page.
Set a default image in your template so authors never publish cards with the "No image" placeholder.
Re-check the creator handle on guest posts — attribution should follow the author, not the site owner.
Validate the live page in the X Card Validator after every redesign.

Frequently asked questions

summary shows a small square thumbnail on the left with the title and description beside it, and is the fallback when no large image exists. summary_large_image displays a full-width image with the text below, which is what most publishers want for articles. The preview renders both layouts so you can compare them on your actual content before choosing.

Explore more seo tools

Browse the full collection of seo tools on the hub, or jump back to all categories.

All SEO tools All categories