Open Graph images

Generated 1200×630 social cards for every page — branding, card layers, fonts for non-Latin scripts, and per-page overrides.

Blume can render a 1200×630 social card for every page at build time — no headless browser, thanks to Takumi, so builds stay fast. On by default once deployment.site is set or auto-detected (the og:image URL has to be absolute to be useful to crawlers), and off otherwise. Set enabled to override that either way:

seo: {
  og: { enabled: true }, // or false to opt out even with a site set
}

Brand the generated card

Set a local SVG and color palette to match the generated card to your brand. The logo can live in public/ or at the project root. Omit any palette value to keep its default.

seo: {
  og: {
    logo: "/logo/og.svg",
    palette: {
      accent: "#ff5410",
      background: "#1d1d1d",
      foreground: "#fff6f2",
      muted: "#a6a19f",
      border: "#323232",
    },
  },
}

By default, each card is derived from your content and theme — the page title as the headline, the page description as the subtitle (the same text as its og:description, so seo.description wins over description), your site title as the eyebrow, and your theme accent for the mark. Images are served at /og/<slug>.png, mirroring each route, and are prerendered as static files even in server mode:

Override the generated card for any page with seo.image — a file in public/ or an external URL. It takes precedence over the generated card and works even when og is off, so you can mix custom images with generated ones:

---
title: Pricing
seo:
  image: /og/pricing-custom.png
---

Emoji in a page title or site title render as Twemoji glyphs, fetched from a CDN while the card renders — so a build whose titles contain emoji needs network access. Each glyph is fetched once per build, however many pages use it.

Show, hide, or override card layers

Beyond the headline, the card carries three optional layers: the brand mark in the top-left (your logo, or an accent tile with the site title’s initial), the subtitle under the headline (the page description, or your site description for pages without one), and a footer with your repo slug (from github) and the site’s URL — the deployment site’s host plus deployment.base, so a GitHub Pages project site reads user.github.io/repo. Override any of them with a string of your own, or hide one with false:

seo: {
  og: {
    site: "docs.acme.com", // footer URL text, or false to hide it
    description: false, // hide the subtitle on every card; a string replaces the site fallback
    logo: false, // no brand mark at all — not even the initial tile
  },
}

Card fonts

By default the card renders in Takumi’s built-in font, which covers only Latin glyphs — a title in another script (Japanese, Chinese, Korean, Arabic, …) would render as tofu, empty boxes.

Set theme.fonts and the card follows it. When your config picks its own fonts, the generated cards automatically render the headline in your display font and the description and footer in your body font, so shared links match the site — including non-Latin coverage, with nothing to configure here. (Families from non-Google providers are skipped — the card renderer can only fetch from Google Fonts — but local font files work.)

To use different fonts on cards than on the site, or to add script coverage without touching the theme, set og.fonts explicitly — it always wins over the theme-derived fonts:

seo: {
  og: {
    fonts: [
      "Noto Sans JP",
      { name: "Inter", weight: [400, 700] },
      { name: "Berkeley Mono", src: "./fonts/BerkeleyMono-Regular.woff2" },
    ],
  },
}

Each entry is a Google Fonts family name, an object pinning its weight (a number, a list, or a variable range like "100..900") and style ("normal", "italic", or both), or a local font file — src resolves from the project root, with optional weight and style when the file’s own metadata shouldn’t decide.

Google families are fetched at build — so a build that uses them needs network access — and the renderer only pulls the glyph subsets each title actually uses. Fallback is per-glyph, so adding a family only affects glyphs the other fonts can’t draw.

An explicit og.fonts: [] opts out entirely: cards keep the built-in font even when theme.fonts is set.

Custom page titles

A custom .astro page has no frontmatter to read, so its generated card is titled by humanizing the last URL segment of its route — /getting-started becomes “Getting Started”, but /cli becomes “Cli”. Name those cards explicitly with og.titles, keyed by route ("/" addresses the home, whose card otherwise carries the site title):

seo: {
  og: {
    titles: {
      "/cli": "CLI",
    },
  },
}

Entries only apply to custom pages — a content page’s card always takes its headline from the page title, so retitle those in frontmatter instead.

seo.image is frontmatter, so it only covers Markdown and MDX content. To give a custom .astro page its own social image — a marketing home or landing page, and the way to give the home page alone a bespoke share image — pass the ogImage prop to PageLayout.