How to Generate Dynamic Open Graph Images for Social Media

When you share a link on Twitter, Facebook, LinkedIn, or Slack, the platform displays a preview card with an image, title, and description. That image is the Open Graph (OG) image, and it has a massive impact on whether people click your link.

Static OG images are fine for your homepage, but what about blog posts, product pages, user profiles, or dynamic content? You need dynamic OG image generation — and in this guide, we’ll show you how to do it with the ToolCenter OG Image API.

Why OG Images Matter

The Click-Through Impact

Studies consistently show that social media posts with custom preview images receive significantly more engagement:

2-3x higher click-through rates compared to links without images
40% more shares on Facebook for posts with custom visuals
150% more retweets on Twitter/X for tweets with image cards
Professional appearance builds trust and brand recognition

What Happens Without OG Images

Without a custom OG image, platforms either:

Show a generic fallback (boring gray card)
Try to grab a random image from your page (often the wrong one)
Show nothing at all

None of these options drive clicks.

The OG Image Challenge

Manual Approach (Don’t Do This)

The traditional approach is to manually create OG images in Figma or Photoshop:

Open design tool
Create 1200x630 canvas
Add text, branding, colors
Export as PNG/JPG
Upload to server
Add <meta> tag to page

This works for 5-10 pages. It does not scale for hundreds or thousands of dynamic pages.

API Approach (Do This)

With a dynamic OG image API, you:

Define a template (once)
Pass dynamic data (title, author, date, etc.)
Get a unique image URL for every page
Add the URL to your <meta> tags

No design tools. No manual exports. No uploads. It just works.

ToolCenter OG Image API

How It Works

The ToolCenter OG Image API renders HTML/CSS templates into optimized images. You control every pixel with familiar web technologies.

API Endpoint

Parameters

Parameter	Type	Required	Description
`html`	string	Yes	HTML template for the OG image
`width`	integer	No	Image width (default: 1200)
`height`	integer	No	Image height (default: 630)
`format`	string	No	Output format: png, jpg, webp (default: png)

Recommended Dimensions

Platform	Recommended Size	Aspect Ratio
Twitter/X	1200 x 628	1.91:1
Facebook	1200 x 630	1.91:1
LinkedIn	1200 x 627	1.91:1
Discord	1200 x 630	1.91:1
Slack	1200 x 630	1.91:1

Use 1200x630 as the universal safe size — it works everywhere.

Code Examples

Basic OG Image with cURL

curl -X POST "https://toolcenter.dev/api/v1/og-image" \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "html": "<div style=\"width:1200px;height:630px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:white;font-family:Arial;font-size:48px;font-weight:bold;text-align:center;padding:60px;\">Best Screenshot APIs in 2026</div>",
    "width": 1200,
    "height": 630,
    "format": "png"
  }' \
  --output og-image.png

Node.js — Dynamic Blog Post OG Images

const ToolCenter = require('devtoolbox-sdk');
const client = new ToolCenter('YOUR_API_KEY');

async function generateBlogOG(post) {
  const html = `
    <div style="
      width: 1200px;
      height: 630px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 80px;
      background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
      color: white;
      font-family: 'Inter', Arial, sans-serif;
    ">
      <div style="
        font-size: 16px;
        text-transform: uppercase;
        letter-spacing: 3px;
        color: #60a5fa;
        margin-bottom: 24px;
      ">${post.category}</div>
      
      <h1 style="
        font-size: 52px;
        font-weight: 800;
        line-height: 1.2;
        margin: 0 0 30px 0;
      ">${post.title}</h1>
      
      <div style="
        display: flex;
        align-items: center;
        font-size: 20px;
        color: #94a3b8;
      ">
        <span>${post.author}</span>
        <span style="margin: 0 16px;">•</span>
        <span>${post.date}</span>
        <span style="margin: 0 16px;">•</span>
        <span>${post.readTime} min read</span>
      </div>
      
      <div style="
        position: absolute;
        bottom: 40px;
        right: 60px;
        font-size: 24px;
        font-weight: bold;
        color: #60a5fa;
      ">ToolCenter Blog</div>
    </div>
  `;

  const image = await client.ogImage({ html, width: 1200, height: 630 });
  return image;
}

// Generate OG image for a blog post
const ogImage = await generateBlogOG({
  title: 'Best Screenshot APIs in 2026',
  category: 'API Comparison',
  author: 'ToolCenter Team',
  date: 'Feb 2026',
  readTime: 8
});

