Social previews

Glyphfield renders its own link previews with next/og. Each card is a PNG on a dark canvas: the Glyphfield mark and name, a headline set in Inter Display, and a footer under a hairline rule. The right side shows real product material. The home, docs and /api/og cards show one frame of the dithered swirl shader that fills the mark in the landing hero. The Studio card shows a capture of the Design Lab over the same field.

Routes

The file-based routes are prerendered at build time, and Next.js writes their og:image and twitter:image tags with the size and alt text each route exports.

Layout

The headline is the largest text on every card. The typesetter tries sizes from 96 px down to 52 px, balances the line lengths, and keeps the largest size at which the title fits the left column in two lines, as long as that size is at least 72 px. Otherwise it keeps the largest size that fits in three lines, and a longer title gets more lines at the largest size at which they fit. On the home card the phrase "the whole brand." starts its own line in violet, as it does on the landing page.

A docs card uses the page title as its headline. The footer names the page's sidebar section, such as Studio · Design Lab, and its address under glyphfield.com/docs.

The cards use static cuts of Inter, because next/og cannot read Inter Variable: Inter Display SemiBold for headlines and Inter Regular and Medium for the other text. next/og places words by their unkerned width, so the typesetter measures each word with the font's own kerning and corrects its position. Run python3 scripts/generate-og-assets.py to rebuild the fonts, their metrics and the Studio capture in public/og/.

Crawler access

/robots.txt is generated by src/app/robots.ts. It allows the preview routes for Twitterbot and the Facebook, LinkedIn, Discord, Slack, Telegram, and Pinterest link-preview crawlers. Keep the following Twitter block when changing the crawler policy:

User-Agent: Twitterbot
Allow: /
Allow: /api/og
Allow: /api/og-home
Allow: /opengraph-image
Allow: /twitter-image

An Allow rule does not create an image endpoint. The route must return a successful image/png response without authentication, cookies, JavaScript, or browser-only state.

Verification

Before deploying, check all three layers:

1. Fetch /robots.txt with the crawler user agent and confirm the image path is allowed.
2. Inspect the page HTML for absolute og:image and twitter:image values.
3. Fetch that exact image URL and confirm a 200 response with content-type: image/png.

Social networks cache previews independently. A correct redeploy may still require the network's card debugger or a versioned image URL before the old card disappears.

Dynamic preview endpoint

GET /api/og returns a 1200 × 630 PNG in the same layout. It accepts these query parameters. A title or description over its limit ends at its last whole word with an ellipsis.

These routes are Glyphfield's own site previews. Brand OpenGraph images are made in the OpenGraph tool.