Until recently, every link to Dokly — the homepage, /pricing, all eight free tools — shared the exact same social preview image when posted to Twitter, LinkedIn, Slack, or iMessage. One generic gradient screenshot, reused everywhere.
It's not a bad image on its own. The problem is it's the only image. Share a link to our llms.txt generator and someone sees the same picture as a share of the homepage. The preview told people nothing about which page they were about to open.
One route, every page#
We built /api/og — a single next/og route that renders a fresh 1200×630 image per request, built from query params each page passes in: a title, an optional eyebrow label, and a kind (default for marketing pages, tool for the free-tool pages).
Same template, different title, rendered on request instead of designed once in Figma. The visual language — cream paper background, Fraunces serif headline, JetBrains Mono eyebrow, a single orange accent dot — is the same system this blog and the rest of the marketing site already use, so a share card finally looks like it came from the same product as the page it links to.
It's wired into all eight free tools (llms.txt generator, README generator, changelog generator, release-notes generator, markdown table generator, CSV-to-Markdown, YAML↔JSON, OpenAPI-to-Markdown, GraphQL formatter) and into the marketing-wide default, which covers every page that doesn't set its own title.
Why this is a tools-page problem specifically#
Free tools are our best-performing pages — several rank top-10 on Google at a domain rating most companies would consider too low to compete at all. That ranking is earned almost entirely through organic sharing: someone finds a tool useful and posts the link. A generic preview image is friction at exactly the moment a share is about to happen — it's the first thing anyone sees before they click, and it gave no reason to believe the link was about CSV conversion, or YAML, or anything specific.
What it deliberately does not do#
No per-page design work. Nobody draws a new image for each tool. One React component, rendered server-side, takes a title string and produces a correctly-branded image every time — which also means a ninth tool gets a correct OG image for free the day it ships, with zero design time spent on it.
Not customizable by visitors. The query params are set by the page's own metadata, not by whoever is sharing the link — you can't construct an arbitrary /api/og?title= URL and expect it to represent a real Dokly page; nothing links to one that isn't wired into an actual route.
Cached for a year. Social crawlers (Twitter's, Slack's, LinkedIn's) each fetch a link's preview image roughly once and cache it on their end, so the route doesn't need to be fast on every request — it needs to be fast once, the first time a link gets shared, and then it's free.
See it yourself#
Paste any of these into Slack or a tweet composer and watch the preview load: the llms.txt generator, CSV to Markdown, or the homepage. If a share card ever looks wrong, the contact page reaches me directly.
Changelog entries#
Dynamic social preview images · Added · Every marketing and free-tool page now generates its own on-brand Open Graph image on share, instead of one static image reused site-wide.
