Generate Dynamic Social Media Previews with the Screenshot API

Social platforms (Twitter, LinkedIn, Facebook, Slack, Discord) all show a preview card when you paste a link. The card is generated from <meta property="og:image"> tags.

If you want dynamic OG images — different per blog post, per user profile, per product — you need a way to render them server-side. The Screenshot API makes this trivial.

The pattern

1. Build a styled HTML template page that takes query params (?title=foo&author=bar)
2. Deploy it somewhere (Vercel works great)
3. Call our Screenshot API with that URL to get a PNG
4. Cache the PNG in your CDN and reference it in your OG tags

Example: blog post OG images

<!-- /og-template/page.tsx -->
<div style="width:1200px;height:630px;background:linear-gradient(...)">
  <h1>{searchParams.title}</h1>
  <p>by {searchParams.author}</p>
</div>

curl "https://screenshot-by-helix-api.p.rapidapi.com/capture?url=https://your.site/og-template?title=Hello&width=1200&height=630" \
  -H "X-RapidAPI-Key: YOUR_KEY" \
  --output og.png

Now reference og.png in your blog post's metadata and you have unique social previews for every article — generated entirely from HTML you already know how to write.