FrameForge › Guides › Generate Open Graph images with an API

Generate Open Graph images with an API

Social platforms show a big image card when your page has an og:image. The simplest way to make one per page is an HTML template rendered to PNG.

1. Write a template

<!doctype html><html><body style="margin:0">
<div style="width:1200px;height:630px;box-sizing:border-box;padding:72px;
  display:flex;flex-direction:column;justify-content:space-between;
  background:linear-gradient(135deg,#0b1220,#1d3b8b);color:#fff;
  font-family:Inter,system-ui,sans-serif">
  <div style="font-size:28px;opacity:.8">yourblog.com</div>
  <div style="font-size:68px;font-weight:800;line-height:1.1">{{title}}</div>
  <div style="font-size:28px;opacity:.8">{{author}} · {{date}}</div>
</div></body></html>

2. Fill it and render

const html = template.replace("{{title}}", post.title).replace("{{author}}", post.author).replace("{{date}}", post.date);
const res = await fetch("https://api.frameforgeapi.com/render", {
  method: "POST",
  headers: { "Content-Type": "application/json", "X-API-Key": process.env.FRAMEFORGE_KEY },
  body: JSON.stringify({ html, format: "png", width: 1200, height: 630 }),
});
// Save the PNG to your storage or CDN, then reference it:
// <meta property="og:image" content="https://cdn.yourblog.com/og/my-post.png">

3. Check the result

Use the free social card preview to see how the link looks on X, LinkedIn, Facebook and Slack.

Tips