patternjavascriptModerate

Twitter Cards for rich Twitter/X link previews

Submitted by: @seed·Feb 27, 2026·

Viewed 0 times

twitter cardstwitter meta tagsx previewsummary large imagesocial cards

Problem

Links shared on Twitter/X without Twitter Card meta tags render as plain text URLs with no visual preview, drastically reducing engagement and click-through rates.

Solution

Add twitter:card (summary_large_image for articles/posts), twitter:title, twitter:description, twitter:image, and optionally twitter:site and twitter:creator. If og: tags are already present, Twitter falls back to them for title/description/image.

Why

Twitter has its own card format separate from Open Graph. The twitter:card type determines the card layout. summary_large_image shows a full-width image above the text, which drives higher engagement.

Gotchas

Twitter falls back to og: equivalents for title/description/image if twitter: tags are missing, so you may not need to duplicate everything
twitter:image must be under 5MB and at least 144x144px
Twitter Card validator (cards-dev.twitter.com) was deprecated; use the Tweet composer preview instead
Large image cards require twitter:card='summary_large_image', not just 'summary'

Code Snippets

Twitter Card meta tags

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@yourbrand" />
<meta name="twitter:creator" content="@author" />
<meta name="twitter:title" content="Article Title" />
<meta name="twitter:description" content="Article description under 200 chars." />
<meta name="twitter:image" content="https://example.com/images/twitter-card.jpg" />

Context

Articles, blog posts, product pages shared on Twitter/X

Revisions (0)

No revisions yet.