Val Town is a collaborative website to build and scale JavaScript apps.
Deploy APIs, crons, & store data – all from the browser, and deployed in milliseconds.
A tiny demo showing the difference between the two Twitter/OG link-preview card
types: summary (small square thumbnail) vs summary_large_image
(full-width banner).
The only tag that flips between them is:
<meta name="twitter:card" content="summary" /> <!-- vs --> <meta name="twitter:card" content="summary_large_image" />
| Route | What it is |
|---|---|
/ | Explainer with a side-by-side mockup of both cards + a cheat sheet |
/summary | Live page with twitter:card=summary and a 1:1 image |
/summary-large-image | Live page with twitter:card=summary_large_image and a 1.91:1 image |
/og/summary.svg | Generated 600×600 (1:1) OG image |
/og/wide.svg | Generated 1200×630 (1.91:1) OG image |
index.tsx Hono app: home page + two live demo pages + OG image routes
CardPreview.tsx Visual mockup of how each card unfurls in a feed
og-image.tsx Dynamically generated SVG OG images (square + wide)
The cards on / are HTML mockups. To see how real crawlers render the two live
pages, paste their URLs into a card validator:
- Twitter Card Validator — https://cards-dev.twitter.com/validator
- opengraph.xyz — https://www.opengraph.xyz/
- microlink cards — https://cards.microlink.io/
Rendering mermaid diagram...
The OG images here are SVG, which keeps the demo dependency-free. Most
platforms (Slack, iMessage, Discord) and validators render them fine, but
X/Twitter itself prefers PNG/JPEG for og:image. If you're building a real
site, generate a PNG at 1200×630 (e.g. with @vercel/og / Satori) instead
of an SVG.
summary | summary_large_image | |
|---|---|---|
| Layout | Small square thumb beside text | Big banner above text |
| Image ratio | 1:1 | 1.91:1 |
| Recommended size | ≥ 144×144 | 1200×630 |
| Best for | Text-first content, logos, avatars | Image-first content, launches, art |
Remix this val to make it your own.