Allscreenshots Docs

Social media OG images

Generate Open Graph images and social cards at scale for dynamic content

Automatically generate branded Open Graph images and Twitter cards for blog posts, product pages, user profiles, and any dynamic content.

The problem

Social media previews matter. When someone shares your link, a compelling preview image dramatically increases click-through rates. But creating custom OG images for every page is tedious:

  • Design tools don't scale to thousands of pages
  • Static images get outdated when content changes
  • Dynamic content (user profiles, product pages) needs unique images
  • Managing image assets becomes a maintenance burden

How Allscreenshots helps

Create a template page with your branding, then generate unique OG images by capturing screenshots with dynamic data. Every share gets a fresh, accurate preview.

  • Dynamic generation — Pass parameters to customize each image
  • Consistent branding — Use your own HTML/CSS templates
  • Always current — Images reflect the latest content
  • Scale infinitely — Generate thousands of images on demand

Use a fixed viewport size like 1200x630 (Facebook/LinkedIn) or 1200x600 (Twitter) for optimal social media display.

Quick example

Capture a branded OG image from your template page:

curl -X POST https://api.allscreenshots.com/v1/screenshots \
  -H "Authorization: Bearer $API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "url": "https://yoursite.com/og-template?title=How%20to%20Build%20a%20SaaS&author=Jane%20Doe",
    "viewport": {"width": 1200, "height": 630},
    "format": "png",
    "selector": "#og-card"
  }'

Or generate from raw HTML:

curl -X POST https://api.allscreenshots.com/v1/screenshots \
  -H "Authorization: Bearer $API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "html": "<div style=\"width:1200px;height:630px;background:linear-gradient(135deg,#667eea,#764ba2);display:flex;align-items:center;justify-content:center;color:white;font-size:48px;font-family:sans-serif;\">My Blog Post Title</div>",
    "viewport": {"width": 1200, "height": 630}
  }'

Key features for this use case

Next steps

On this page