← Back to blog

How to Automate Social Media Preview Images

Published on February 14, 2026

Social media preview images — the cards that appear when you share a link on Twitter, LinkedIn, Facebook, or Slack — are one of the most impactful yet overlooked aspects of content marketing. In this guide, you'll learn how to automate social media preview image generation so every page on your site gets a beautiful, branded preview card without any manual design work.

The Cost of Not Having Preview Images

Links shared without custom OG images get generic previews — often just a favicon or nothing at all. Studies show that posts with eye-catching preview images get 2-3x more engagement than posts without them. For a blog getting 10,000 social shares per month, that's a massive missed opportunity.

But creating individual preview images for every blog post, product page, and landing page? That doesn't scale. A designer creating OG images at 15 minutes each would need 250 hours to cover 1,000 pages. The answer is automation.

The Template Approach

The most effective way to automate preview images is the template approach:

  1. Design a reusable template in HTML/CSS with dynamic variables
  2. Pass page-specific data (title, author, category, etc.) to the template
  3. Render the template to a 1200×630 PNG image via API
  4. Serve the image URL in your page's <meta> tags

This means you design once, and every page gets a unique, on-brand preview image automatically.

Setting Up Automated OG Images with Rendly

1. Choose or Create a Template

Rendly comes with 10+ built-in templates designed for common use cases. For a blog, the "OG Blog Post" template is perfect:

# List available templates
curl https://rendly.io/api/v1/templates \
  -H "Authorization: Bearer YOUR_API_KEY"

Or create your own custom template:

curl -X POST https://rendly.io/api/v1/templates \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "name": "My Blog OG",
    "html": "<div class=\"og\"><div class=\"category\">{{ category }}</div><h1>{{ title }}</h1><div class=\"meta\">By {{ author }} · {{ read_time }}</div></div>",
    "css": "body { width: 1200px; height: 630px; } .og { width: 100%; height: 100%; background: linear-gradient(135deg, #0f0c29, #302b63); display: flex; flex-direction: column; justify-content: center; padding: 80px; font-family: -apple-system, sans-serif; } .category { color: #a29bfe; text-transform: uppercase; font-size: 16px; letter-spacing: 3px; font-weight: 700; margin-bottom: 24px; } h1 { color: white; font-size: 52px; font-weight: 800; line-height: 1.2; margin-bottom: 32px; } .meta { color: rgba(255,255,255,0.5); font-size: 20px; }",
    "variables_schema": {
      "title": {"type": "string", "required": true},
      "author": {"type": "string", "required": true},
      "category": {"type": "string"},
      "read_time": {"type": "string"}
    }
  }'

2. Integrate with Your CMS or Framework

WordPress (PHP)

# In your theme's functions.php
function rendly_og_image() {
  if (is_single()) {
    $title = urlencode(get_the_title());
    $author = urlencode(get_the_author());
    $url = "https://rendly.io/api/v1/templates/YOUR_TEMPLATE_ID/render?title={$title}&author={$author}&format=png";
    echo "<meta property='og:image' content='{$url}' />";
  }
}
add_action('wp_head', 'rendly_og_image');

Next.js / React

// components/SEOHead.js
export default function SEOHead({ title, author, category }) {
  const ogImage = new URL("https://rendly.io/api/v1/templates/YOUR_TEMPLATE_ID/render");
  ogImage.searchParams.set("title", title);
  ogImage.searchParams.set("author", author);
  ogImage.searchParams.set("category", category);
  ogImage.searchParams.set("format", "png");

  return (
    <Head>
      <meta property="og:image" content={ogImage.toString()} />
      <meta property="og:image:width" content="1200" />
      <meta property="og:image:height" content="630" />
      <meta name="twitter:card" content="summary_large_image" />
      <meta name="twitter:image" content={ogImage.toString()} />
    </Head>
  );
}

Ruby on Rails

# app/helpers/meta_helper.rb
module MetaHelper
  RENDLY_TEMPLATE_ID = "your-template-id"

  def og_image_tag(title:, author:, category: nil)
    params = { title: title, author: author, category: category, format: "png" }.compact
    url = "https://rendly.io/api/v1/templates/#{RENDLY_TEMPLATE_ID}/render?#{params.to_query}"
    tag.meta(property: "og:image", content: url)
  end
end

3. Handle Different Content Types

Different pages need different templates. Here's a strategy:

  • Blog posts → "Blog OG" template (title, author, category, read time)
  • Product pages → "Product Card" template (name, price, image, description)
  • Landing pages → "Marketing Banner" template (headline, subheading)
  • User profiles → "Social Profile" template (name, avatar, bio, stats)
  • Changelog → "Changelog Entry" template (version, title, changes)

E-Commerce: Product Preview Images

For e-commerce sites, automated preview images are especially valuable. Every product page can have a branded social card showing the product image, price, and a call-to-action:

// For each product
const ogUrl = `https://rendly.io/api/v1/templates/product-template/render?` +
  `product_name=${encodeURIComponent(product.name)}` +
  `&price=${encodeURIComponent(product.price)}` +
  `&image_url=${encodeURIComponent(product.image)}`;

When someone shares your product link on Facebook or WhatsApp, they see a beautiful branded card instead of a generic link — and that drives clicks.

Caching and Performance

OG images don't change often, so caching is essential:

  • Rendly auto-caches based on parameter hashes — same inputs always return cached results
  • CDN caching — Set long Cache-Control headers (e.g., 30 days) on your OG image URLs
  • Pre-generate — For high-traffic pages, pre-render OG images at build time or on publish
  • Invalidation — When content changes, use a cache-busting parameter like &v=2

Testing Your Preview Images

Always validate your OG images before deploying:

  • Facebook Sharing Debugger — https://developers.facebook.com/tools/debug/
  • Twitter Card Validator — https://cards-dev.twitter.com/validator
  • LinkedIn Post Inspector — https://www.linkedin.com/post-inspector/
  • OpenGraph.xyz — Preview across multiple platforms

Start Automating Today

With Rendly's template system and API, you can go from zero to fully automated OG images in under an hour. Sign up for free, pick a built-in template or design your own in the playground, and integrate with your site using the examples above.

Every link you share deserves a beautiful preview. Stop leaving engagement on the table.

Ready to get started?

Try Rendly free — 100 renders/month, no credit card required.

Sign up for free →