OG Image Generator

Create unique Open Graph images for every blog article automatically using post title, author, and publish date. Maintain consistent brand design while customizing each image with article-specific content.

// Automated blog post OG image generation
import { createCanvas, loadImage, registerFont } from 'canvas';
import fs from 'fs/promises';

interface BlogPost {
  title: string;
  author: string;
  date: Date;
  category: string;
}

registerFont('./fonts/Inter-Bold.ttf', { family: 'Inter', weight: 'bold' });
registerFont('./fonts/Inter-Regular.ttf', { family: 'Inter' });

async function generateBlogOGImage(post: BlogPost): Promise<Buffer> {
  const canvas = createCanvas(1200, 630);
  const ctx = canvas.getContext('2d');

  // Gradient background
  const gradient = ctx.createLinearGradient(0, 0, 1200, 630);
  gradient.addColorStop(0, '#6366F1'); // Indigo
  gradient.addColorStop(1, '#8B5CF6'); // Purple
  ctx.fillStyle = gradient;
  ctx.fillRect(0, 0, 1200, 630);

  // Logo in top-left
  const logo = await loadImage('./assets/logo-white.png');
  ctx.drawImage(logo, 60, 50, 150, 40);

  // Category badge
  ctx.fillStyle = '#10B981'; // Green
  roundRect(ctx, 60, 120, 180, 50, 8);
  ctx.fillStyle = 'white';
  ctx.font = 'bold 28px Inter';
  ctx.fillText(post.category.toUpperCase(), 80, 152);

  // Post title with word wrap
  ctx.fillStyle = 'white';
  ctx.font = 'bold 72px Inter';
  const titleLines = wrapText(ctx, post.title, 1080);
  let y = 250;
  for (const line of titleLines.slice(0, 3)) { // Max 3 lines
    ctx.fillText(line, 60, y);
    y += 85;
  },

  // Author and date at bottom
  ctx.font = '36px Inter';
  ctx.fillStyle = 'rgba(255, 255, 255, 0.9)';
  ctx.fillText(`By ${post.author}`, 60, 520);
  ctx.fillText(post.date.toLocaleDateString('en-US', {
    month: 'long',
    day: 'numeric',
    year: 'numeric'
  }), 60, 570);

  return canvas.toBuffer('image/png');
}

// Helper function for word wrapping
function wrapText(ctx: any, text: string, maxWidth: number): string[] {
  const words = text.split(' ');
  const lines: string[] = [];
  let currentLine = '';

  for (const word of words) {
    const testLine = currentLine + (currentLine ? ' ' : '') + word;
    const metrics = ctx.measureText(testLine);

    if (metrics.width > maxWidth && currentLine) {
      lines.push(currentLine);
      currentLine = word;
    } else {
      currentLine = testLine;
    }
  }

  if (currentLine) lines.push(currentLine);
  return lines;
},

// Helper for rounded rectangles
function roundRect(ctx: any, x: number, y: number, w: number, h: number, r: number) {
  ctx.beginPath();
  ctx.moveTo(x + r, y);
  ctx.arcTo(x + w, y, x + w, y + h, r);
  ctx.arcTo(x + w, y + h, x, y + h, r);
  ctx.arcTo(x, y + h, x, y, r);
  ctx.arcTo(x, y, x + w, y, r);
  ctx.closePath();
  ctx.fill();
}

// Generate for all blog posts
async function generateAllBlogImages() {
  const posts = await db.posts.findAll();

  for (const post of posts) {
    const buffer = await generateBlogOGImage(post);
    const filename = `og-${post.slug}.png`;

    // Save locally
    await fs.writeFile(`./public/og-images/${filename}`, buffer);

    // Upload to CDN
    const cdnUrl = await uploadToCloudflare(buffer, filename);

    // Update post with OG image URL
    await db.posts.update(post.id, { ogImage: cdnUrl });
  }

  console.log(`Generated ${posts.length} OG images`);
}

Generate product-specific Open Graph images displaying product photo, name, price, and availability. Optimize for social sharing to drive traffic from Facebook and Pinterest product pins.

// E-commerce product OG images
interface Product {
  name: string;
  price: number;
  currency: string;
  image: string;
  inStock: boolean;
  rating: number;
}

