Design your own link preview card in Stati

npm install -D @stati/images

images: {
  og: {
    // TTF, OTF or WOFF: Satori can't read WOFF2
    fonts: [{ name: 'Hanken Grotesk', path: './og/fonts/hanken-grotesk-latin-800-normal.woff', weight: 800 }],
    exclude: ['/404'],
  },
},

And site/og.eta, drawn at 1200 × 630 for every page:

<div style="display:flex;flex-direction:column;justify-content:space-between;width:100%;height:100%;padding:72px;background-color:#1a1c2c;color:#f4f4f4;font-family:'Hanken Grotesk'">
  <div style="display:flex;font-size:28px;opacity:0.7"><%= stati.site.title %></div>
  <div style="display:flex;font-size:72px;font-weight:800;line-height:1.1"><%= stati.page.title ?? '' %></div>
</div>

Stati adds og:image and the rest of the image tags to every page that doesn't set an image of its own. seo.openGraph.image: false in a page's front matter gives it none.

Satori, which draws the cards, has its own rules:

• Only inline style attributes: no classes, no <style> and no Tailwind.
• Flexbox only, and an element with more than one child needs display:flex.
• An og.eta covers its folder and the folders below, so a site/blog/og.eta gives the posts a card of their own.
• stati.content is empty in a card, and stati.og holds its width and height.

The dev server skips the cards unless images: { dev: 'full' }. A production build stops unless site.baseUrl is the site's public address, because og:image has to be an absolute URL.

In the Stati docs: Open Graph images, Designing the card and Fonts.