Use Puppeteer to set a social-card-sized viewport, load the page, wait for the content your design needs, and save a screenshot. The example below uses 1200 × 630 pixels, a size recommended by a secondary guide for X’s summary_large_image card; check the current requirements for your target platform before publishing.
Capture a webpage at social-card dimensions
Install Puppeteer in a Node.js project, then run this ES module. Replace the example URL with the page or card-specific route you want to render.
As an Amazon Associate I earn from qualifying purchases.
import puppeteer from 'puppeteer';
const browser = await puppeteer.launch();
try {
const page = await browser.newPage();
await page.setViewport({
width: 1200,
height: 630,
deviceScaleFactor: 1,
});
await page.goto('https://example.com/article', {
waitUntil: 'networkidle2',
});
// Add a page-specific readiness check here if needed.
await page.screenshot({ path: 'social-card.png', type: 'png' });
} finally {
await browser.close();
}Puppeteer’s screenshot guide demonstrates launching a browser, navigating with networkidle2, saving an image, and closing the browser. Its viewport documentation shows setting dimensions before navigation; changing viewport characteristics later can trigger a reload. Puppeteer Screenshots guide · Page.setViewport API
PC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 11Outdated Drivers Are Slowing You Down
One free scan finds every outdated or missing driver and matches the right update for your exact hardware.Free scan · exact hardware matchChoose the right capture area
A social card is usually a designed composition, not a full-length page. Set a viewport that matches the intended composition or capture a specific region. fullPage: true captures the entire document and may produce a very tall image. For a repeatable publishing workflow, a dedicated card route or a known card element is often more predictable than capturing an arbitrary live page.
#1 Best Overall
- Fixed viewport: capture the visible viewport at the dimensions chosen before navigation.
- Element or region: use
clipfor a defined rectangle, or select and capture a particular element with the relevant screenshot method. - Whole page: use
fullPage: trueonly when the entire document is actually wanted.
The available options are documented in Puppeteer ScreenshotOptions and Page.screenshot API.
Wait for the design, not just navigation
A navigation wait condition tells Puppeteer about browser loading activity; it does not prove that every image, font, animation, or client-rendered component has reached its final visual state. The example’s networkidle2 is a useful starting point, not a universal visual-readiness guarantee.
Rank #2
- For client-rendered pages, wait for an app-specific selector or readiness signal that appears only when the card is composed.
- If remote images or fonts matter, explicitly wait for the relevant assets or the design element that depends on them.
- Prefer a stable card template over relying on a generic delay when content can render at different speeds.
Choose a readiness condition that reflects the specific page. Puppeteer’s documentation demonstrates a navigation wait, but does not claim that one condition settles every site’s visual assets. Puppeteer Screenshots guide
Select image format and screenshot options
- PNG: lossless output, suitable when crisp text or graphic edges matter. The example writes
social-card.png. - JPEG: can reduce file size for photographic designs, with a quality trade-off. Set
type: 'jpeg'and aqualityvalue when using this format; quality does not apply to PNG. - Transparency: set
omitBackground: truewhen a transparent background is needed. - Output path and clipping: set
pathto the desired filename and useclipwhen you need a defined capture rectangle.
After capture, check the actual pixel dimensions, crop, text legibility, and file size as part of the publishing pipeline. These API options do not establish that a particular image will meet a platform’s acceptance rules. ScreenshotOptions API
Check platform requirements separately
The 1200 × 630 example follows a secondary guide updated for 2024 that recommends those dimensions for an X summary_large_image card. Treat that as a starting point, not a universal rule. Requirements can differ by platform and may change. The sources available here do not establish current primary-source rules for file-size ceilings, metadata, supported image formats, crawler access, or cache refresh behavior, so verify those details with the destination platform before deployment. Secondary X card guide, updated for 2024
Or skip the browser setup
ScreenshotNeo can return a screenshot or PDF from one GET request. Its capture flow accepts cookie or consent banners like a visitor and removes more than 60 known consent platforms, newsletter popups, and chat widgets; each of those steps can be turned off. Bot checks or CAPTCHAs, blank pages, timeouts, failed loads, and cache hits are not billed, and the response indicates the page verdict and billing status in headers. It also offers an MCP server with take_screenshot, get_page_info, and capture_pdf tools for AI agents.
For a webpage screenshot, make this request with your API key. See the ScreenshotNeo documentation for request options.
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://example.com/article -o shot.webpThe Free plan includes 1,000 screenshots per month with no card required; paid plans start at $5 for 3,000 shots. Every feature is available on every plan. Sign up for free and get 1,000 screenshots a month with no card.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Troubleshooting the Puppeteer capture
- The image shows a mobile or unexpected layout: set the viewport before
page.goto(), and confirm the route responds as expected at those dimensions. - Text, images, or fonts are missing: navigation may have completed before the design was visually ready. Wait for a relevant selector or app-specific readiness signal and explicitly account for assets that affect the card.
- The screenshot is much taller than expected: check whether
fullPage: trueis enabled. For a card, capture the viewport or a defined region instead. - The output is unexpectedly large or soft: inspect the captured dimensions and choose PNG or JPEG according to the design; JPEG quality trades file size against image fidelity.
- The browser process remains open after an error: keep capture code inside
try/finallyand close the browser in thefinallyblock, as in the example. - The platform rejects or displays the card differently: verify that platform’s current dimensions, metadata, file-size, format, crawler, and cache rules; the example dimensions alone do not guarantee acceptance.
Frequently Asked Questions
Does Puppeteer’s screenshot example guarantee that every page is ready after networkidle2?
No. Readiness depends on the page. Wait for the app state or assets that matter to your card.
Best Value
- Used Book in Good Condition
Is 1200 × 630 the required size for every social card?
No. It is a secondary guide’s recommendation for an X summary_large_image card, not a universal platform specification.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
Do these 3 things before closing this tab:
1Fix the driver behind crashes, sound loss and screen glitches2Repair Windows errors before they cause bigger problems3Scan for outdated or missing drivers - takes under a minute
