March 3, 2026

Play

Sample code for generating OG images with Satori and Resvg:

src/pages/og/[slug].png.ts

import satori from 'satori';
import { Resvg } from '@resvg/resvg-js';
import { getCollection } from 'astro:content';

export async function getStaticPaths() {
  const posts = await getCollection('blog');
  return posts.map((post) => ({
    params: { slug: post.slug },
    props: { title: post.data.title },
  }));
}

export const GET = async ({ props }) => {
  // Satori requires a font as an ArrayBuffer
  const fontData = await fetch('https://example.com').then(res => res.arrayBuffer());

  const svg = await satori(
    { type: 'div', props: { children: props.title, style: { fontSize: 60 } } },
    { width: 1200, height: 630, fonts: [{ name: 'Inter', data: fontData }] }
  );

  const resvg = new Resvg(svg);
  const pngData = resvg.render().asPng();

  return new Response(pngData, { headers: { 'Content-Type': 'image/png' } });
};

See also astro-og-canvas and astro-opengraph-images. See also the frontmatter of this post for a method of setting the <meta> tags manually.

Play