OG Image Templates

Soku can render dynamic Open Graph (OG) images from your templates via the API. OG images are the preview graphics that appear when a URL is shared on social media, in messaging apps, or in search results. Instead of creating a static image for every page, you can use Soku to generate unique, branded OG images on the fly from a single template.

How It Works

Design a template in the Soku template editor with dynamic parameters for the values that change per page (title, author, background image, etc.).
Call the Templates API with the template slug and a config object containing the dynamic values.
Soku renders the template as a PNG image and stores it in cloud storage.
A hosted URL is returned that you can use as your page’s og:image meta tag value.

The rendered image is hosted by Soku and served from a public URL, so social media crawlers and link preview services can access it directly.

API Endpoint

POST https://api.mysoku.io/v1/templates

Authentication

Include your API key in the request header:

soku-api-key: YOUR_API_KEY

You can generate and manage API keys from Settings > API Keys in your Soku dashboard. See API Key Management for details.

Request Body

Parameter	Type	Required	Description
`templateSlug`	string	Yes	The unique identifier of the template to render (e.g., `tweetImage`, `og-blog-post`)
`config`	object	No	An object containing the dynamic parameter values to populate the template. Keys must match the parameter names defined in the template.

Example Request

curl -X POST "https://api.mysoku.io/v1/templates" \
  -H "Content-Type: application/json" \
  -H "soku-api-key: YOUR_API_KEY" \
  -d '{
    "templateSlug": "og-blog-post",
    "config": {
      "title": "How We Scaled to 1 Million Users",
      "author": "Jane Smith",
      "backgroundImage": "https://example.com/images/hero.jpg"
    }
  }'

Response

A successful response returns the hosted URL of the rendered image:

{
  "url": "https://storage.mysoku.io/rendered/og_abc123.png",
  "id": "og_abc123"
}

Field	Type	Description
`url`	string	The public URL of the rendered PNG image
`id`	string	A unique identifier for the rendered image

The alias endpoint POST /v1/media/render-og provides identical functionality. Both endpoints accept the same request body and return the same response format.

Using the Rendered URL as an OG Image

Once you have the rendered image URL, set it as the og:image meta tag on your web page:

<head>
  <meta property="og:image" content="https://storage.mysoku.io/rendered/og_abc123.png" />
  <meta property="og:image:width" content="1200" />
  <meta property="og:image:height" content="630" />
  <meta property="og:title" content="How We Scaled to 1 Million Users" />
</head>

When someone shares your page URL on social media, the platform’s crawler fetches the OG image from the URL and displays it in the link preview.

Practical Examples

Blog Post OG Images

Generate a unique OG image for each blog post on your site. In your server-side rendering or build step, call the Soku API with the post’s title and author:

const response = await fetch('https://api.mysoku.io/v1/templates', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'soku-api-key': process.env.SOKU_API_KEY,
  },
  body: JSON.stringify({
    templateSlug: 'og-blog-post',
    config: {
      title: post.title,
      author: post.author.name,
    },
  }),
});

const { url: ogImageUrl } = await response.json();
// Use ogImageUrl in your page's <meta> tags

Product Page OG Images

For an e-commerce site, generate OG images that show the product name, price, and a product photo:

curl -X POST "https://api.mysoku.io/v1/templates" \
  -H "Content-Type: application/json" \
  -H "soku-api-key: YOUR_API_KEY" \
  -d '{
    "templateSlug": "product-card",
    "config": {
      "title": "Wireless Noise-Canceling Headphones",
      "price": "$299",
      "productImage": "https://example.com/products/headphones.jpg"
    }
  }'

Combining Template Rendering with Post Publishing

You can render a template and immediately use the output to create a social media post, all through the API:

# Step 1: Render the template
RENDERED_URL=$(curl -s -X POST "https://api.mysoku.io/v1/templates" \
  -H "Content-Type: application/json" \
  -H "soku-api-key: $SOKU_API_KEY" \
  -d '{
    "templateSlug": "tweetImage",
    "config": {
      "title": "Big Announcement",
      "author": "@mybrand",
      "content": "We just launched our new product!"
    }
  }' | jq -r '.url')

