# Generate Open Graph images from a template

> Generate the image that shows when a link is shared: one card per article or product, made from your own HTML template at 1200 by 630 pixels, by API.

To generate Open Graph images, write the card once as HTML and send it to CurlShot with a window of 1200 by 630 pixels, the size social networks and chat apps expect. Put the title of each article or product into the template and you get one sharing image per page, in your own design. Switch the cache on and each card is rendered once and then served from storage.

Page for people: https://curlshot.com/tools/open-graph-image-generator

## Steps

1. Design the card as HTML and CSS, with a place for the title.
2. Send it with viewport_width 1200 and viewport_height 630 for each page.
3. Save the image, or point the og:image tag of the page at a signed link.

## What people use it for

- A sharing card for every blog post, made when it is published
- Product cards with the name, the price and a photo
- Cards for user profiles, events and job posts
- Images for X, LinkedIn, Facebook, Slack and iMessage previews

## The same thing with the API

```bash
curl -X POST "https://curlshot.com/api/v1/screenshot" \
  -H "X-Access-Key: YOUR_ACCESS_KEY" \
  -H "Content-Type: application/json" \
  -d '{"html":"<div style=\"display:flex;align-items:center;height:100vh;padding:80px;font:600 72px system-ui\">How we cut our build time in half</div>","viewport_width":1200,"viewport_height":630}' \
  --output og.png
```

An access key is free: https://curlshot.com/register. Read more:

- [Open Graph images](https://curlshot.com/docs/guides/open-graph-images.md)
- [Signed links](https://curlshot.com/docs/signed-links.md)
- [Caching](https://curlshot.com/docs/caching.md)

## Questions

### What size should an Open Graph image be?

1200 by 630 pixels is the size that X, LinkedIn, Facebook and most chat apps show without cropping.

### How do I make one image per page automatically?

Keep one HTML template and fill in the title of each page before you send it to CurlShot. Each request returns the card for that page.

### Can I use a screenshot of the page itself as the image?

Yes. Send the address of the page instead of HTML, with the same window size, and the card is a screenshot of its first screen.

### Is the image rendered again every time someone shares the link?

Not with the cache switched on. The card is rendered once and repeat requests are served from storage, without counting against your allowance.

## Related

- [Website thumbnail](https://curlshot.com/tools/website-thumbnail.md): Make a thumbnail or preview image of any website from its address. For directories, link lists, portfolios and newsletters. Free to try, one request by API.
- [Screenshot API](https://curlshot.com/tools/screenshot-api.md): A screenshot API for developers. One HTTP request turns a URL, HTML or Markdown into a PNG, JPEG, WebP or PDF. Full page, devices, blocking, cache, MCP.
- [HTML to image](https://curlshot.com/tools/html-to-image.md): Render your own HTML, CSS or Markdown into an image or a PDF with one API request. For social cards, certificates, receipts and reports.
