How to set up X (Twitter) cards
Social1 min readFixes 2 checks twitter-card, twitter-image
X reads its own card tags before falling back to Open Graph. summary_large_image with a wide image gets the most clicks.
Step by step, with screenshots: Link previews: Open Graph and Twitter cards that look right →
Check your own site
Runs these 2 checks and the other 185, free, in about 45 seconds.
What a passing site looks like
- Twitter card type is validwarning · −1.5 ptseffort S
- X (Twitter) cards have an imagewarning · −1 ptseffort S
1. Twitter card type is missing or invalid
Why it matters. X (Twitter) shows a preview card only when twitter:card has a valid type. Without it a shared link is plain text, even with Open Graph tags in place.
How to fix it.
- Add <meta name="twitter:card" content="summary_large_image"> to show the share image at full width.
- Use "summary" instead for a small square thumbnail beside the text.
2. No image for X (Twitter) cards
Why it matters. X uses twitter:image, or falls back to og:image. With neither, the card shows text only and gets far fewer clicks.
How to fix it.
- Add <meta name="twitter:image" content="https://…/share.jpg">, or set og:image; X reads that as a fallback.