What is a Twitter card?

How it works

The card types in use:

• summary: a small square thumbnail next to the title and description.
• summary_large_image: a large image above the text. This is the one most sites use.
• player: embedded audio or video, which requires approval.
• app: a card promoting a mobile app.

Other tags: twitter:title, twitter:description, twitter:image, twitter:image:alt, and twitter:site for the publisher's @username. X's crawler reads these from the server HTML and caches the result.

X has changed how cards display several times. In late 2023 it stopped showing titles and descriptions on large-image cards in the timeline, showing the image with the domain overlaid instead. That makes the image the main thing people see.

Example

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@kilncoffee" />
<meta name="twitter:title" content="The 16:1 Rule for Better Pour-Over" />
<meta name="twitter:description" content="One ratio, three variables, and a 3-minute pour schedule." />
<meta name="twitter:image" content="https://example.com/images/pour-over-share.jpg" />
<meta name="twitter:image:alt" content="Pour-over dripper on a glass carafe" />

In WordPress

WordPress core outputs no card tags. Hydrogen SEO outputs summary_large_image cards, lets you set an X-specific title and description per post in the SEO Settings sheet, and falls back to Open Graph values, then the SEO title and description, for anything left empty. The Social screen sets your X username for twitter:site and a site-wide switch for the tags. See X card settings.

Common mistakes

• Forgetting twitter:card, which leaves X to fall back to a small summary layout.
• Images with text near the edges that get cropped.
• Assuming the old card validator still previews cards. X removed the preview from its validator, so test by posting from a test account or composing a post.