Creating Dynamic OG Images for Social Media

When you share a link on Twitter, LinkedIn, or Slack, the preview card that appears is powered by Open Graph (OG) meta tags — and the image is the most important element. A compelling OG image can dramatically increase click-through rates, but creating a unique image for every blog post, product page, or user profile is impractical if done manually. The solution: generate them dynamically using HTML, CSS, and an image rendering API.

What Are OG Images and Why They Matter

Open Graph is a protocol that allows web pages to define how they appear when shared on social media platforms. The key meta tags are:

<meta property="og:title" content="Your Page Title" />
<meta property="og:description" content="A brief description" />
<meta property="og:image" content="https://example.com/og-image.png" />
<meta property="og:url" content="https://example.com/page" />

The og:image tag is by far the most impactful. Studies show that social media posts with images receive 2-3x more engagement than those without. A well-designed OG image acts as a visual headline, giving users a reason to click.

The Problem with Static OG Images

The simplest approach is to create a static image for each page using a design tool like Figma or Canva. This works for a handful of pages, but it falls apart when:

• You publish blog posts frequently and need a unique image for each one.
• You have dynamic content like product pages, user profiles, or event listings that change constantly.
• You want to A/B test different OG image designs without manual design work.
• You operate in multiple languages and need localized images.

The solution is to generate OG images programmatically — design a template in HTML and CSS, fill in the dynamic data, and render it as an image.

Dynamic Generation with HTML + CSS

The concept is simple: write your OG image design as an HTML page, then use an API to screenshot it into a PNG or JPEG image. Since you already know HTML and CSS, you can create any design you want — gradients, typography, logos, patterns, even data visualizations.

Here is an example OG image template for a blog post:

function ogImageTemplate({ title, author, date, category }) {
  return `
    <div style="
      width: 1200px; height: 630px;
      display: flex; flex-direction: column; justify-content: center;
      padding: 60px 80px;
      background: linear-gradient(135deg, #0f0f23 0%, #1a1a3e 50%, #2d1b69 100%);
      font-family: 'Inter', sans-serif;
      color: white;
    ">
      <div style="
        display: inline-block; background: #6c63ff;
        padding: 6px 16px; border-radius: 20px;
        font-size: 14px; font-weight: 600; margin-bottom: 24px;
        width: fit-content;
      ">${category}</div>
      <h1 style="
        font-size: 56px; font-weight: 800; line-height: 1.15;
        margin: 0 0 auto 0;
      ">${title}</h1>
      <div style="
        display: flex; align-items: center; gap: 16px;
        font-size: 18px; color: rgba(255,255,255,0.7);
      ">
        <span>${author}</span>
        <span>·</span>
        <span>${date}</span>
        <img src="https://tongorender.io/logo-white.png" style="margin-left: auto; height: 32px;" />
      </div>
    </div>
  `;
}

Rendering with TongoRender Image API

TongoRender provides a dedicated image rendering endpoint that converts HTML to PNG, JPEG, or WebP. Here is how to generate an OG image:

async function generateOGImage({ title, author, date, category }) {
  const html = ogImageTemplate({ title, author, date, category });

  const response = await fetch('https://api.tongorender.io/v1/render/image', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'Authorization': 'Bearer rf_live_your_api_key',
    },
    body: JSON.stringify({
      html,
      options: {
        width: 1200,
        height: 630,
        format: 'png',
        deviceScaleFactor: 1,
      },
    }),
  });

  return Buffer.from(await response.arrayBuffer());
}

The rendered image is exactly 1200x630 pixels — the recommended size for OG images on most platforms.

Integration Strategies

On-Demand Generation

Generate images when they are first requested and cache them. This is ideal for content that changes infrequently:

app.get('/og/:slug.png', async (req, res) => {
  const cached = await cache.get(`og:${req.params.slug}`);
  if (cached) {
    res.type('image/png').send(cached);
    return;
  }

  const post = await db.posts.findBySlug(req.params.slug);
  const image = await generateOGImage(post);

  await cache.set(`og:${req.params.slug}`, image, 86400); // Cache for 24h
  res.type('image/png').send(image);
});

Build-Time Generation

For static sites or blogs, generate all OG images during the build process and upload them to your CDN. This eliminates runtime latency entirely.

Template Variations

Create different templates for different content types:

• Blog posts — Title, author, category badge, reading time.
• Product pages — Product image, name, price, rating.
• User profiles — Avatar, name, bio, stats.
• Event pages — Event name, date, location, speaker photos.

Design Tips for Effective OG Images

• Keep text large — OG images are often displayed at small sizes. Use at least 40px for headings.
• Use high contrast — Ensure text is easily readable against the background.
• Include your brand — Add your logo so people recognize the source immediately.
• Test across platforms — Twitter, LinkedIn, Facebook, and Slack all crop images differently. Stick to the 1200x630 safe zone.
• Avoid too much text — OG images are not articles. Keep it to a title and one or two pieces of metadata.

Conclusion

Dynamic OG images are a high-impact, low-effort way to boost your content's social media presence. By leveraging HTML and CSS — skills you already have — and an image rendering API like TongoRender, you can generate unique, branded preview images for every page on your site automatically.

Stop using the same generic OG image for all your pages. Start generating them dynamically and watch your click-through rates improve.

Try TongoRender free — Generate images, PDFs, and screenshots with a single API.