Astro with Cardsmith
The editor opens with a centred card and the Astro snippet. Put the snippet in your base layout and every page gets a share image built from its own title, without rendering images at build time.
- Adjust the design and save the template.
- Copy the Astro snippet into the head of your base layout.
- Pass each page title to the layout through props, as most Astro themes already do.
- Build, deploy and check a page with a link-preview tool.
What to know
Generating OG images inside an Astro build usually means satori, a font file in the repo and an extra endpoint per page, and a build that gets slower with every post. With a hosted template the build does nothing: the layout writes a URL and the image is drawn the first time a site asks for it.
Because the image is addressed by URL, it works the same with static output, SSR adapters and hybrid rendering. The only rule is that og:image must be an absolute URL, which the snippet already provides.
Add a subtitle or label parameter to show the collection or the date, and use the site parameter for your domain. Each card is 1200x630 PNG and stays in the CDN cache for 30 days after its first render.
Updated · Cosmovex
Questions
Does it slow down my Astro build?
No. Nothing is rendered at build time; the image is drawn on first request and then served from cache.
Can each collection have its own look?
On Pro you can save up to 20 templates, so blog, docs and changelog can each have a design.
What size are the images?
1200x630 PNG, the size used by the major social sites and chat apps.
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.
