Playground

Link previews

Every card `/api/og` draws, at the real size, from the real endpoint. Build these URLs with ogImageUrl() from constants/og.constants.ts and never by hand.

The site's cardWhat a page gets when it says nothing: the masthead, with the hero in the two lines it fits on. This is the default layout now, so most pages on the site are a version of this tile.
The site's card/api/og?t=Grow+traffic+24%2F7.&a=Win+on+AI+search.&v=masthead&r=5
Masthead, a page titleWhat almost every page gets: its own title, at the top of the ladder, with nothing above it. A page's eyebrow is NOT drawn here; the size is worth more than the kicker was.
Masthead, a page title/api/og?t=Publish+anywhere%3A+Webflow%2C+Ghost%2C+Notion%2C+WordPress&r=5
Masthead, a short titleUnder 22 characters the title goes to 96px, which is the loudest this card gets.
Masthead, a short title/api/og?t=Free+SEO+tools&r=5
Masthead, a long titleWhere the ladder bottoms out: three lines at 44px, still clear of the engines and the mark.
Masthead, a long title/api/og?t=How+to+get+your+brand+cited+by+ChatGPT%2C+Claude%2C+Perplexity+and+Gemini+in+2026&r=5
Developer surface (standard, paper)Docs and the MCP pages keep the standard card: the reader wants the page's own title and the sentence under it, and the robot has nothing to say about an API key. The asterisk runs at full orange here, and the type and the footer stop short of it. Pass DEV_DOCS_CARD.
Developer surface (standard, paper)/api/og?t=API+Keys+Reference&d=Reference+documentation+for+managing+API+keys%3A+create%2C+validate%2C+update%2C+and+delete+keys+for+secure+authentication.&e=Developers&v=standard&r=5
Pricing (standard, orange)Colourways belong to the standard card, so a page that wants the loud ground asks for that layout too.
Pricing (standard, orange)/api/og?t=Everything+for+the+price+of+one+freelance+article&d=Start+with+a+%241%2Fday+trial.+Cancel+from+the+dashboard%2C+no+call%2C+no+contract.&e=Pricing&th=orange&v=standard&c=%241%2Fday+trial%7C60+articles%2Fmo&r=5
Standard, long title, no descriptionThe clamp doing its job. Three lines, then the footer, and clear of the asterisk.
Standard, long title, no description/api/og?t=How+to+get+your+brand+cited+by+ChatGPT%2C+Claude%2C+Perplexity%2C+Gemini+and+Google+AI+Overviews+in+2026&e=Guide&v=standard&r=5
StatFor anything that IS a number: an audit score, a prompt volume.
Stat/api/og?t=Your+site+scores+62+for+AI+visibility&d=Run+the+free+audit+and+see+which+answers+you+are+missing+from.&e=AI+visibility+audit&v=stat&s=62&sl=out+of+100&r=5
Stat, five glyphsWhere the figure has to step down a size to fit its column.
Stat, five glyphs/api/og?t=Prompts+your+buyers+actually+type+into+AI&e=Prompt+volume&th=paper&v=stat&s=27.6K&sl=monthly+prompts&r=5
Split with art (ink)Article covers and screenshots. Falls back to standard when the image is missing.
Split with art (ink)/api/og?t=The+2026+state+of+AI+citations&d=What+200%2C000+prompts+say+about+where+AI+answers+get+their+sources.&e=Research&th=ink&v=split&img=https%3A%2F%2Fomnifamous.com%2Fmarketing%2Fresearch-masthead.png&r=5