How to Add Image Alt Text to an X Card Preview

A link preview can show an attractive photograph while giving a screen reader user very little information about it. For an X card, the image description belongs in twitter:image:alt. The headline and page summary serve different purposes.

This guide uses a fictional pottery workshop page to build that description, check the generated markup and keep it matched to the correct image. It covers website link cards rather than photographs uploaded directly to a social post.

Know which image the description belongs to

The official X developer announcement about card alt text documents twitter:image:alt as a companion to twitter:image, with a maximum of 420 characters. Use it to describe the image chosen for that card.

This metadata is separate from the alt attribute on an image embedded in your article. As MDN explains for the HTML image element, that attribute supplies a text replacement for the image within the page. Updating an article image does not by itself prove that your theme also updated the social card metadata.

Generate the tags with a paired image and description

1. Open the Twitter Card Generator and select summary_large_image for this example.
2. Enter https://example.com/pottery/ as the Page URL. This is a demonstration address; use your actual published address when preparing a real page.
3. Set the title to Weekend pottery workshop and the description to Small-group pottery lessons for complete beginners.
4. In twitter:image, enter the full image address, such as https://example.com/images/pottery-card.jpg.
5. Enter Three clay bowls beside a pottery wheel. in twitter:image:alt, click Generate Twitter Card Tags, then review the output and use Copy code.

The generator includes the alt tag only when an image URL is also present. Leaving the image field empty while filling in alt text will not produce that tag. Check both fields if the output seems incomplete.

For the example above, look for this pair in the generated code:

<meta name="twitter:image" content="https://example.com/images/pottery-card.jpg">
<meta name="twitter:image:alt" content="Three clay bowls beside a pottery wheel.">

Write for someone who cannot see the picture

W3C guidance for informative images recommends conveying the information or meaning relevant to the image in context. A concise sentence is often enough; a catalogue of every visible detail is usually unnecessary.

Compare three descriptions

• Too vague: Workshop image says little about the picture.
• Promotional: Best pottery classes pottery course pottery lessons repeats search phrases instead of describing the image.
• Specific: Three clay bowls beside a pottery wheel. tells the reader what the fictional photograph contains.

If the selected card image is instead a poster containing the workshop date and venue, those details may be the information the reader needs. Write a description for that poster. Do not reuse the bowl description just because the page title stayed the same.

Treat 420 characters as a ceiling rather than a target. For a complex chart, explain its key message briefly and make the fuller explanation available in the linked article. Keep essential booking details in ordinary page text too.

Understand what the local preview can check

The generator changes the preview shape when you switch card types and displays your title, summary and page domain. Its image area shows the entered image URL as text. It does not load that image, display the alt description in the mock card or test how an X client exposes it.

A tidy preview therefore cannot confirm image availability, the final crop or accessibility on the platform. Open the real image separately and check the composition. If it needs a different size, follow the image resizing guide while preserving its proportions.

Check the published metadata

Put the tags in the page head through the existing theme or SEO integration. If that integration already outputs card tags, update its values instead of pasting a competing second set. Inspect the public page source and find twitter:image and twitter:image:alt. Confirm they reference the intended image and description.

If you also maintain Open Graph metadata, the Open Graph specification defines og:image:alt separately. Review that image-description pair as well, especially if its image differs. The Open Graph article preview guide covers that wider setup.

Finally, inspect the actual shared card in the X client you use. Keep the source check and the platform check separate: correct markup is verifiable on your website, while the final presentation depends on the platform.