Accessibility
Alt text for card images
How twitter:image:alt and og:image:alt work, the 420-character limit, what to write for photos, charts and title cards, and how plugins handle it.
Short answer
twitter:image:alt describes your card image for people using screen readers on X; it accepts up to 420 characters, falls back to og:image:alt, and should say what the image shows in a sentence or two rather than repeat the title.
Key takeaways
- Set og:image:alt; X falls back to it, and other platforms read it too.
- X allows up to 420 characters, but one or two sentences is usually right.
- Describe what is in the image, not the page's SEO keywords.
- For title cards that only repeat the headline, say so briefly.
Card images are the largest thing in a link post, and for someone using a screen reader they are invisible unless the page describes them. Two meta tags do that job.
What is twitter:image:alt?
It is the text description of your card image that X passes to screen readers, up to 420 characters, with og:image:alt as its fallback.
<meta name="twitter:image:alt" content="Two runners crossing a finish line in the rain">
<meta property="og:image:alt" content="Two runners crossing a finish line in the rain">
X's markup reference describes twitter:image:alt as a text description of the image for users who are visually impaired, with a maximum of 420 characters, and lists og:image:alt as the fallback. In practice you can set only og:image:alt and X will use it; writing both is harmless when they say the same thing.
What should I write?
One or two plain sentences that describe what someone would see, written as if telling a friend over the phone.
| Image | Weak alt | Better alt |
|---|---|---|
| Product photo | "Product image" | "Matte black water bottle with a bamboo lid on a desk" |
| Chart | "Chart" | "Bar chart: build time fell from 14 to 6 minutes after caching" |
| Screenshot | "Screenshot of app" | "Settings screen with the dark mode toggle switched on" |
| Title card | "OG image" | "The words 'Cutting our build time in half' on a blue background" |
| Team photo | "Our team" | "Six people standing in front of a whiteboard covered in sticky notes" |
A few rules of thumb:
- Lead with the subject. What is the image of? Then add the detail that matters for this post.
- Include text that appears in the image. If a chart or title card has words or numbers on it, put the important ones in the alt text.
- Skip "image of" and "picture of". Screen readers already announce that it is an image.
- Do not stuff keywords. It reads badly aloud and does nothing for search ranking.
- Stay well under 420 characters. The limit is a ceiling. Long descriptions are tiring to listen to; save detail for the page.
The W3C's alt decision tree is a good reference for the general question of what to write and when an image needs no description.
Where does the alt text show up?
Mostly in screen readers, which is exactly the point. Sighted users never see twitter:image:alt on X; it is announced when someone using VoiceOver, TalkBack or a desktop screen reader moves focus to the card image. Some other apps use og:image:alt the same way. Discord's documentation lists alt tags among the image properties it reads for og:image and twitter:image.
That shapes how you write it. The listener has already heard the post text, and often the card title, by the time they reach the image. Alt text that repeats the title word for word wastes their time; alt text that describes the photo, the chart's trend or the screenshot's key detail adds something they could not otherwise get.
Two practical consequences:
- Write it in the language of the page. Screen readers pick a voice from the language settings, and mixed-language alt text can be read with the wrong pronunciation.
- Keep it current. When you swap the card image, update the alt text in the same commit. A description of last year's image is worse than a generic one.
Do title cards need alt text?
Yes, a short one that says what the image is. When a card image only shows the headline on a colored background, the alt text can be the headline in quotes plus a few words of context, as in the table above. It tells a screen reader user that the image carries no extra information, which is useful in itself.
How do plugins and frameworks handle it?
Most fill og:image:alt from the image's alt text or not at all, so check.
- WordPress: the Media Library alt text field is where SEO plugins usually look first. Fill it in for featured images. Check the page source for
og:image:altto see whether your plugin outputs it. - Next.js:
openGraph.imagesandtwitter.imagesaccept analtproperty per image, which becomes the alt meta tag. - Astro, Hugo, plain HTML: add the tag yourself. The snippets tool includes it for each stack.
Testing it
- Paste your page's head into the inspector; it reports missing alt text and alt text over 420 characters.
- Post a test link in the composer with a screen reader running (VoiceOver on iOS and macOS, TalkBack on Android, NVDA on Windows) to hear what is announced.
- If your site generates card images automatically, make sure the generator also generates the alt text. A template such as "Title card: {title}" is better than nothing and costs nothing to add.
The card generator writes both alt tags from one field and counts the characters as you type.
Questions
Is twitter:image:alt required?
No, but without it a screen reader user gets no description of the image. It costs one line of HTML.
Should alt text include the page title?
Only if the title is the content of the image, as on a text-only title card. Otherwise describe the picture, because the title is already read out with the card.
What if the image is decorative?
Card images are rarely purely decorative, since they are the main visual of the post. A short description such as 'Abstract blue gradient' is still more useful than nothing.
Does alt text help SEO?
Card alt text is not a ranking factor for your page. Image alt attributes on the page itself help image search; the meta tag is about accessibility in social apps.