Python — Template-Based Generation

from devtoolbox import ToolCenter

client = ToolCenter("YOUR_API_KEY")

def generate_og_image(title: str, subtitle: str, accent_color: str = "#3b82f6") -> bytes:
    html = f"""
    <div style="
        width: 1200px;
        height: 630px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        padding: 80px;
        background: #0f172a;
        color: white;
        font-family: Arial, sans-serif;
        position: relative;
    ">
        <div style="
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 6px;
            background: {accent_color};
        "></div>
        <h1 style="font-size: 56px; font-weight: 800; margin: 0 0 20px 0; line-height: 1.2;">
            {title}
        </h1>
        <p style="font-size: 24px; color: #94a3b8; margin: 0;">
            {subtitle}
        </p>
        <div style="
            position: absolute;
            bottom: 40px;
            right: 60px;
            font-size: 20px;
            color: {accent_color};
            font-weight: bold;
        ">devtoolbox.com</div>
    </div>
    """
    
    return client.og_image(html=html, width=1200, height=630, format="png")

# Generate OG image
image = generate_og_image(
    title="How to Convert HTML to PDF",
    subtitle="Complete guide with code examples in Python, Node.js, and PHP"
)

with open("og-image.png", "wb") as f:
    f.write(image)
print("OG image generated!")

PHP — Laravel Integration

use ToolCenter\Client;

$client = new Client('YOUR_API_KEY');

function generateOgImage($title, $description) use ($client) {
    $html = <<<HTML
    <div style="
        width:1200px;height:630px;display:flex;flex-direction:column;
        justify-content:center;padding:80px;
        background:linear-gradient(135deg,#1e3a5f,#0f172a);
        color:white;font-family:Arial,sans-serif;
    ">
        <h1 style="font-size:52px;font-weight:800;margin:0 0 20px 0;">$title</h1>
        <p style="font-size:22px;color:#94a3b8;">$description</p>
    </div>
    HTML;

    return $client->ogImage(['html' => $html, 'width' => 1200, 'height' => 630]);
}

Integrating with Your Website

HTML Meta Tags

Add these meta tags to your page’s <head>:

<meta property="og:title" content="Your Page Title">
<meta property="og:description" content="Your page description">
<meta property="og:image" content="https://toolcenter.dev/api/v1/og-image?...">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:type" content="article">

<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Your Page Title">
<meta name="twitter:description" content="Your page description">
<meta name="twitter:image" content="https://toolcenter.dev/api/v1/og-image?...">

Using Signed URLs

For production, use signed URLs so you don’t expose your API key:

const client = new ToolCenter('YOUR_API_KEY');

// Generate a signed URL (valid for 24 hours by default)
const signedUrl = await client.createSignedUrl('og-image', {
  html: '<div>...</div>',
  width: 1200,
  height: 630
});

// Use in meta tags
console.log(`<meta property="og:image" content="${signedUrl}">`);

Design Tips for Effective OG Images

Keep text large — Minimum 40px font size for titles; images are often shown at small sizes
Use high contrast — Dark backgrounds with light text or vice versa
Include branding — Logo or site name in a consistent position
Limit text — Maximum 10-15 words; less is more
Safe zones — Keep important content away from edges (80px padding minimum)
Test everywhere — Use opengraph.xyz to preview how your images look

Conclusion

Dynamic OG images are no longer optional — they’re a critical part of your content distribution strategy. With the ToolCenter OG Image API, you can generate beautiful, branded preview images for every page on your site using simple HTML/CSS templates.

Stop losing clicks to generic preview cards. Start generating dynamic OG images today.

Try the OG Image API →

Combine OG images with ToolCenter’s screenshot, PDF, QR code, and metadata tools for a complete developer toolkit.

Why OG Images Matter#

The Click-Through Impact#

What Happens Without OG Images#

The OG Image Challenge#

Manual Approach (Don’t Do This)#

API Approach (Do This)#

ToolCenter OG Image API#

How It Works#

API Endpoint#

Parameters#

Recommended Dimensions#

Code Examples#

Basic OG Image with cURL#

Node.js — Dynamic Blog Post OG Images#

Python — Template-Based Generation#

PHP — Laravel Integration#

Integrating with Your Website#

HTML Meta Tags#

Using Signed URLs#

Design Tips for Effective OG Images#

Conclusion#