Skip to content

Generate Open Graph images from a template

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.

Request
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

How to do it, in three steps

  1. 1

    Design the card as HTML and CSS, with a place for the title.

  2. 2

    Send it with viewport_width 1200 and viewport_height 630 for each page.

  3. 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

For developers: one request

The same thing from your own code. It is a plain HTTP request, so it works from any language. Create a free account to get an access key.

Questions people ask

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.

Take as many screenshots as you need

A free account gives you 100 screenshots every month and keeps them in one place. No card needed.