Hugo with Cardsmith
The editor opens with the classic layout and the Hugo snippet, which passes .Title through urlquery. Add it to your head partial and every page gets its own share image.
- Change the design to match your theme and save it.
- Copy the Hugo snippet into layouts/partials/head.html, or your theme override of it.
- Remove any older og:image tag from the theme so there is only one.
- Run hugo, deploy and check a page in a link-preview tool.
What to know
Hugo can generate images with its image processing pipeline, but text on images needs fonts, positioning code and a resource per page, and it adds to build time on large sites. A hosted template keeps the build exactly as fast as before: the head partial writes one URL per page.
Use urlquery on every value you pass so titles with spaces, ampersands or quotes stay intact. You can pass .Section as the label or .Site.Title as the site, and a page parameter as the subtitle. The partial applies to every page type, including list and taxonomy pages.
Many themes already print an og:image from images or featured_image in front matter. Override the partial rather than editing the theme, and keep the front-matter image for pages where you want a photo instead of a card.
Updated · Cosmovex
Questions
Does it work with any Hugo theme?
Yes. It is a single meta tag in the head; override the theme partial that prints the head.
Will it slow down hugo builds?
No. Nothing is generated during the build.
Can I pass the section as a label?
Yes. Add &label={{ .Section | urlquery }} to the image URL.
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.
