Automating OG Images: From Manual Design to API-Driven Generation

The journey from manually creating OpenGraph images to implementing an automated API-driven system represents a critical evolution for growing web applications. Today, I'll share how I transformed this process at gleam.so, moving from individual Figma designs to an automated system handling thousands of images.

The Manual Phase: Understanding the Baseline

Initially, like many developers, I created OG images manually:

// Early implementation
const getOGImage = (postId: string) => {
  return `/images/og/${postId}.png`;  // Manually created in Figma
};

This process typically involved:

1. Opening Figma for each new image
2. Adjusting text and elements
3. Exporting to the correct size
4. Uploading and linking the image

Average time per image: 15-20 minutes.

First Step: Templating System

The first automation step involved creating reusable templates:

interface OGTemplate {
  layout: string;
  styles: {
    title: TextStyle;
    description?: TextStyle;
    background: BackgroundStyle;
  };
  dimensions: {
    width: number;
    height: number;
  };
}

const generateFromTemplate = async (
  template: OGTemplate,
  content: Content
): Promise<buffer> => {
  const svg = renderTemplate(template, content);
  return convertToImage(svg);
};
</buffer>

This reduced creation time to 5 minutes per image but still required manual intervention.

Building the API Layer

The next evolution introduced a proper API:

// api/og/route.ts
import { ImageResponse } from '@vercel/og';
import { getTemplate } from '@/lib/templates';

export const config = {
  runtime: 'edge',
};

export async function GET(request: Request) {
  try {
    const { searchParams } = new URL(request.url);
    const template = getTemplate(searchParams.get('template') || 'default');
    const content = {
      title: searchParams.get('title'),
      description: searchParams.get('description'),
    };

    const imageResponse = new ImageResponse(
      renderTemplate(template, content),
      {
        width: 1200,
        height: 630,
      }
    );

    return imageResponse;
  } catch (error) {
    console.error('OG Generation failed:', error);
    return new Response('Failed to generate image', { status: 500 });
  }
}

Implementing Caching Layers

Performance optimization required multiple caching layers:

class OGCache {
  private readonly memory = new Map<string buffer>();
  private readonly redis: Redis;
  private readonly cdn: CDNStorage;

  async getImage(key: string): Promise<buffer null> {
    // Memory cache
    if (this.memory.has(key)) {
      return this.memory.get(key);
    }

    // Redis cache
    const redisResult = await this.redis.get(key);
    if (redisResult) {
      this.memory.set(key, redisResult);
      return redisResult;
    }

    // CDN cache
    const cdnResult = await this.cdn.get(key);
    if (cdnResult) {
      await this.warmCache(key, cdnResult);
      return cdnResult;
    }

    return null;
  }
}
</buffer></string>

Resource Optimization

Handling increased load required careful resource management:

class ResourceManager {
  private readonly queue: Queue;
  private readonly maxConcurrent = 50;
  private activeJobs = 0;

  async processRequest(params: GenerationParams): Promise<buffer> {
    if (this.activeJobs >= this.maxConcurrent) {
      return this.queue.add(params);
    }

    this.activeJobs++;
    try {
      return await this.generateImage(params);
    } finally {
      this.activeJobs--;
    }
  }
}
</buffer>

Integration Example

Here's how it all comes together in a Next.js application:

// components/OGImage.tsx
export function OGImage({ title, description, template = 'default' }) {
  const ogUrl = useMemo(() => {
    const params = new URLSearchParams({
      title,
      description,
      template,
    });
    return `/api/og?${params.toString()}`;
  }, [title, description, template]);

  return (
    
      <meta property="og:image" content="{ogUrl}">
      <meta property="og:image:width" content="1200">
      <meta property="og:image:height" content="630">
    
  );
}

Performance Results

The automated system achieved significant improvements:

• Generation time:
• Cache hit rate: 95%
• Error rate:
• CPU usage: 15% of previous implementation
• Cost per image: $0.0001 (down from ~$5 in manual labor)

Key Learnings

Through this automation journey, several crucial insights emerged:

1. Image Generation Strategy

   • Pre-warm caches for predictable content
   • Implement fallbacks for failures
   • Optimize template rendering first

2. Resource Management

   • Implement request queuing
   • Monitor memory usage
   • Cache aggressively

3. Error Handling

   • Provide fallback images
   • Log failures comprehensively
   • Monitor generation metrics

The Path Forward

The future of OG image automation lies in:

1. AI-enhanced template selection
2. Dynamic content optimization
3. Predictive cache warming
4. Real-time performance tuning

Simplifying Implementation

While building a custom solution offers valuable learning experiences, it requires significant development and maintenance effort. That's why I built gleam.so, which provides this entire automation stack as a service.

Now you can:

• Design templates visually
• Preview all options for free
• Generate images via API (Open beta-test for lifetime users)
• Focus on your core product

75% off lifetime access ending soon ✨

Share Your Experience

Have you automated your OG image generation? What challenges did you face? Share your experiences in the comments!

---

Part of the Making OpenGraph Work series. Follow for more web development insights!

The above is the detailed content of Automating OG Images: From Manual Design to API-Driven Generation. For more information, please follow other related articles on the PHP Chinese website!