Social Media Previews

Overview

When someone shares your link on Twitter, LinkedIn, Slack, or Discord, the preview image is often the difference between a click and a scroll. Generic or broken previews kill engagement.

A screenshot API lets you generate dynamic Open Graph images programmatically — instead of hand-crafting static `og:image` files for every page, you capture a live screenshot of the content and serve it as the preview. This works especially well for blogs, product pages, and user-generated content.

Add a browser or device frame to the capture and the shared card looks premium without any per-post design work.

The practical pattern for dynamic OG is: a stable URL per content item (`/og/:slug.png`), a 24-hour CDN cache keyed on last-modified timestamp, and a static fallback served if the API call times out. Most platforms re-fetch OG images on a 12–72 hour cadence.

Two template strategies work: capture a live content URL on your own site (minimal setup), or capture a purpose-built `/og-template/:id` route hidden from your sitemap (better when the real content has animations or logged-in-only data). The dedicated-template route wins whenever the live page isn't visually designed for 1200×630.

Key Benefits

Generate OG images dynamically per page

Produce Twitter and LinkedIn cards automatically

Keep branding consistent across shared links

Boost click-through on social media

Results You Can Expect

1200×630

standard OG image size

~1.2s

warm-cache capture time

24h

recommended cache TTL

How It Works

1

Decide which pages need dynamic previews

2

Create an endpoint on your site that generates the OG image URL

3

Call the screenshot API with the page URL and any frame preset

4

Cache the returned image with a 24-hour TTL

5

Reference the cached image in your og:image meta tag

Code Example

// Generate a dynamic OG image
const response = await fetch('https://api.screenshotly.app/screenshot', {
  method: 'POST',
  headers: {
    Authorization: 'Bearer YOUR_API_KEY',
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    url: 'https://your-blog.example.com/post/hello-world',
    device: 'desktop',
    format: 'png',
    viewport: { width: 1200, height: 630 },
    mockup: 'browser-light',
  }),
});

Social Preview Benchmarks

Metric	Value	Context
Warm cache hit	~80ms	CDN-served
Cold capture	1.2–2.0s	First share of a new URL
Standard size	1200×630	Twitter/LinkedIn/Facebook/Slack compatible
Bandwidth per share (WebP)	~45 KB	vs. ~180 KB for equivalent PNG

Frequently Asked Questions

What image size should I use for social previews?

1200×630 (1.91:1 aspect ratio) works well across Facebook, Twitter/X, LinkedIn, Slack, Discord, and iMessage.

How aggressively should I cache the generated images?

A 24-hour CDN TTL is usually safe. Most social platforms re-fetch the image on a 12–72 hour cadence, so the cache rarely has to match theirs.

Can I add device mockups to shared previews?

Yes. Wrapping a capture in a browser frame, phone, or laptop mockup often lifts click-through materially for product-focused shares.

When this isn't the right fit

Screenshotly is not ideal for every workflow. Consider a different approach if any of the following apply:

Your OG layouts need custom typography that cannot be expressed in HTML/CSS. A Figma plugin or a dedicated render service gives you tighter control.
You need video previews for TikTok/Reels. A screenshot API captures stills and limited scrolling clips; it is not a video generator.
Your OG target URL is private — social crawlers cannot reach it, so no server-side capture service can help here.

Want a step-by-step walkthrough?

Read: Dynamic OG Image Generation Guide →