Real preview
Show the Actual Hero, Not a Mockup
Point at a live landing URL and post the real above-the-fold view, so the share card matches what the click will show.
Capture the Above-the-Fold with AI
Screenshot any URL and download a pixel-faithful capture of the first viewport, ready to serve straight as your og:image.
Preview
Paste a URL above and we'll render its first screen and crop it to a share-ready 1200×630 PNG.
How Above-the-Fold Screenshots Get Used
Paste a URL, capture the exact viewport a visitor sees first, crop to 1200×630 in the browser — no server round-trip.
Landing variants
Preview Every A/B Variant
Screenshot each variant URL separately, upload as the social card for that campaign — every ad group carries its own hero.
Pricing header
Cover the Pricing Page with Its Own Card
Capture the pricing hero, use it as the og:image so shared pricing links stop showing the generic homepage screenshot.
Solo SaaS
Give Every Page a Real Card by Bedtime
Solo SaaS founders shipping on nights and weekends can cover an entire site in one sitting without opening a design tool.
Frequently Asked Questions
What the screenshot-to-OG tool actually captures and how it compares to Urlbox, ScreenshotOne and @vercel/og.
How do I take a screenshot for use as an Open Graph image?
Paste your page URL. We load it in a real headless Chrome at 1200×800, wait for JavaScript and web fonts, capture the viewport, and crop the top 630 pixels to hit the 1200×630 Open Graph spec. Download the PNG or copy the ready-to-paste <meta> block.
Why is the Open Graph image cropped from the top of the page?
1200×630 is the 1.91:1 aspect ratio every major platform renders as a large card. We render at 1200×800 (the standard above-the-fold viewport) and crop the top 630 pixels because that region is what visitors see before scrolling — by definition the most important real estate on any page.
Is Above the Fold really free and does it store my screenshots?
Yes, free forever, no signup, no watermark, no daily cap. The screenshot is captured server-side, streamed straight back to your browser, and cropped client-side. Nothing is written to storage; the file the browser downloads is the only copy that exists.
How does this compare to Urlbox, ScreenshotOne and @vercel/og?
Urlbox and ScreenshotOne are paid screenshot APIs for developers — powerful, but you write code and manage keys. @vercel/og renders OG images from JSX with no real-browser screenshot at all. Above the Fold is the free web front door: point, click, download, no keys.
Does the screenshot work on JavaScript-heavy sites and SPAs?
Yes — we render in real headless Chrome with JavaScript enabled, so React/Next/Vue/Svelte SPAs, dashboards and animation-heavy landing pages capture correctly. We wait for network idle plus web fonts before the shutter fires, so custom typography renders instead of falling back to serif.
What if a cookie banner is covering the hero?
Cookie banners occupy the first screen and will appear in the crop. Dismiss the banner on your own site first, or switch to the AI painter — it reads extracted page content and ignores overlays entirely, so the resulting card shows your product, not the consent modal.
Design the First Impression, Not Just the Meta
The OG card gets one impression per share; the hero above the fold gets one per click. Same brand read, painted the same way.