X / Twitter cards
X (formerly Twitter) reads OG too β but adds its own tags
The site rebranded to "X" in 2023 but every meta tag still uses the literal string twitter:*. The card preview hasn't changed; only the company name did.
<meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:site" content="@codementor_ai" /> <meta name="twitter:creator" content="@anna_dev" /> <meta name="twitter:image" content="https://example.com/og.png" /> <meta name="twitter:image:alt" content="A product logo" />
twitter:card β the only one that ALWAYS matters
summary β small thumbnail beside text summary_large_image β big image on top, text below player β video / audio player app β install card with App Store badge
summary_large_image is what you almost always want β visually it's the biggest, most engaging unfurl. Without this tag explicitly set, Twitter falls back to summary (small thumbnail).
twitter:site vs twitter:creator
twitter:siteβ your brand's handle (@codementor_ai).twitter:creatorβ the article author's handle (@anna_dev).
Both optional. twitter:site is the more important one β it links your brand into the share card.
When you can skip Twitter tags entirely
If you have a full set of OG tags + twitter:card="summary_large_image", Twitter renders perfectly. Some teams ship just that one Twitter tag and let everything else fall through to OG.
The image rule
Twitter wants a 2:1 aspect ratio (1200 Γ 600 or 1600 Γ 800) for summary_large_image. The 1200Γ630 OG image works fine β Twitter crops the top/bottom 15px (you won't notice).
Sign up to start coding
Theory is open to everyone. The interactive editor, live preview, and check are unlocked with a 7-day free trial β card required, cancel anytime.
Sign up β free trial βFirst 10 lessons in each track are free. No card needed for those.