# Open Graph Image Generator: Social Cards from a Template

**Use case:** 

Generate Open Graph and Twitter/X social card images (1200x630 PNG) for every blog post or product from one HTML template and a list of titles. Placeholders like {{title}} are filled per row, one image per row, with direct download links. Pay per image.

## Input

```json
{
  "html": "<style>body{margin:0}</style><div style=\"width:1200px;height:630px;box-sizing:border-box;padding:72px;background:linear-gradient(135deg,#0ea5e9,#6366f1);color:#fff;font-family:Inter,Segoe UI,Arial,sans-serif;display:flex;flex-direction:column;justify-content:space-between\"><div style=\"font-size:28px;opacity:.85\">{{site}}</div><div style=\"font-size:64px;font-weight:800;line-height:1.1\">{{title}}</div><div style=\"font-size:30px\">{{author}} · {{date}}</div></div>",
  "data": [
    {
      "site": "blog.example.com",
      "title": "How we cut our cloud bill by 40%",
      "author": "Maria Lopez",
      "date": "Oct 2026",
      "fileName": "cloud-bill"
    },
    {
      "site": "blog.example.com",
      "title": "10 lessons from shipping every week",
      "author": "Sam Chen",
      "date": "Oct 2026",
      "fileName": "shipping-weekly"
    }
  ],
  "width": 1200,
  "height": 630,
  "fullPage": false,
  "scale": 1,
  "format": "png",
  "quality": 90,
  "transparentBackground": false,
  "waitMs": 0,
  "fileNameField": "fileName"
}
```

## Output

```json
{
  "fileName": {
    "label": "File",
    "format": "string"
  },
  "url": {
    "label": "Download",
    "format": "string"
  },
  "format": {
    "label": "Format",
    "format": "string"
  },
  "width": {
    "label": "Width",
    "format": "integer"
  },
  "height": {
    "label": "Height",
    "format": "integer"
  },
  "bytes": {
    "label": "Bytes",
    "format": "integer"
  },
  "missingFields": {
    "label": "Missing fields",
    "format": "array"
  },
  "renderMs": {
    "label": "Render ms",
    "format": "integer"
  }
}
```

## How it works

### 1. Sign up on Apify or log in

The HTML to Image API: Render HTML/CSS Templates to PNG Actor is ready to run with the inputs already set for "Open Graph Image Generator: Social Cards from a Template". [Sign up or log in](https://console.apify.com/create-task-from-example/qqzg8rlWIDEYEzKAc) and you'll land in Apify Console with a copy of this exact task.

### 2. Start the "Open Graph Image Generator: Social Cards from a Template" task

The HTML to Image API: Render HTML/CSS Templates to PNG Actor will start running based on the input automatically. You can also change all the input fields, like HTML template, data rows, and more, to match your specific use case.

### 3. Receive the "Open Graph Image Generator: Social Cards from a Template" output

Monitor the progress in real time. You will be notified as soon as your dataset is complete and ready for review. Each result includes data such as file, download, format, and more.

### 4. Integrate into your workflow

The final output is delivered in JSON, CSV, or Excel format, ready to be plugged into your workflow. You can also [run the "Open Graph Image Generator: Social Cards from a Template" task via API](https://apify.com/bossless/html-to-image.md).

## About this Actor

This example demonstrates how to use [HTML to Image API: Render HTML/CSS Templates to PNG](https://apify.com/bossless/html-to-image.md) with a specific input configuration. Visit the [Actor detail page](https://apify.com/bossless/html-to-image.md) to learn more, explore other use cases, and run it yourself.


## How to integrate an Actor?

This Task's input is already configured above. Use it as-is rather than inventing a new one.

Do not guess an integration path. Every one of them is in the agent quickstart at https://apify.com/agents.md: the Apify MCP server, Agent Skills with the Apify CLI, the JavaScript and Python clients, the REST API, and the account-free path for an agent with no human to sign in. It also carries the rule on stating cost before the first paid run.

For full API examples (JavaScript, Python, CLI, MCP, OpenAPI), see this Task's Actor page: https://apify.com/bossless/html-to-image.md

Each client library has reference documentation the quickstart does not restate: [JavaScript/TypeScript](https://docs.apify.com/api/client/js/docs.md) (`npm install apify-client`) and [Python](https://docs.apify.com/api/client/python/docs.md) (`pip install apify-client`).