A new article. An image worth sharing.

Give every published page its own preview. Design once, send the next title as JSON and create an Open Graph image with your own visual identity.

Create your image template See the JSON request

PRODUCT NOTESYour next release, ready to share.

Illustrative 1200 × 630 composition. Recreate it or use your own template; the request below changes title and category.

JSON
PNG render
Public URL
og:image

Your content changes. Your design stays recognizable.

Connect a blog, a product catalog or a release feed. A server-side publishing step supplies the data, generates the file and saves its public URL alongside the article.

In the editor, create a single-page 1200 × 630 template. Name the title text layer title and the category text layer category. Use unique names.
Save the template, copy its UUID and create an API key from the same Pikstrapi account.
Generate one image before publishing the article. Check a long title at the intended size, then connect your real CMS trigger.

From JSON to a PNG file.

Save the body as og-render.json and replace YOUR_TEMPLATE_ID. The image dimensions come from the saved template; this PNG request changes its content.

{
  "templateId": "YOUR_TEMPLATE_ID",
  "exportFormat": "png",
  "mode": "immediate",
  "layers": {
    "title": {
      "text": "Your next release, ready to share."
    },
    "category": {
      "text": "PRODUCT NOTES"
    }
  }
}

curl --fail-with-body --request POST "https://api.pikstrapi.com/api/v1/templates/generate-image" \
  --header "x-api-key: $PIKSTRAPI_API_KEY" \
  --header "Content-Type: application/json" \
  --data @og-render.json \
  --output article-001.png

Set PIKSTRAPI_API_KEY on your server. If shown, replace YOUR_API_BASE_URL with your API base including /api/v1. The command uses POSIX syntax; Windows users can use the API playground’s generated example.

A successful immediate request returns HTTP 200 with image/png and the file bytes. Upload article-001.png to a public HTTPS location before updating your page metadata. Keep credentials out of the image URL and page source.

See the complete image API guide and deferred mode

Connect the public image to your page.

Replace the URL placeholders with the published article and image URLs. Put these tags in the page’s server-rendered head and escape dynamic text with your framework’s HTML helpers.

Open Graph specifies image URL, dimensions, type and alternative text. 1200 × 630 is the composition used in this guide, not a mandatory size in the protocol.

Open Graph protocol: image properties

<meta property="og:type" content="article" />
<meta property="og:url" content="YOUR_PUBLIC_ARTICLE_URL" />
<meta property="og:title" content="Your next release, ready to share." />
<meta property="og:image" content="YOUR_PUBLIC_IMAGE_URL" />
<meta property="og:image:type" content="image/png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="Your next release, ready to share." />

Check the preview before sharing.

A finished render is only one part of the publishing workflow. The social crawler must be able to reach both your page and its image.

Open the image URL without signing in. Confirm a successful response, image/png and the real 1200 × 630 dimensions.
Inspect the page source for og:image. Do not depend on JavaScript inserting metadata after the page loads.
Use a new file URL for each changed version, keep a fallback image and check the sharing service’s preview.
If generation fails, keep the previous working image and inspect the error before retrying. Never publish the initial job acknowledgement as an image.

Questions before connecting your CMS.

Does the API return an Open Graph URL?

Immediate mode returns the PNG bytes, not a JSON URL. Upload the image to your own public storage or CDN, then add that durable HTTPS URL to og:image. Deferred mode delivers a job and can notify you by webhook; check access to its file URL before using it for social crawlers.

Do I need my own Chrome render infrastructure?

Pikstrapi handles rendering your saved template. Your application sends JSON and publishes the result to its public destination. Keep the API key on your server or in your automation credentials.

Will the image update as soon as I change my article?

Your workflow must generate and publish the new version. Social services cache previews. Use a new image URL for a changed version and check the preview in the service where you will share it; refresh timing is controlled by that service.

Make your next page ready to share.

Start with one template and one article. Then connect the same request to the automation tool you already use.

Create your Pikstrapi account n8n Make Zapier