Auto-Generate Open Graph Images with a Screenshot API — No Design Tool
Auto-Generate Open Graph Images with a Screenshot API
When you share a URL on Twitter, Slack, LinkedIn, or iMessage, the platform fetches the og:image meta tag and shows a preview card. If that tag points to an auto-generated screenshot, your previews update automatically whenever the page content changes.
This is especially useful for: - Blog posts where you want the page itself as the preview - Dashboard URLs that should show current data - Product pages where the hero image changes seasonally - Documentation pages where the screenshot is the most accurate preview
The Basic Approach
Set your og:image to a URL that generates a screenshot on request:
<meta property="og:image"
content="https://hermesforge.dev/api/screenshot?url=https://yoursite.com/blog/post-slug&format=png&width=1200&height=630">
1200×630 is the standard OG image size used by most platforms.
When a social platform (or Slack, iMessage, etc.) fetches your page and sees this tag, it calls the screenshot URL and gets a fresh PNG of your page as it currently looks.
Sizing for Different Platforms
| Platform | Recommended size | Notes |
|---|---|---|
| Twitter/X | 1200×630 | Summary card with large image |
| 1200×630 | Minimum 600×315 | |
| 1200×627 | Very close to 1200×630 | |
| Slack unfurl | 1200×630 | Uses og:image directly |
| iMessage | 1200×630 | iOS link previews |
| 1200×630 | Android/iOS |
For a universal OG image: width=1200&height=630.
Cropping to Above-the-Fold
By default, a screenshot at 1200×630 captures the viewport exactly. If your page has a long header or navigation, you may want to capture just a specific section using a delay to let things render, then capture a clean viewport:
?url=https://yoursite.com/post&format=png&width=1200&height=630&delay=1000
The delay=1000 waits 1 second for fonts, images, and any JS-rendered content to fully load before capturing.
Example: Blog Post OG Images
In your blog template, dynamically set the OG image to a screenshot of the post:
<!-- In <head> -->
<meta property="og:image"
content="https://hermesforge.dev/api/screenshot?url={{ page.url }}&format=png&width=1200&height=630&delay=1000">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
Every post automatically gets a preview image that shows what the post actually looks like — no manual screenshot capture, no Canva template.
Example: Dashboard Previews
If you have internal dashboards or status pages, generate preview images automatically for link unfurls:
# Get a screenshot of your status page as a PNG
curl "https://hermesforge.dev/api/screenshot?url=https://status.yourapp.com&format=png&width=1200&height=630" \
-o og-status.png
Use this as the og:image for your status page. The image reflects the actual current state.
Caching Considerations
Social platforms cache OG images aggressively. If you're using a live screenshot URL as og:image, be aware:
- Twitter: caches for ~7 days. Use Twitter Card Validator to flush.
- Facebook: caches for several hours. Use Facebook Debugger to re-scrape.
- LinkedIn: caches for ~7 days. Use LinkedIn Post Inspector.
- Slack: re-fetches on each new unfurl (less caching than social).
For static content (blog posts), this caching is fine — the page rarely changes. For dynamic content (dashboards, pricing pages), you may want to use a versioned URL parameter to bust the cache:
?url=https://yoursite.com/pricing&format=png&width=1200&height=630&v=20260615
Change v= when you want platforms to re-fetch the image.
Dark Mode OG Images
Some sites look better in dark mode for social previews. The API supports dark mode capture:
?url=https://yoursite.com&format=png&width=1200&height=630&dark_mode=true
This is particularly effective for developer-oriented content where dark mode is the default context.
Try It
Generate a test OG image for any URL:
Or use the API directly:
curl "https://hermesforge.dev/api/screenshot?url=https://example.com&format=png&width=1200&height=630" \
-o og-preview.png
No signup required for basic use.