SavePage
·SavePage Team

Automating Social Media Preview Images with Screenshots

social-mediaog-imageautomation

Social media preview images (Open Graph images, Twitter Cards) drive click-through rates. A post with a compelling preview image gets significantly more engagement than one with a generic fallback. But creating unique preview images for every page is tedious.

A screenshot API can automate this entirely.

The approach

Instead of designing individual preview images, create a template page that displays your content in a visually appealing format. Then use the screenshot API to capture that template for each piece of content.

The workflow:

  1. Create a template page at a dedicated URL (e.g., /og-template?title=...&author=...)
  2. The template renders the content in a 1200x630 layout (standard OG image size)
  3. The screenshot API captures the template
  4. Use the resulting image URL as your og:image meta tag

Template example

A simple HTML template for blog post previews:

<!-- /og-template.html -->
<div style="width: 1200px; height: 630px; display: flex; flex-direction: column; justify-content: center; padding: 60px; background: linear-gradient(135deg, #667eea, #764ba2);">
  <h1 style="color: white; font-size: 48px; font-weight: 800; line-height: 1.2; margin: 0;">
    Your Blog Post Title Here
  </h1>
  <div style="margin-top: 24px; display: flex; align-items: center; gap: 12px;">
    <span style="color: rgba(255,255,255,0.8); font-size: 20px;">
      yoursite.com
    </span>
  </div>
</div>

Capture the template

import requests

def generate_og_image(title, author, site_url):
    template_url = f"{site_url}/og-template?title={title}&author={author}"

    response = requests.get(
        "https://api.savepage.io/v1/",
        params={
            "url": template_url,
            "width": 1200,
            "height": 630,
            "format": "png",
            "scale": 2,  # Retina quality
        },
        headers={"Authorization": "Bearer YOUR_API_KEY"},
    )

    return response.json()["image"]

Integration with your CMS

For a blog or content management system, generate the OG image when content is published:

  1. Content is created or updated
  2. Build hook triggers OG image generation
  3. Screenshot API captures the template with the content's title and metadata
  4. The image URL is stored alongside the content
  5. The og:image meta tag references the stored URL

For static site generators (Next.js, Hugo, Astro), this can run during the build process. Each page gets a unique preview image without manual design work.

Caching strategy

OG images do not change often. Once generated, cache the screenshot URL and reuse it until the content changes. This keeps API usage low even for sites with many pages.

A practical cache key: hash of (title + author + template version). When any of these change, regenerate the image.

Sizing for different platforms

| Platform | Recommended Size | Aspect Ratio | |----------|-----------------|-------------| | Facebook / Open Graph | 1200 x 630 | 1.91:1 | | Twitter (large card) | 1200 x 628 | 1.91:1 | | LinkedIn | 1200 x 627 | 1.91:1 | | Pinterest | 1000 x 1500 | 2:3 |

The 1200x630 size works for Facebook, Twitter, and LinkedIn. For best results, use scale=2 to capture at 2400x1260 and let the platforms downscale for sharp rendering on retina devices.

Results

Sites that switched from generic fallback images to automated OG images typically see 20-40% higher click-through rates from social shares. The investment is a template page and a few API calls per content update.

All posts