async function generateProductOGImage(product: Product): Promise<Buffer> {
  const canvas = createCanvas(1200, 630);
  const ctx = canvas.getContext('2d');

  // White background
  ctx.fillStyle = 'white';
  ctx.fillRect(0, 0, 1200, 630);

  // Product image on left side
  const productImg = await loadImage(product.image);
  const imgSize = 500;
  const imgX = 70;
  const imgY = (630 - imgSize) / 2;

  // Draw image with rounded corners
  ctx.save();
  roundRectPath(ctx, imgX, imgY, imgSize, imgSize, 20);
  ctx.clip();
  ctx.drawImage(productImg, imgX, imgY, imgSize, imgSize);
  ctx.restore();

  // Right side content
  const contentX = imgX + imgSize + 60;

  // Product name
  ctx.fillStyle = '#1F2937'; // Dark gray
  ctx.font = 'bold 56px Inter';
  const nameLines = wrapText(ctx, product.name, 480);
  let y = 150;
  for (const line of nameLines.slice(0, 3)) {
    ctx.fillText(line, contentX, y);
    y += 70;
  },

  // Price
  ctx.font = 'bold 72px Inter';
  ctx.fillStyle = '#DC2626'; // Red
  const priceText = `${product.currency}${product.price}`;
  ctx.fillText(priceText, contentX, y + 40);

  // Stock status
  y += 120;
  ctx.font = 'bold 32px Inter';
  if (product.inStock) {
    ctx.fillStyle = '#10B981'; // Green
    ctx.fillText('✓ In Stock', contentX, y);
  } else {
    ctx.fillStyle = '#EF4444'; // Red
    ctx.fillText('✗ Out of Stock', contentX, y);
  },

  // Rating stars
  y += 60;
  ctx.font = '36px Arial';
  ctx.fillStyle = '#FBBF24'; // Yellow
  const stars = '★'.repeat(Math.floor(product.rating)) +
                '☆'.repeat(5 - Math.floor(product.rating));
  ctx.fillText(stars + ` ${product.rating}/5`, contentX, y);

  // Brand logo in top-right
  const logo = await loadImage('./assets/shop-logo.png');
  ctx.drawImage(logo, 1050, 30, 120, 40);

  return canvas.toBuffer('image/png');
}

// Serverless function for on-demand generation
export async function generateProductImage(req: Request): Promise<Response> {
  const { productId } = await req.json();
  const product = await db.products.findById(productId);

  // Check cache first
  const cacheKey = `og:product:${productId}`;
  const cached = await redis.get(cacheKey);
  if (cached) {
    return new Response(Buffer.from(cached, 'base64'), {
      headers: { 'Content-Type': 'image/png' }
    });
  },

  // Generate image
  const buffer = await generateProductOGImage(product);

  // Cache for 24 hours
  await redis.setex(cacheKey, 86400, buffer.toString('base64'));

  return new Response(buffer, {
    headers: {
      'Content-Type': 'image/png',
      'Cache-Control': 'public, max-age=86400'
    }
  });
}

Create custom Open Graph images for marketing campaigns, announcements, and social media posts. Include compelling headlines, call-to-actions, and branded visuals that drive engagement.

// Marketing campaign OG image generator
interface Campaign {
  headline: string;
  subheadline: string;
  cta: string;
  theme: 'launch' | 'discount' | 'announcement' | 'feature';
}

const themeColors = {
  launch: { gradient: ['#FF6B6B', '#FF8E53'], accent: '#FFD93D' },
  discount: { gradient: ['#6A11CB', '#2575FC'], accent: '#FFE600' },
  announcement: { gradient: ['#0F2027', '#203A43'], accent: '#2C5364' },
  feature: { gradient: ['#43E97B', '#38F9D7'], accent: '#667EEA' }
};

