Dynamic OG Image Generation
Relevant source files
The following files were used as context for generating this wiki page:
Dynamic OG Image Generation creates custom Open Graph (OG) images for the website at build time. The system generates 1200x630 pixel PNG images featuring page titles, site branding, and optional featured photos. This ensures that every page shared on social media platforms displays professional, consistent, and context-aware visual previews.
Sources: src/utils/og.ts:1-6, src/pages/og/[...slug].png.ts:7-31
System Architecture
The generation process starts with Astro's static path generation, which identifies all published pages requiring an image. For each path, the system constructs an SVG representation using internal utilities, then renders that SVG into a high-quality PNG buffer using the resvg-js library.
Core Components
| Component | Description |
|---|---|
| API Route | [...slug].png.ts acts as the entry point, defining static paths and returning PNG responses. |
| SVG Builder | buildOgSvg constructs a raw SVG string with titles, logos, and photos. |
| Renderer | renderOgPng converts SVG strings into PNG buffers using the Inter font. |
| Path Resolver | resolveOgPhotoPath locates local asset files based on content metadata. |
Sources: src/pages/og/[...slug].png.ts:33-45, src/utils/og.render.ts:60-80, src/utils/og.ts:66-93
Image Generation Workflow
The following diagram illustrates the transformation from page metadata to the final image response.
The workflow ensures that images are pre-rendered and served with the correct image/png content type.
Sources: src/pages/og/[...slug].png.ts:7-45
SVG Construction and Styling
The system uses a 1200x630 canvas with specific color constants:
- Background:
#122023 - Foreground:
#f4f3ec - Muted:
#c6c6bd
Sources: src/utils/og.ts:2-5, src/utils/og.ts:16-18
Title Wrapping Logic
To prevent visual overflow, the system wraps titles based on character limits. If a photo is present, the limit is more restrictive.
- Max Characters (Standard): 18
- Max Characters (with Photo): 12
- Max Lines: 3 (truncates with "…" if exceeded)
Sources: src/utils/og.ts:25-28, src/utils/og.ts:40-64
Visual Elements
The SVG includes several layers:
- Background Rect: Fills the entire 1200x630 canvas.
- Photo Layer: If provided, an
<image>tag is placed flush on the right side with a width of 520px. - Branding Bar: A 12px wide vertical muted bar on the left edge.
- Logo: The site logo is rendered using SVG paths and scaled to 0.75.
- Title Text: Rendered using the Inter font at size 76, centered vertically relative to the number of lines.
- Mark: The site identifier (e.g., "lukemcdonald.com") placed at the bottom left.
Sources: src/utils/og.ts:66-93
Technical Implementation Details
Asset Resolution
The system must resolve image paths from various formats (Vite asset paths, local paths, or @fs paths) to absolute file system paths. This is handled by resolveOgPhotoPath, which checks multiple candidates against src/assets/images.
Sources: src/utils/og.render.ts:27-58
Rendering Process
The rendering engine utilizes resvg-js to ensure high-fidelity output.
Sources: src/utils/og.render.ts:60-80
Content Schema Integration
Content collections include OG image metadata within the seo object of the page frontmatter. The ogImage field allows manual overrides of the dynamically generated path.
// src/features/pages/pages.schema.ts
seo: z.object({
description: z.string().optional(),
ogImage: z.string().optional(),
title: z.string().optional(),
}).optional()
Sources: src/features/pages/pages.schema.ts:13-17
SEO and Social Integration
The buildSocialMetaTags utility connects generated images to HTML <meta> tags. By default, it uses the generated path derived from the page slug (e.g., /og/about.png).
- og:image: Absolute URL to the PNG.
- og:image:width: Fixed at 1200.
- og:image:height: Fixed at 630.
- twitter:card: Set to
summary_large_image.
Sources: src/utils/seo/social.ts:18-35, src/utils/og.ts:2-5
Conclusion
The Dynamic OG Image Generation system provides an automated solution for social sharing visuals. By combining SVG templating with a robust PNG rendering engine, the project ensures that all content paths—including the home page and the resume—receive customized, brand-aligned previews without requiring manual image creation.