jsontoimg

Open Graph Image Generator: Per-Page Cards Without Hand Exports

Published October 15, 2026 by Balaji

Uncategorized

An Open Graph image generator turns each page’s title and data into a share card, so you stop exporting one image per post by hand. The hard part is not drawing the card. It is serving a URL that a social crawler will accept on its first try, for every page, without an API key in the HTML.

What the Open Graph protocol requires

The Open Graph protocol names four required properties for every page: og:title, og:type, og:image, and og:url. It also says that a page specifying og:image should specify og:image:alt, and defines og:image:width and og:image:height. Tags go in the <head> of server-rendered HTML.

Three ways to produce the image

Approach Layout lives in Who edits the layout Limits
Hand export from a design tool A design file Designer One export per page
Code, such as Next.js ImageResponse Your repo Engineer Flexbox and a CSS subset, 500KB bundle
Template API with signed URLs An editor template Designer What the editor can draw

Hand export stops scaling at the tenth post. Code scales, but every layout tweak is a deploy. The template route keeps the designer in charge of the canvas and the engineer in charge of the payload. The Next.js trade-off is covered in Next.js OG Image: ImageResponse or a Template API?.

The signed-URL flow

  1. Design a 1,200 by 630 template and name a headline layer. 1,200 by 630 is the default size of Next.js ImageResponse.
  2. When a page renders, call POST /api/v1/img/sign with the template, format, and layer values. Minting costs no credit.
  3. Put the returned url in og:image.
  4. The crawler fetches it with no key. The first unique URL renders and bills one credit; the same title again streams the stored file.
const { url } = await client.signImageUrl({
  template: "<design-id>",
  format: "png",
  layers: { headline: { text: post.title } },
});

If the first render is still running, jsontoimg responds 503 with Retry-After, and crawlers retry. A tampered query string fails signature verification with 401. The full failure list is in OG Image Debugger Checklist.

Checklist before you ship

Where to go next

FAQ

What is an Open Graph image generator?

A tool that builds the share-card image for each page from its title and data, then serves it as the og:image URL. jsontoimg does this with one template and signed URLs, so no API key reaches the page.

What size should an Open Graph image be?

1,200 by 630 pixels is the default size in Next.js ImageResponse and a common design target. Declare it with og:image:width and og:image:height so crawlers do not have to guess.

Do I need og:image:alt?

The Open Graph protocol says a page that specifies og:image should also specify og:image:alt, a description of what is in the image.

How much does it cost to generate Open Graph images?

Minting a signed URL is free. The first unique fetch of each URL costs one credit, and repeat fetches of the same title are served from storage at no extra credit.

Related Resources