Open Graph images
A social preview image is generated for every page at build time.
On this page
Every page gets its own 1200×630 preview image, the one social networks and chat apps show when its link is shared. Images are generated during the build, written to og/<page>.png at the root of the site, and referenced with the og:image meta tag, which X and the others read as well, alongside a summary_large_image Twitter card.
Nothing is required to turn this on: it follows the og option, which defaults to true.
| Element | Source |
|---|---|
| Logo and site name | The logo and title options |
| Title | The page title, in a smaller size when it is long |
| Description | The page description, when it has one |
| Folders | The breadcrumb trail, or the path for a top-level page |
| Badges | Language and version, when the site has several |
Colors follow the accent of the site, so a card looks like the page it points to.
One image is generated per page, per language and per version, each with its own title and badges. A French page of the previous version is previewed by /og/fr/v1/installation.png, labelled Français and v1.
Untranslated pages are covered too: they fall back to the default language, so their card carries the text that is actually served.
Rendering is done in-process with satori and a WebAssembly build of resvg, with no browser and no network. Count about 90 ms per image, and a second of setup for the first one.
Turn it off if you do not need it:
zenith({
title: 'My Docs',
og: false,
});With og: false, no image is generated and no meta tag is added. Override the Head component to point at images you provide yourself:
---
import Default from 'zenith-docs/components/layout/Head.astro';
const { url, title } = Astro.locals.zenith;
---
<Default />
<meta property="og:image" content={new URL(`/social${url}cover.png`, Astro.site)} />
<meta property="og:image:alt" content={title} />
<meta name="twitter:card" content="summary_large_image" />