Make Open Graph images from HTML

You write the card in HTML and CSS, send it to thirds.ai at 1,200 by 630 pixels, and get a PNG that social sites and chat apps show when someone shares your link. This article explains the size, gives you a request you can run, and shows the real output.

Why 1,200 by 630 pixels

A link preview card is wide. The common size is 1,200 pixels wide and 630 pixels tall, which is a ratio of about 1.91 to 1. Most social sites and chat apps show a card with this shape, so one image works in many places. A smaller image gets scaled up and looks soft, and a much larger image costs bytes without a visible gain.

thirds.ai captures exactly the rectangle you ask for at device scale 1. It does not scroll to collect more content, so anything outside the 1,200 by 630 rectangle is not in the file. Give the body that size, set its margin to zero, and keep the text inside the frame. Read Set PDF and image options for every image option.

Write the HTML

This card is the Event promo design from the gallery with its sample values written in. A dark date block sits on the left, the event details sit on a blue field, and a white bar holds the action.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <style>
      body {
        margin: 0;
        font-family: Arial, sans-serif;
        color: white;
      }
      .card {
        position: relative;
        width: 1200px;
        height: 630px;
        overflow: hidden;
        background: #0a46ff;
      }
      .card > * {
        position: absolute;
        margin: 0;
        box-sizing: border-box;
      }
      .date {
        left: 0;
        top: 0;
        width: 335px;
        height: 630px;
        background: #0b0b0b;
      }
      .label {
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 1.3px;
        text-transform: uppercase;
      }
      .month {
        left: 58px;
        top: 85px;
      }
      .day {
        left: 50px;
        top: 147px;
        font-size: 170px;
        font-weight: 700;
        line-height: 1.25;
        letter-spacing: -7px;
      }
      .time {
        left: 58px;
        top: 441px;
        width: 225px;
        font-size: 25px;
        line-height: 1.25;
      }
      .host {
        left: 390px;
        top: 63px;
      }
      .title {
        left: 390px;
        top: 139px;
        width: 750px;
        font-size: 63px;
        font-weight: 700;
        line-height: 1.25;
        letter-spacing: -2px;
      }
      .description {
        left: 390px;
        top: 368px;
        width: 720px;
        font-size: 26px;
        line-height: 1.25;
      }
      .bar {
        left: 390px;
        top: 520px;
        width: 710px;
        height: 64px;
        background: white;
      }
      .action {
        left: 415px;
        top: 537px;
        font-size: 24px;
        font-weight: 700;
        color: #0a46ff;
      }
    </style>
  </head>
  <body>
    <div class="card">
      <div class="date"></div>
      <p class="label month">October</p>
      <p class="day">14</p>
      <p class="time">3:00 PM London</p>
      <p class="label host">Fieldnote sessions</p>
      <p class="title">Plan a client launch in one afternoon</p>
      <p class="description">
        A practical workshop for small teams that want one clear story and a
        reusable launch kit.
      </p>
      <div class="bar"></div>
      <p class="action">Save your place</p>
    </div>
  </body>
</html>

Use <meta charset="utf-8"> so accented names and symbols render. Set a font family that the renderer can load, such as a generic family or a licensed web font through @font-face. A font on your laptop is not available to the renderer.

Send the request

Put the HTML in the html field as one JSON string, and set the format and size in the image object. Send the body to POST /v1/image with your API key, a Content-Type: application/json header, and an Idempotency-Key of your choice, as Create your first PDF shows. A successful image costs one credit.

{
  "html": "<!doctype html><html lang='en'><head><meta charset='utf-8'><style>body{margin:0;font-family:Arial,sans-serif;color:white}.card{position:relative;width:1200px;height:630px;overflow:hidden;background:#0a46ff}.card>*{position:absolute;margin:0;box-sizing:border-box}.date{left:0;top:0;width:335px;height:630px;background:#0b0b0b}.label{font-size:12px;font-weight:700;letter-spacing:1.3px;text-transform:uppercase}.month{left:58px;top:85px}.day{left:50px;top:147px;font-size:170px;font-weight:700;line-height:1.25;letter-spacing:-7px}.time{left:58px;top:441px;width:225px;font-size:25px;line-height:1.25}.host{left:390px;top:63px}.title{left:390px;top:139px;width:750px;font-size:63px;font-weight:700;line-height:1.25;letter-spacing:-2px}.description{left:390px;top:368px;width:720px;font-size:26px;line-height:1.25}.bar{left:390px;top:520px;width:710px;height:64px;background:white}.action{left:415px;top:537px;font-size:24px;font-weight:700;color:#0a46ff}</style></head><body><div class='card'><div class='date'></div><p class='label month'>October</p><p class='day'>14</p><p class='time'>3:00 PM London</p><p class='label host'>Fieldnote sessions</p><p class='title'>Plan a client launch in one afternoon</p><p class='description'>A practical workshop for small teams that want one clear story and a reusable launch kit.</p><div class='bar'></div><p class='action'>Save your place</p></div></body></html>",
  "image": {
    "format": "png",
    "width": 1200,
    "height": 630
  },
  "wait": false
}

Choose png for sharp text and flat colours. Choose jpeg or webp with a quality value for a photo. With wait set to false, the API answers as soon as it accepts the job, and you poll GET /v1/image/{id} until status is succeeded.

The output

This is the gallery render of the Event promo design with the same values, made at 1,200 by 630 pixels.

A wide event card with a black date block that reads October 14, and blue details for a launch workshop with a white action bar HTML

HTML for this image

Open Event promo to copy the same design into your account as a template with {{ }} fields for the month, day, time, host, title, description, and action.

Use the file on your page

Read download.url from the finished job, add https://thirds.ai in front of the path, and download the PNG. The signed link lasts 15 minutes and the file stays for 30 days, so save it in your own storage and serve it from your site. Then point the page at it.

<meta
  property="og:image"
  content="https://example.com/cards/launch-workshop.png"
/>
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />

A failed render costs nothing. If the job fails with invalid_input or unsafe_asset, fix the HTML or the asset address before you send another request. Follow Retry requests and download files for polling, retries, and the other codes.

Make one card for every page

Replace the fixed words with fields, such as {{ title }} and {{ host }}, and send the same HTML with a data object in each request. thirds.ai fills the fields before it renders, and no template is saved. Save the design as a template when you want to reuse it from the editor or by ID. Use templates with your data explains both paths.