Generate Dynamic Open Graph Images for Every Page

Dynamic OG Image Generation

Static OG images (your logo or a generic banner) look the same for every shared link. Dynamic OG images capture the actual page content, making each share unique and significantly more clickable.

The ROI of Dynamic OG Images

Posts with custom preview images get 2-3x more clicks than those with generic images. For a SaaS product with 1,000 monthly shares, that's potentially 1,000-2,000 additional clicks per month from a simple image improvement.

Implementation

// Generate OG image on article publish
async function generateOGImage(articleUrl, slug) {
  const res = await fetch(
    `https://apisnap.dev/api/screenshot?url=${encodeURIComponent(articleUrl)}&width=1200&height=630&format=png`,
    { headers: { Authorization: `Bearer ${process.env.SNAPAPI_KEY}` } }
  );

  const buffer = Buffer.from(await res.arrayBuffer());

  // Store to S3/CDN
  await s3.putObject({
    Bucket: BUCKET, Key: `og/${slug}.png`,
    Body: buffer, ContentType: 'image/png',
    CacheControl: 'public, max-age=604800'
  }).promise();

  return `https://${BUCKET}.s3.amazonaws.com/og/${slug}.png`;
}

Template-Based Approach

Instead of screenshotting the actual page, create a dedicated OG template with your branding, the article title, and author info. This gives you complete control over the preview image's appearance and ensures consistent branding.

Platform-Specific Dimensions

The standard OG image size is 1200x630 (1.91:1). This works across Twitter, Facebook, LinkedIn, and Discord. Generate once at this size and it works everywhere.