X / Twitter card with Cardsmith
The editor opens with a bold split card and the HTML snippet, which includes both the og:image and twitter:card tags. X needs both for the large image preview.
- Edit the text and colours and save the template.
- Copy the HTML snippet into the head of your page.
- Make sure twitter:card is summary_large_image; otherwise X shows a small square thumbnail.
- Post the link, or paste it in a link-preview checker, to confirm the large image.
What to know
X reads Open Graph tags as a fallback, so one og:image works for X, LinkedIn, Facebook, Slack and Discord. What decides the large preview on X is the twitter:card meta tag set to summary_large_image; without it the card falls back to a small thumbnail next to the text.
The image should be 1200x630 with the important text away from the edges, because some clients crop it towards a 2:1 shape. Cardsmith layouts keep a safe margin on every side, so the title stays readable in the crop X uses and in the slightly taller one LinkedIn uses.
X caches cards for a while after a link is first shared. If you change the design, the new image appears for links shared afterwards; posts that already went out may keep the older card until X refreshes its cache.
Updated · Cosmovex
Questions
What is the Twitter card image size?
For summary_large_image use 1200x630 pixels (about 1.91:1). Cardsmith always renders exactly that size.
Why does X show a small image?
The page is missing twitter:card set to summary_large_image, or the image URL is relative. The snippet includes both fixes.
Do I need separate images for X and LinkedIn?
No. One 1200x630 image works for both, plus Facebook, Slack and Discord.
Is Cardsmith free?
Yes: one template and 100 renders a day, with a small Cardsmith badge on the card. Pro removes the badge and allows 20 templates and 10,000 renders a day.
The free plan covers everything on this page. Cardsmith Pro ($9/mo, billed monthly) is described on the Cardsmith page.
