Take Website Screenshots for Link Previews

A good link preview is a tiny ad for the page it points to. When someone shares a product page, help article, marketplace listing, changelog, or landing page, the preview image often decides whether the link looks trustworthy enough to click. Static Open Graph artwork works for a homepage, but it breaks down when every URL needs its own current visual. Screenshots solve that by rendering the page, capturing the right viewport, and turning the result into the social preview.

The Open Graph protocol defines og:image as the image that represents a shared object. Twitter Cards use similar image fields for summary cards and large image cards. In practice, the job is not just adding a meta tag. Your app has to create an image at the right size, host it at a crawlable URL, keep it fresh, and avoid sending social crawlers a broken, blocked, or slow asset.

Why screenshots work for dynamic previews

Screenshot-based previews are strongest when the page itself is the value: real estate listings, ecommerce products, portfolio pages, public dashboards, documentation pages, event pages, SaaS changelog entries, and generated reports. Instead of designing thousands of one-off preview graphics, you can capture the canonical URL with consistent settings and publish the result as the preview image.

Most teams should not use a full-page screenshot for this. Feeds are small, cropped, and fast-moving. A link preview needs one focused visual, not an entire scroll. Capture an above-the-fold viewport, a specific element, or a deliberately cropped region. Use a 1200 by 630 output when you want the common large-preview shape, and keep the main subject away from the edges because different platforms crop differently.

What developers need to control

Browser automation tools such as Playwright and the Chrome DevTools Protocol can capture screenshots as PNG, JPEG, or WebP and can control viewport size, clipping, full-page capture, device scale, and wait timing. Those controls matter for social images because a one-second capture might miss lazy-loaded media, while a full network idle wait might be too slow for high-volume generation.

A reliable pipeline should define viewport width and height, output format, device scale factor, delay after load, timeout behavior, and cache rules. PNG keeps text and interface details crisp. JPEG or WebP can reduce weight for photographic pages. Retina output can make a preview look sharper, but it also increases file size, so it should be paired with image compression and predictable dimensions.

How to build the preview workflow

The basic flow is straightforward. When a page is created or updated, enqueue a screenshot job. Render it with a social-preview viewport, upload the image to durable storage, then write the resulting URL into og:image, twitter:image, and any framework-specific SEO fields. For many pages, regenerate previews only when meaningful content changes.

Use FrameSnap for link preview screenshots

FrameSnap turns the browser side of this workflow into an API call. You send the page URL, viewport, format, and capture settings, then use the returned image in your Open Graph and Twitter Card metadata. That keeps your app focused on content and publishing instead of running headless browsers, retry queues, and screenshot workers.

Use the FrameSnap screenshot tool to test a URL and preview size by hand. When you are ready to automate dynamic previews for many pages, get a FrameSnap API key and generate link preview images from your publishing pipeline.

FAQ

What size should a link preview screenshot image be?

A 1200 by 630 image is a practical default because it matches the common large-card aspect ratio used by major social platforms. Keep important content centered so crops still work.

Can I generate Open Graph images from live website URLs?

Yes. A screenshot API can render a URL in a controlled viewport, capture the page, and return an image URL that your app can store in og:image and twitter:image metadata.

Should link preview images use full-page screenshots?

Usually no. Link previews need a clean, scannable visual at feed size. Use an above-the-fold viewport or a cropped capture rather than a long full-page screenshot.