How We Generate OG Images with Our Own API

Eating Our Own Dog Food

Every page on iterationlayer.com has a unique Open Graph image. Not a static fallback, not a screenshot — a generated image that matches the page's identity. We build these with the same Iteration Layer's Image Generation API we sell.

This seemed like an obvious thing to do. We already had the API. We already had the infrastructure. The only question was what the images should look like.

The Design

We wanted something that felt branded but wasn't boring. A solid-color background or a gradient would work, but it wouldn't stand out in a social feed full of gradients. So we built a generative wave pattern — deterministic SVG art seeded by the page slug.

The layout is simple:

White canvas at 1200x630 (the standard OG image size)
Generative wave pattern with rounded corners, inset from the edges
Logo and brand name at the bottom left
Tagline at the bottom right

Each page gets a unique wave pattern because the slug is different. The security page looks different from the pricing page, which looks different from this blog post. But they all share the same brand structure — logo, name, tagline, rounded corners.

The Wave Generator

The wave pattern is pure math. No external images, no templates. A hash of the page slug seeds the parameters — wave amplitude, frequency, phase, thickness, color — so every slug produces a repeatable, unique pattern.

The algorithm stacks seven wave bands vertically. Each band gets its own thickness and color from a palette of greys. A global sine wave sets the overall flow, then each band follows that flow with its own local variation. The bands are spaced with a minimum gap to keep them distinct.

The output is an SVG with Catmull-Rom spline paths. We render it through the same SVG pipeline that powers our image layers.

We extracted this into a shared WaveSvg module that both the OG image generator and our blog post header cards use. Same algorithm, different dimensions — the blog headers are 900x400, the OG images are 1200x630.

The Implementation

The OG image endpoint is straightforward. A controller takes the page slug, generates the image, and returns it as a JPEG with a 30-day cache header.

The generation itself is a single API call with five layers:

import { IterationLayer } from "iterationlayer";
const client = new IterationLayer({
  apiKey: "YOUR_API_KEY",
});

const waveSvgBase64 = generateWaveSvg(slug); // your wave generator
const logoSvgBase64 = Buffer.from(logoSvg).toString("base64");

const result = await client.generateImage({
  dimensions: {
    width_in_px: 1200,
    height_in_px: 630,
  },
  output_format: "jpeg",
  layers: [
    {
      index: 0,
      type: "solid-color",
      hex_color: "#FFFFFF",
    },
    {
      index: 1,
      type: "image",
      file: {
        type: "base64",
        name: "waves.svg",
        base64: waveSvgBase64,
      },
      position: {
        x_in_px: 20,
        y_in_px: 20,
      },
      dimensions: {
        width_in_px: 1160,
        height_in_px: 478,
      },
      border_radius: 24,
    },
    {
      index: 2,
      type: "image",
      file: {
        type: "base64",
        name: "logo.svg",
        base64: logoSvgBase64,
      },
      position: {
        x_in_px: 20,
        y_in_px: 542,
      },
      dimensions: {
        width_in_px: 56,
        height_in_px: 56,
      },
    },
    {
      index: 3,
      type: "text",
      text: "Iteration Layer",
      font_name: "Inter",
      font_size_in_px: 32,
      font_weight: "bold",
      text_color: "#000000",
      vertical_align: "center",
      position: {
        x_in_px: 90,
        y_in_px: 542,
      },
      dimensions: {
        width_in_px: 400,
        height_in_px: 56,
      },
    },
    {
      index: 4,
      type: "text",
      text: "Image & Document Extraction and Generation APIs",
      font_name: "Inter",
      font_size_in_px: 32,
      font_weight: "medium",
      text_color: "#6B7280",
      text_align: "right",
      vertical_align: "center",
      should_auto_scale: true,
      position: {
        x_in_px: 20,
        y_in_px: 542,
      },
      dimensions: {
        width_in_px: 1160,
        height_in_px: 56,
      },
    },
  ],
});

{
  "success": true,
  "data": {
    "buffer": "/9j/4AAQSkZJRgABAQ...",
    "mime_type": "image/jpeg"
  }
}

Layer 0 is a white background. Layer 1 is the wave SVG with border_radius: 24 — the API masks the corners with anti-aliased alpha blending, so the edges are smooth. Layers 2-4 are the logo, brand name, and tagline below the wave art.

The tagline uses should_auto_scale: true so it shrinks to fit if the text is too wide. The brand name uses vertical_align: "center" to align with the logo.

Features We Used

Building this with our own API exercised several features:

Solid-color layers with optional position/dimensions — the white background fills the full canvas
Image layers with border_radius — the wave SVG gets smooth rounded corners
SVG rendering — the wave pattern is inline SVG, passed as base64
Text auto-scaling — the tagline scales down to fit the available width
Vertical text alignment — the brand name centers vertically against the logo
JPEG output — OG images should be JPEG for file size

Why Not Puppeteer

We could have built an HTML template and rendered it with a headless browser. Every other site does. But we had a better tool.

The Image Generation API renders our OG images in under 200ms. No browser startup, no font loading, no CSS layout engine. The result is deterministic — same slug, same image, every time. And when we cache the response with a 30-day max-age, the endpoint serves instantly after the first request.

Try It

The Generate OG Image recipe shows the full API call. Swap in your own background, logo, and brand colors. The Image Generation docs cover all layer types and options.

推荐订阅源

DEV Community