async function generateCampaignOGImage(campaign: Campaign): Promise<Buffer> {
  const canvas = createCanvas(1200, 630);
  const ctx = canvas.getContext('2d');

  const colors = themeColors[campaign.theme];

  // Gradient background
  const gradient = ctx.createLinearGradient(0, 0, 1200, 630);
  gradient.addColorStop(0, colors.gradient[0]);
  gradient.addColorStop(1, colors.gradient[1]);
  ctx.fillStyle = gradient;
  ctx.fillRect(0, 0, 1200, 630);

  // Geometric shapes for visual interest
  ctx.globalAlpha = 0.1;
  ctx.fillStyle = 'white';
  ctx.beginPath();
  ctx.arc(1000, 100, 300, 0, Math.PI * 2);
  ctx.fill();
  ctx.beginPath();
  ctx.arc(200, 500, 250, 0, Math.PI * 2);
  ctx.fill();
  ctx.globalAlpha = 1;

  // Main headline
  ctx.fillStyle = 'white';
  ctx.font = 'bold 96px Inter';
  ctx.textAlign = 'center';
  const headlineLines = wrapText(ctx, campaign.headline, 1000);
  let y = 200;
  for (const line of headlineLines) {
    ctx.fillText(line, 600, y);
    y += 110;
  },

  // Subheadline
  ctx.font = '48px Inter';
  ctx.fillStyle = 'rgba(255, 255, 255, 0.9)';
  const subLines = wrapText(ctx, campaign.subheadline, 900);
  y += 20;
  for (const line of subLines) {
    ctx.fillText(line, 600, y);
    y += 60;
  },

  // CTA button
  const ctaWidth = 400;
  const ctaHeight = 80;
  const ctaX = (1200 - ctaWidth) / 2;
  const ctaY = 500;

  ctx.fillStyle = colors.accent;
  roundRect(ctx, ctaX, ctaY, ctaWidth, ctaHeight, 40);

  ctx.fillStyle = campaign.theme === 'discount' ? 'black' : 'white';
  ctx.font = 'bold 40px Inter';
  ctx.fillText(campaign.cta, 600, ctaY + 52);

  return canvas.toBuffer('image/png');
}

// API endpoint
app.post('/api/og/campaign', async (req, res) => {
  const campaign: Campaign = req.body;

  const buffer = await generateCampaignOGImage(campaign);

  // Upload to S3
  const key = `campaigns/og-${Date.now()}.png`;
  await s3.putObject({
    Bucket: 'marketing-assets',
    Key: key,
    Body: buffer,
    ContentType: 'image/png',
    CacheControl: 'max-age=31536000'
  });

  const url = `https://cdn.example.com/${key}`;

  res.json({ url });
});

Create multiple Open Graph image variants and A/B test to determine which designs drive the highest click-through rates from social shares. Track performance and deploy winning designs.

// OG image A/B testing
interface OGVariant {
  id: string;
  design: 'minimal' | 'bold' | 'photo' | 'illustrated';
  backgroundColor: string;
  textStyle: 'serif' | 'sans-serif';
}

const variants: OGVariant[] = [
  { id: 'v1', design: 'minimal', backgroundColor: '#FFFFFF', textStyle: 'sans-serif' },
  { id: 'v2', design: 'bold', backgroundColor: '#FF6B6B', textStyle: 'sans-serif' },
  { id: 'v3', design: 'photo', backgroundColor: '#1F2937', textStyle: 'serif' },
  { id: 'v4', design: 'illustrated', backgroundColor: '#6366F1', textStyle: 'sans-serif' }
];

// Generate variants for each blog post
async function generateVariants(post: BlogPost) {
  const images: Record<string, string> = {};

  for (const variant of variants) {
    const buffer = await generateOGImageWithStyle(post, variant);
    const filename = `og-${post.slug}-${variant.id}.png`;

    await uploadToCDN(buffer, filename);
    images[variant.id] = `https://cdn.example.com/${filename}`;
  }

  return images;
},

// Assign variant to user
function getOGVariant(postId: string, userId: string): string {
  const hash = simpleHash(postId + userId);
  const variant = variants[hash % variants.length];
  return variant.id;
}

// Meta tag with variant
export function generateMetadata({ post, userId }: any): Metadata {
  const variantId = getOGVariant(post.id, userId);
  const ogImageUrl = post.ogImages[variantId];

  // Track impression
  analytics.track('og_variant_shown', {
    postId: post.id,
    userId,
    variant: variantId
  });

  return {
    openGraph: {
      images: [{ url: ogImageUrl }]
    }
  };
},

// Track clicks from social
app.get('/from-social', (req, res) => {
  const { postId, variant, source } = req.query;

  analytics.track('social_click', {
    postId,
    variant,
    source // facebook, twitter, linkedin
  });

  res.redirect(`/blog/${postId}`);
});

// Analyze results
SELECT
  variant_id,
  COUNT(*) as impressions,
  SUM(CASE WHEN clicked THEN 1 ELSE 0 END) as clicks,
  (clicks * 100.0 / impressions) as ctr
FROM og_experiments
WHERE post_id = '123'
GROUP BY variant_id
ORDER BY ctr DESC;

// Results: variant v2 (bold design) increased CTR by 67%