\n `summary` vs{\" \"}\n `summary_large_image`\n

\n When you paste a link into X/Twitter, Slack, iMessage, Discord, etc., the\n unfurled preview is controlled by Open Graph and{\" \"}\n Twitter card meta tags. The single tag that decides small-thumbnail\n vs big-banner is:\n

\n        {`\n\n`}\n

\n\n

\n `summary` — small square thumbnail\n

\n \n

\n `summary_large_image` — big banner\n

\n \n

\n\n

See it for real

\n These previews above are mockups. To see how real crawlers render them,\n open the two live pages and paste their URLs into a card validator:\n

\n /summary{\" \"}\n — has twitter:card=summary + a square image\n
\n \n /summary-large-image\n {\" \"}\n — has twitter:card=summary_large_image + a wide image\n

\n Validators that show a live render:{\" \"}\n Twitter Card Validator,{\" \"}\n opengraph.xyz,{\" \"}\n microlink cards.\n

\n\n

Cheat sheet

\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n

	`summary`	`summary_large_image`
Layout	Small square thumb beside text	Big banner above text
Image ratio	1:1 (square)	1.91:1 (wide)
Recommended size	≥ 144×144, up to 4096×4096	1200×630
Best for	Text-first content, logos, avatars	Image-first content, launches, art

\n ,\n );\n});\n\n// ---------------------------------------------------------------------------\n// Shared component for the two live demo pages' meta tags.\n// ---------------------------------------------------------------------------\ntype DemoMeta = {\n card: \"summary\" | \"summary_large_image\";\n base: string;\n path: string;\n title: string;\n description: string;\n imagePath: string;\n};\n\nconst DemoHead = ({ card, base, path, title, description, imagePath }: DemoMeta) => {\n const pageUrl = `${base}${path}`;\n const imageUrl = `${base}${imagePath}`;\n return (\n \n {title}\n \n \n \n {/* Open Graph (used by Slack, iMessage, Discord, LinkedIn, Facebook) */}\n \n \n \n \n \n {/* Twitter card — THIS tag decides small vs large */}\n \n \n \n \n \n \n \n );\n};\n\nconst DemoBody = ({ card, tags }: { card: string; tags: string }) => (\n \n

\n ← Back to the demo\n

\n This page uses `twitter:card = {card}`\n

\n Paste this page's URL into a card validator to see it unfurl. The exact\n meta tags in this page's <head> are:\n

{tags}

\n \n);\n\n// ---------------------------------------------------------------------------\n// Live demo page: summary\n// ---------------------------------------------------------------------------\napp.get(\"/summary\", (c) => {\n const base = baseUrl(c);\n const title = \"summary card demo\";\n const description =\n \"This page declares twitter:card=summary, so crawlers show a small square thumbnail next to the text.\";\n const imageUrl = `${base}/og/summary.svg`;\n const tags = `\n\n\n\n`;\n return c.html(\n \n \n \n ,\n );\n});\n\n// ---------------------------------------------------------------------------\n// Live demo page: summary_large_image\n// ---------------------------------------------------------------------------\napp.get(\"/summary-large-image\", (c) => {\n const base = baseUrl(c);\n const title = \"summary_large_image card demo\";\n const description =\n \"This page declares twitter:card=summary_large_image, so crawlers show a full-width 1.91:1 banner above the text.\";\n const imageUrl = `${base}/og/wide.svg`;\n const tags = `\n\n\n\n`;\n return c.html(\n \n \n \n ,\n );\n});\n\n// ---------------------------------------------------------------------------\n// OG image endpoints (dynamically generated SVGs).\n// ---------------------------------------------------------------------------\nconst svgHeaders = { \"Content-Type\": \"image/svg+xml; charset=utf-8\", \"Cache-Control\": \"public, max-age=3600\" };\napp.get(\"/og/summary.svg\", () => new Response(squareOgImage(), { headers: svgHeaders }));\napp.get(\"/og/wide.svg\", () => new Response(wideOgImage(), { headers: svgHeaders }));\n\n// Static files\napp.get(\"/public/*\", (c) => serveFile(c.req.path));\n\n// View source on Val Town\napp.get(\"/source\", (c) => c.redirect(parseVal().links.self.val));\n\n// Unwrap and rethrow Hono errors as the original error\napp.onError((err) => Promise.reject(err));\n\nexport default app.fetch;\n",[147],"c9cb5945-adf1-4e55-8e78-20767f4d4a32","README.md","019f1e5f-437d-7454-b1bc-b05f88f3c4d4",6,["D",1782921091434],"# og-card-demo\n\nA tiny demo showing the difference between the two Twitter/OG link-preview card\ntypes: **`summary`** (small square thumbnail) vs **`summary_large_image`**\n(full-width banner).\n\nThe only tag that flips between them is:\n\n```html\n\n\n\n```\n\n## Routes\n\n| Route | What it is |\n| --- | --- |\n| `/` | Explainer with a **side-by-side mockup** of both cards + a cheat sheet |\n| `/summary` | Live page with `twitter:card=summary` and a 1:1 image |\n| `/summary-large-image` | Live page with `twitter:card=summary_large_image` and a 1.91:1 image |\n| `/og/summary.svg` | Generated 600×600 (1:1) OG image |\n| `/og/wide.svg` | Generated 1200×630 (1.91:1) OG image |\n\n## Files\n\n```\nindex.tsx Hono app: home page + two live demo pages + OG image routes\nCardPreview.tsx Visual mockup of how each card unfurls in a feed\nog-image.tsx Dynamically generated SVG OG images (square + wide)\n```\n\n## How to actually see the difference\n\nThe cards on `/` are HTML mockups. To see how real crawlers render the two live\npages, paste their URLs into a card validator:\n\n- Twitter Card Validator — \n- opengraph.xyz — \n- microlink cards — \n\n```mermaid\nflowchart LR\n A[Paste link] --> B{twitter:card?}\n B -->|summary| C[Small square thumb
beside text]\n B -->|summary_large_image| D[Full-width 1.91:1
banner above text]\n```\n\n## Note on SVG images\n\nThe OG images here are **SVG**, which keeps the demo dependency-free. Most\nplatforms (Slack, iMessage, Discord) and validators render them fine, but\n**X/Twitter itself prefers PNG/JPEG** for `og:image`. If you're building a real\nsite, generate a **PNG at 1200×630** (e.g. with `@vercel/og` / Satori) instead\nof an SVG.\n\n## Cheat sheet\n\n| | `summary` | `summary_large_image` |\n| --- | --- | --- |\n| Layout | Small square thumb beside text | Big banner above text |\n| Image ratio | 1:1 | 1.91:1 |\n| Recommended size | ≥ 144×144 | 1200×630 |\n| Best for | Text-first content, logos, avatars | Image-first content, launches, art |\n\nRemix this val to make it your own.\n",[155],"c8979a3b-8e70-49b1-9f6e-c1ecf018ca2a","CardPreview.tsx","ab055e10-7564-11f1-a5fb-1607ee4eb77e",4,["D",1782921065148],"/** @jsxImportSource npm:hono@4/jsx */\n\n/**\n * A visual mockup of how a link unfurls in a social feed, for each\n * twitter:card variant. These are approximations of the X/Twitter layout —\n * the real render is done by each platform's crawler.\n */\nexport function CardPreview({\n variant,\n domain,\n url,\n title,\n description,\n image,\n}: {\n variant: \"summary\" | \"summary_large_image\";\n domain: string;\n url: string;\n title: string;\n description: string;\n image: string;\n}) {\n if (variant === \"summary_large_image\") {\n return (\n \n $\"\"$ \n

{domain}

{title}

{description}

\n \n );\n }\n\n // summary: small square thumbnail beside the text\n return (\n \n $\"\"$ \n

{domain}

{title}

{description}

\n \n );\n}\n",[162],"4d713e29-a434-4f77-86e8-464cba9f1eb6","019f1e5f-437d-7454-b1bc-ae5283e770d7",["D",1782920987381],"directory",[28],"pulls","branches","forks","envVars",{"_180":43,"_182":43},"connections",{"_180":43,"_181":43},"count","unfilledCount","emptyCount",{"_18":168,"_20":28,"_131":169,"_133":-5,"_134":69,"_135":150,"_137":39,"_22":209,"_66":43,"_139":171,"_141":-5,"_143":26,"_144":-5,"_190":210,"_90":211},{"_18":202,"_20":203,"_131":204,"_133":169,"_134":69,"_135":150,"_137":39,"_22":205,"_66":43,"_139":101,"_141":206,"_143":26,"_144":-5,"_190":207,"_90":208},{"_18":161,"_20":162,"_131":163,"_133":-5,"_134":69,"_135":164,"_137":39,"_22":199,"_66":43,"_139":140,"_141":166,"_143":26,"_144":-5,"_190":200,"_90":201},{"_18":154,"_20":155,"_131":156,"_133":-5,"_134":69,"_135":157,"_137":39,"_22":196,"_66":150,"_139":101,"_141":159,"_143":26,"_144":-5,"_190":197,"_90":198},{"_18":146,"_20":147,"_131":37,"_133":-5,"_134":69,"_135":148,"_137":39,"_22":193,"_66":150,"_139":151,"_141":152,"_143":26,"_144":-5,"_190":194,"_90":195},{"_18":129,"_20":130,"_131":132,"_133":-5,"_134":69,"_135":136,"_137":39,"_22":189,"_66":43,"_139":140,"_141":142,"_143":26,"_144":-5,"_190":191,"_90":192},["D",1782921003213],"children",[],[130],["D",1782921050663],[],[147],["D",1782921091434],[],[155],["D",1782921065148],[],[162],"0983a9fc-c7c1-4df6-b893-a51c99c8032f","favicon.svg","019f1e5f-437d-7454-b1bc-aa96fa4385ad",["D",1782920987381],"\n",[],[28,203],["D",1782920987381],[184],[28],["D",1782920987381],{"_16":17,"_88":84},{"_16":17,"_82":-5,"_83":84,"_34":35,"_85":86,"_87":26},{"_66":67,"_20":68,"_18":69,"_70":19,"_71":72,"_73":74,"_75":28,"_76":77,"_78":79,"_80":21,"_81":17},"ctx",{"_59":-5,"_111":249,"_250":251,"_252":253,"_254":26,"_255":26,"_256":26,"_257":39,"_258":-5,"_259":-7,"_260":-7,"_261":43,"_262":26,"_263":26,"_264":-5,"_265":26,"_266":26,"_267":26,"_268":-5},"ENV",{"_220":221,"_222":223,"_224":68,"_225":226,"_227":228,"_229":230,"_231":232,"_233":234,"_235":236,"_237":238,"_239":240,"_241":242,"_243":244,"_245":246,"_247":248},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","5015b8df46402d8bba4f485ecc37aec202b0e06b","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

\n summary vs{\" \"}\n summary_large_image\n

\n summary — small square thumbnail\n

\n summary_large_image — big banner\n

See it for real

Cheat sheet

\n This page uses twitter:card = {card}\n

\n `summary` vs{\" \"}\n `summary_large_image`\n

\n `summary` — small square thumbnail\n

\n `summary_large_image` — big banner\n

\n This page uses `twitter:card = {card}`\n

Search