# Step 2: Create a post with the rendered image
curl -X POST "https://api.mysoku.io/v1/posts" \
  -H "Content-Type: application/json" \
  -H "soku-api-key: $SOKU_API_KEY" \
  -d "{
    \"post\": {
      \"content\": {
        \"text\": \"We just launched our new product! Check it out.\",
        \"imageUrls\": [\"$RENDERED_URL\"],
        \"platform\": [\"instagram\", \"x\", \"threads\"]
      }
    }
  }"

This two-step pattern is useful for serverless functions, CI/CD pipelines, or any automated publishing workflow.

Designing Templates for OG Images

When creating a template specifically for OG image use, keep these guidelines in mind:

Recommended Dimensions

The standard OG image size is 1200 x 630 pixels. This works well across most social media platforms and messaging apps. Set your template canvas to these dimensions.

Design Tips

Keep text large and readable. OG images are often displayed at small sizes in link previews. Use a minimum font size of 36px for titles and 24px for secondary text.
Use high contrast. Make sure text is clearly readable against the background. A semi-transparent overlay between a background image and text helps significantly.
Leave margins. Some platforms crop OG images slightly. Keep important content at least 60px from the edges.
Limit the amount of text. OG images work best with a short title and optionally an author name or tagline. Avoid paragraphs of text.
Test across platforms. Different social networks display OG images at different aspect ratios and sizes. Test your output on X (Twitter), Facebook, LinkedIn, and messaging apps like Slack and iMessage.

Template Layout Example

A common OG image template layout:

Background — Full-canvas rectangle with your brand color, or a dynamic background image.
Overlay — A semi-transparent rectangle (e.g., black at 50% opacity) to ensure text readability.
Logo — Your brand logo in one corner (top-left or bottom-left).
Title — A large {{title}} text element, centered or left-aligned.
Author — A smaller {{author}} text element below the title.

Available Template Slugs

Any template you create in the Soku template editor is available via its slug. You can find the slug for each template on the template detail page or in the template catalog. Common built-in template slugs:

Slug	Description	Canvas Size
`tweetImage`	Styled post card with title, author, and content	1200 x 675

Custom templates you create are also available via their slug immediately after saving.

Rate Limits

Template rendering requests are rate limited to 20 requests per minute per API key. If you exceed this limit, the API returns a 429 Too Many Requests response.

If you need to render OG images at scale (e.g., generating images for hundreds of blog posts during a site build), consider adding a delay between requests or caching the rendered URLs so you do not re-render images unnecessarily.

Error Handling

HTTP Status	Meaning
`200`	Success. The rendered image URL is returned.
`400`	Bad request. Check that the `templateSlug` is valid and the `config` object matches the template’s expected parameters.
`401`	Unauthorized. Your API key is missing or invalid.
`404`	Template not found. The provided `templateSlug` does not match any template in your account.
`429`	Rate limit exceeded. Wait and retry.
`500`	Server error. Contact support if the issue persists.

Getting Started

Connecting Platforms

Creating & Publishing

Automations

Templates

Media Library

Account & Billing

Settings

Troubleshooting

Legal

Og image templates

OG Image Templates

How It Works

API Endpoint

Authentication

Request Body

Example Request

Response

Using the Rendered URL as an OG Image

Practical Examples

Blog Post OG Images

Product Page OG Images

Combining Template Rendering with Post Publishing

Designing Templates for OG Images

Recommended Dimensions

Design Tips

Template Layout Example

Available Template Slugs

Rate Limits

Error Handling

​OG Image Templates

​How It Works

​API Endpoint

​Authentication

​Request Body

​Example Request

​Response

​Using the Rendered URL as an OG Image

​Practical Examples

​Blog Post OG Images

​Product Page OG Images

​Combining Template Rendering with Post Publishing

​Designing Templates for OG Images

​Recommended Dimensions

​Design Tips

​Template Layout Example

​Available Template Slugs

​Rate Limits

​Error Handling

​Related Pages

OG Image Templates

How It Works

API Endpoint

Authentication

Request Body

Example Request

Response

Using the Rendered URL as an OG Image

Practical Examples

Blog Post OG Images

Product Page OG Images

Combining Template Rendering with Post Publishing

Designing Templates for OG Images

Recommended Dimensions

Design Tips

Template Layout Example

Available Template Slugs

Rate Limits

Error Handling

Related Pages