Unique OG Images Should Not Be Manual Work
If every page needs a unique Open Graph image, you either maintain a folder of static assets or you generate them from the page data. Static assets drift. Screenshots are brittle. Design tools do not belong in the deploy path.
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 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 media 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:
curl -X POST https://api.iterationlayer.com/image-generation/v1/generate \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"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": "<wave-svg-base64>"
},
"position": {
"x_in_px": 20.0,
"y_in_px": 20.0
},
"dimensions": {
"width_in_px": 1160,
"height_in_px": 478
},
"border_radius": 24
},
{
"index": 2,
"type": "image",
"file": {
"type": "base64",
"name": "logo.svg",
"base64": "<logo-svg-base64>"
},
"position": {
"x_in_px": 20.0,
"y_in_px": 542.0
},
"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.0,
"y_in_px": 542.0
},
"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.0,
"y_in_px": 542.0
},
"dimensions": {
"width_in_px": 1160,
"height_in_px": 56
}
}
]
}'{
"success": true,
"data": {
"buffer": "/9j/4AAQSkZJRgABAQ...",
"mime_type": "image/jpeg"
}
}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"
}
}from iterationlayer import IterationLayer
client = IterationLayer(api_key="YOUR_API_KEY")
wave_svg_base64 = generate_wave_svg(slug) # your wave generator
logo_svg_base64 = base64.b64encode(logo_svg.encode()).decode()
result = client.generate_image(
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": wave_svg_base64,
},
"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": logo_svg_base64,
},
"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"
}
}package main
import il "github.com/iterationlayer/sdk-go"
func main() {
client := il.NewClient("YOUR_API_KEY")
waveSvgBase64 := generateWaveSvg(slug) // your wave generator
logoSvgBase64 := base64.StdEncoding.EncodeToString([]byte(logoSvg))
result, err := client.GenerateImage(
il.GenerateImageRequest{
Dimensions: il.Dimensions{
WidthInPx: 1200,
HeightInPx: 630,
},
OutputFormat: "jpeg",
Layers: []il.Layer{
il.NewSolidColorBackgroundLayer(0, "#FFFFFF"),
il.NewImageLayer(
1,
il.NewFileFromBase64("waves.svg", waveSvgBase64),
il.Position{
XInPx: 20,
YInPx: 20,
},
il.Dimensions{
WidthInPx: 1160,
HeightInPx: 478,
},
),
il.NewImageLayer(
2,
il.NewFileFromBase64("logo.svg", logoSvgBase64),
il.Position{
XInPx: 20,
YInPx: 542,
},
il.Dimensions{
WidthInPx: 56,
HeightInPx: 56,
},
),
il.NewTextLayer(
3, "Iteration Layer",
"Inter", 32, "#000000",
il.Position{
XInPx: 90,
YInPx: 542,
},
il.Dimensions{
WidthInPx: 400,
HeightInPx: 56,
},
),
il.NewTextLayer(
4,
"Image & Document Extraction and Generation APIs",
"Inter", 32, "#6B7280",
il.Position{
XInPx: 20,
YInPx: 542,
},
il.Dimensions{
WidthInPx: 1160,
HeightInPx: 56,
},
),
},
},
)
if err != nil {
panic(err)
}
}{
"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.