Every page on the wiki currently shares one social preview image — the ecosystem hero shot — set globally in astro.config.mjs:
<meta property="og:image" content="https://wiki.tigersystem.io/assets/hero-tigersystem-ecosystem.png"/>
Identical on /products/tigertag/, on /developers/ttag-format/, on everything. og:title and og:description are already per-page and correct, and twitter:card is summary_large_image — so the card is large and the picture is the only part carrying no information.
That matters because of where these links get pasted: Discord, where the whole ecosystem's support happens. Ten links to ten different pages currently produce ten identical thumbnails, which is worse than no image — it makes them look like the same link.
What to do
Per section is the right granularity to start — one image for products/, compatibility/, developers/, concepts/, tutorials/, guides/, philosophy/ + vision/, press/, and a default. Enough to distinguish a card at a glance without becoming a design chore per page.
The assets already exist and shouldn't be reinvented: docs/assets/icons/*.svg (one per product), docs/assets/brands/*.svg (one per printer maker), docs/assets/logos/*.svg, plus the product screenshots.
Two implementation routes:
- Static, one file per section. Simplest, and
scripts/sync-docs.mjs already knows a page's section — it can inject the right og:image into the frontmatter it generates. Roughly an hour, no new dependency.
- Generated at build time, one card per page with the page title composed onto a branded background (
@vercel/og or astro-og-canvas). Better result — every link is distinguishable — at the cost of a dependency and a build step.
Route 1 is worth doing first. It is most of the benefit, and it does not block route 2 later.
Watch out for
- The
og:image must be an absolute URL, and it must survive the sync: public/ is regenerated on every build, so the images belong in site/public/ (committed) rather than being dropped into public/ by hand.
- Size: 1200×630, under 1 MB, PNG or JPEG. Discord and Slack cache aggressively — expect old thumbnails to persist for a while after the change.
- French pages should get the same image as their English counterpart unless someone wants localised cards; the section is the same either way.
Every page on the wiki currently shares one social preview image — the ecosystem hero shot — set globally in
astro.config.mjs:Identical on
/products/tigertag/, on/developers/ttag-format/, on everything.og:titleandog:descriptionare already per-page and correct, andtwitter:cardissummary_large_image— so the card is large and the picture is the only part carrying no information.That matters because of where these links get pasted: Discord, where the whole ecosystem's support happens. Ten links to ten different pages currently produce ten identical thumbnails, which is worse than no image — it makes them look like the same link.
What to do
Per section is the right granularity to start — one image for
products/,compatibility/,developers/,concepts/,tutorials/,guides/,philosophy/+vision/,press/, and a default. Enough to distinguish a card at a glance without becoming a design chore per page.The assets already exist and shouldn't be reinvented:
docs/assets/icons/*.svg(one per product),docs/assets/brands/*.svg(one per printer maker),docs/assets/logos/*.svg, plus the product screenshots.Two implementation routes:
scripts/sync-docs.mjsalready knows a page's section — it can inject the rightog:imageinto the frontmatter it generates. Roughly an hour, no new dependency.@vercel/ogorastro-og-canvas). Better result — every link is distinguishable — at the cost of a dependency and a build step.Route 1 is worth doing first. It is most of the benefit, and it does not block route 2 later.
Watch out for
og:imagemust be an absolute URL, and it must survive the sync:public/is regenerated on every build, so the images belong insite/public/(committed) rather than being dropped intopublic/by hand.