Auto-Generate OG Images from Airtable Rows
Give every Airtable record a unique social preview. One templated render call turns the row's title, subtitle, and author into a hosted og: URL you write straight back to the base.
Last updated 2026-05-28
The Problem
Your content, products, or events live in Airtable, but every page ships the same generic OG image — so links shared on X, LinkedIn, and Slack all look identical and forgettable. Generating one card per row by hand in Figma or Canva doesn't scale past a few rows, and standing up Puppeteer or a Vercel OG function just to render images means infrastructure you have to deploy, secure, and pay to keep warm.
The Solution
Point a Make or Zapier automation at your Airtable base. When a row is added or updated, it POSTs your 1200x630 HTML template plus the row's fields to Rendex's /v1/render/link endpoint and gets back a hosted, edge-cached image URL. Write that URL into an ogImageUrl column (or push it into your site's <meta og:image>). Every row gets a unique, on-brand card with zero rendering infrastructure — and it's all on the free tier.
How the Workflow Runs
Airtable
New or updated record
Make / Zapier
POST /v1/render/link with template + row data
Hosted URL
Receive the cached og:image link
Airtable
Write ogImageUrl back to the row
Input → Rendered Output
Rendered by Rendex
What You Need
- A Rendex API key (free tier — 100 renders/month, no card required)
- A Make or Zapier account with your Airtable base connected
- An Airtable base with title, subtitle, and author columns (plus an empty ogImageUrl field to write back to)
- A 1200x630 OG HTML template with {{title}}, {{subtitle}}, and {{author}} Mustache placeholders
What This Recipe Uses
Hosted OG Link
POST /v1/render/link returns a signed URL you drop straight into <meta og:image> or an Airtable field — no file to store or serve.
Mustache Templating
One HTML template + a data{} object of row fields. {{title}}, {{subtitle}}, and {{author}} fill in per record.
Edge-Cached Renders
The first crawl renders and caches on the edge; every later share (x-rendex-cache: hit) is free. One viral page = one credit.
Make or Zapier
Use Make's HTTP module or Zapier's native Rendex 'Create Render Link' action (v1.6.0+) — whichever already holds your Airtable connection.
Build It
// Make scenario: Airtable "Watch Records" -> HTTP "Make a request"
// HTTP module configuration:
{
"url": "https://api.rendex.dev/v1/render/link",
"method": "POST",
"headers": [
{ "name": "Authorization", "value": "Bearer YOUR_API_KEY" },
{ "name": "Content-Type", "value": "application/json" }
],
"bodyType": "raw",
"contentType": "application/json",
"parseResponse": true, // so {{1.url}} is available downstream
"body": {
"format": "png",
"width": 1200,
"height": 630,
"html": "<div style=\"width:1200px;height:630px;box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;padding:72px;font-family:system-ui,sans-serif;color:#fff;background:linear-gradient(135deg,#0f172a,#ea580c)\"><h1 style=\"font-size:64px;line-height:1.1;margin:0\">{{title}}</h1><p style=\"font-size:28px;margin:20px 0 0;color:#fed7aa\">{{subtitle}}</p><p style=\"font-size:22px;margin-top:auto;color:#fdba74\">by {{author}}</p></div>",
"data": {
"title": "{{1.title}}", // mapped from the Airtable trigger
"subtitle": "{{1.subtitle}}",
"author": "{{1.author}}"
}
}
}
// Add an Airtable "Update a Record" step after this:
// ogImageUrl <- {{2.url}} (the hosted link from the HTTP response)# Both Make's HTTP module and Zapier's Webhooks step send this exact request.
curl -X POST https://api.rendex.dev/v1/render/link \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"format": "png",
"width": 1200,
"height": 630,
"html": "<div style=\"width:1200px;height:630px;box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;padding:72px;font-family:system-ui,sans-serif;color:#fff;background:linear-gradient(135deg,#0f172a,#ea580c)\"><h1 style=\"font-size:64px;line-height:1.1;margin:0\">{{title}}</h1><p style=\"font-size:28px;margin:20px 0 0;color:#fed7aa\">{{subtitle}}</p><p style=\"font-size:22px;margin-top:auto;color:#fdba74\">by {{author}}</p></div>",
"data": {
"title": "Shipping faster with edge rendering",
"subtitle": "How we cut our OG pipeline to one API call",
"author": "Dana Lee"
}
}'
# Response — write "url" back into the Airtable ogImageUrl field:
# {
# "url": "https://api.rendex.dev/v1/render?p=...&sig=...",
# "expiresAt": "2026-06-27T00:00:00.000Z",
# "format": "png",
# "cacheTtl": 86400
# }import Rendex from "@copperline/rendex";
const rendex = new Rendex("YOUR_API_KEY");
// A 1200x630 OG template with Mustache placeholders.
const html = `
<div style="width:1200px;height:630px;box-sizing:border-box;display:flex;
flex-direction:column;justify-content:center;padding:72px;
font-family:system-ui,sans-serif;color:#fff;
background:linear-gradient(135deg,#0f172a,#ea580c)">
<h1 style="font-size:64px;line-height:1.1;margin:0">{{title}}</h1>
<p style="font-size:28px;margin:20px 0 0;color:#fed7aa">{{subtitle}}</p>
<p style="font-size:22px;margin-top:auto;color:#fdba74">by {{author}}</p>
</div>`;
// Call this with the fields from each Airtable row.
async function ogImageForRow(row) {
const { url, expiresAt } = await rendex.renderLink({
html,
data: { title: row.title, subtitle: row.subtitle, author: row.author },
format: "png",
width: 1200,
height: 630,
});
// 1) Write `url` back to the row's ogImageUrl field via the Airtable API, and/or
// 2) Drop it straight into your page's social meta tags:
// <meta property="og:image" content={url} />
// <meta name="twitter:image" content={url} />
return { url, expiresAt };
}100 free API calls/month — no credit card required. Get your API key and start building.
Reach for this workflow when your social previews are data, not design — a content calendar, a product catalog, an events table, or a directory where each Airtable row should ship its own share image. Because /v1/render/link returns a hosted, edge-cached URL instead of raw bytes, you never store or serve a file: the first crawler to hit a page triggers one render, and every later share is served from cache, so a post that goes viral still costs a single credit. The HTML template lives in your automation, so a brand tweak means editing one step, not re-exporting hundreds of images. Make's HTTP module and Zapier's Rendex action both speak the same JSON, so you pick whichever platform already holds your Airtable connection. It runs entirely on Rendex's free tier — 100 renders a month, no card — which comfortably covers most content bases and lets you prove the loop before you scale.