opengraph-images

Dynamic OpenGraph images in Next.js use the ImageResponse API to generate social preview graphics on demand. Create a route handler that returns an image response with custom layouts, fonts, and page-specific content, then reference it in your page metadata as the og:image property.

Yes, custom fonts work in OpenGraph images by loading font files from your assets/fonts directory. Pass the font data to ImageResponse with the font family name and weight, enabling branded typography in your social previews.

Use dynamic route segments in your image route handler to capture page identifiers and generate unique OG images per page. Extract the parameter, fetch or compute the page content, and return a customized ImageResponse for each route.

Standard OG image exports include alt text for accessibility, size dimensions (width and height), and contentType (typically image/png). These properties ensure proper rendering and fallback behavior across social platforms.

Use dynamic OG images when content changes frequently—blog posts, product pages, user profiles—or when you need to personalize social previews. Static images work only for fixed content; dynamic generation scales to unlimited pages without manual asset creation.