Skip to main content

MetaCard API: Dynamic Social Thumbnail Generator

Generate high-resolution, branded Open Graph and Twitter Card preview images on the fly using simple URL parameters.

Generate Your Thumbnail

Result

Generated Metacard thumbnail
Download Image

Technical Architecture: Reverse-Engineering Dynamic Social Card Generation​

Modern social platforms (X / Twitter, LinkedIn, Facebook, Slack, Discord) scrape a URL's <meta property="og:image"> tag when links are shared. Static social cards require manual Figma exports for every blog post. MetaCard automates thumbnail synthesis via an edge microservice that renders customizable vector and typography layouts dynamically from URL query parameters.

1. Dynamic SVG/Canvas Image Synthesis​

When a social bot or browser requests the image URL, the edge function parses query parameters, calculates font bounding boxes, applies automatic word wrapping, and streams a pre-rendered PNG or SVG buffer:

<!-- Integration directly in HTML <head> -->
<meta property="og:image" content="https://metacard-beryl.vercel.app/api/generate?title=Understanding%20FastAPI&authorName=Serhii%20Hrekov&authorWebsite=hrekov.com" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:image" content="https://metacard-beryl.vercel.app/api/generate?title=Understanding%20FastAPI&authorName=Serhii%20Hrekov&authorWebsite=hrekov.com" />

2. Edge Caching & Fast TTFB​

Because social media crawlers (such as Twitterbot or facebookexternalhit) timeout if an image generation response exceeds 3 seconds, MetaCard serves cached images with HTTP caching directives:

HTTP/1.1 200 OK
Content-Type: image/png
Cache-Control: public, max-age=31536000, s-maxage=31536000, immutable

Subsequent requests with identical URL parameters are served directly from edge CDN cache nodes worldwide in under 50ms.

Programmatic API Reference​

Endpoint​

GET https://metacard-beryl.vercel.app/api/generate

Query Parameters​

ParameterTypeDefaultDescription
titlestringRequiredThe main headline text displayed on the card.
backgroundColorhex#1a1a1aCard background color (e.g. #0f172a or #ffffff).
fontColorhex#ffffffColor of the primary title text.
fontSizeint60Title font size in pixels (ranges from 20 to 100).
authorNamestringOptionalAuthor or creator attribution line.
authorFontColorhex#ccccccColor of the author text.
authorFontSizeint40Font size for author attribution.
authorWebsitestringOptionalDomain watermark (e.g. hrekov.com).
authorWebsiteFontSizeint20Font size for the domain watermark.
footerbooleanfalseEnable or disable the bottom border accent line.

Example cURL Request​

# Download a custom social card
curl -o thumbnail.png "https://metacard-beryl.vercel.app/api/generate?title=My%20First%20Article&authorName=Serhii%20Hrekov&backgroundColor=%23111827"

Social Media Image Specifications Matrix​

PlatformCard TypeRecommended DimensionsAspect RatioMaximum File Size
Open Graph (FB/LinkedIn)og:image1200 × 630 px1.91 : 18 MB
X (Twitter)summary_large_image1200 × 675 px16 : 95 MB
Slack / DiscordInline Link Preview1200 × 630 px1.91 : 15 MB

Security, Performance & Zero-Server Data Guarantee​

  • No Database Storage: Cards are rendered purely in-flight from URL parameters. No article titles, draft content, or metadata are stored in backend databases.
  • XSS & Injection Protection: Input query strings are sanitized to prevent font injection, malicious script payloads, or SSRF attacks.
  • Stateless Edge Runtime: Runs on distributed Vercel serverless functions ensuring high availability and zero single point of failure.

Get notified about updates to this tool

No spam. Just high-quality updates about new features and guides.

Last updated on