Free tools Windows power users keep installed
One-click scans. No signup required.
Use Playwright to render a dedicated HTML social card at a fixed viewport, capture the card as an image, publish that image at a stable public URL, and reference it in the page’s Open Graph metadata. Playwright creates the image pixels; Open Graph metadata tells sharing crawlers which image and page details to use.
Build a dedicated HTML card, not a screenshot of the whole page
A social preview is a small, fixed composition. Create a route or template that renders only the card you intend to share, with its text, colors, and imagery laid out for the target dimensions. Capture that card element rather than taking a full-page screenshot: a long page screenshot is generally the wrong artifact for a preview image.
LinkedIn’s current sharing-module guidance says website source should comply with Open Graph Protocol and specifies a minimum image size of 1200 × 627 pixels for its module. That is LinkedIn’s requirement, not a universal size for every platform. Check the current specifications of each destination you support.
Capture the card with Playwright
This Node.js example assumes Playwright is installed in the project, a local application is serving the card route, and the card element has a data-social-card attribute. It sets the viewport to the example dimensions, waits for network activity to settle, then writes the element image. The code is illustrative and has not been execution-tested; check screenshot options against your installed Playwright version.
#1 Best Overall
const { chromium } = require('playwright');
(async () => {
const browser = await chromium.launch();
try {
const page = await browser.newPage({
viewport: { width: 1200, height: 627 },
});
await page.goto('http://localhost:3000/social-card/example', {
waitUntil: 'networkidle',
});
await page.locator('[data-social-card]').screenshot({
path: 'public/social/example.png',
type: 'png',
animations: 'disabled',
scale: 'css',
});
} finally {
await browser.close();
}
})();Playwright’s screenshot methods return image bytes; supplying path saves the image directly. The API supports page or element screenshots, clipping, full-page capture, image type, scale, masking, style overrides, and animation control. See the Playwright screenshot API documentation for the installed version’s exact options.
Choose the capture target
- Element screenshot: Prefer a dedicated card element. It ties the output to the intended composition without capturing unrelated page content.
- Clip: Use a clip rectangle when the card is already positioned precisely in the page and you need exact coordinates.
- Full page: Use
fullPagefor a genuinely tall-page image, not an ordinary social card.
Choose scale and format
- Scale:
scale: 'css'produces one screenshot pixel per CSS pixel.scale: 'device'captures at device-pixel resolution and can produce a larger image. - PNG: The documented default; use it for lossless output or transparency.
- JPEG or WebP: Consider these when compression and file size matter. The screenshot quality option applies to JPEG and WebP, not PNG. Confirm that your destination accepts the chosen format.
Make output repeatable
A fixed viewport controls the layout dimensions, but it does not ensure every asset or dynamic value is ready. Wait for the content your card needs, especially fonts, external images, and application data. networkidle can be useful, but it is not a guarantee that every page dependency has completed or that application content is correct.
- Keep the card content deterministic: avoid timestamps, rotating promotions, and other values that change between runs unless they belong in the image.
- Disable animations for the capture or apply a screenshot stylesheet to hide or stabilize dynamic elements. Playwright supports animation control and stylesheet overrides.
- Check the rendered result when changing fonts, image sources, or layout; screenshot controls cannot fix missing assets or incorrect application state.
- Use a stable output location and ensure the generated file is copied or deployed to a publicly reachable URL.
Publish the image and add Open Graph metadata
After generating the file, publish it at a stable public image URL. In the page’s document head, point og:image to that URL and provide the Open Graph properties for the page. The Open Graph Protocol defines og:title, og:type, og:image, and og:url as the basic properties. Its image properties can also describe dimensions, MIME type, secure URL, and alternative text.
<meta property="og:title" content="Example page title" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://example.com/example" />
<meta property="og:image" content="https://example.com/social/example.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="627" />
<meta property="og:image:alt" content="A short description of the preview image" />The dimensions shown here match LinkedIn’s stated minimum shape; they are not a cross-platform guarantee. The Open Graph Protocol describes og:image:alt as a description of the image, not a caption, and says a page specifying og:image should specify og:image:alt. Keep the intended og:image first if you provide multiple image values: the protocol says the first value is preferred in a conflict. Put structured image properties after their root image tag. Read the Open Graph Protocol and LinkedIn’s sharing-module guidance for their respective details.
Troubleshoot missing, inconsistent, or poor-looking previews
- The image is blank or missing: Confirm that the generated file exists at the deployed path and that the metadata uses its public URL, not a local filesystem path or localhost address.
- The card is cut off or incorrectly scaled: Check the page viewport, the card element’s dimensions, and whether you captured the element, a clip, or the full page. Confirm that the output scale matches your intended pixel dimensions.
- Fonts or images are absent: Make sure those assets load in the browser before capture. A completed navigation or screenshot call alone does not establish that every external asset or application request is ready.
- The same input produces different images: Look for animations, rotating or time-based content, and asynchronous data. Disable animation or use a screenshot stylesheet, then make the card data and asset-loading conditions predictable.
- The shared image differs from the local screenshot: Inspect the deployed HTML head and image URL. The screenshot file and the metadata are separate parts of the process; generating pixels does not by itself configure what a crawler uses.
Or skip the browser setup
ScreenshotNeo is a website screenshot API and MCP server. A single request can capture a URL, but for this workflow the card route still needs to exist and the generated image still needs a public URL referenced by Open Graph metadata. The API can return PNG, JPEG, WebP, or PDF; consult the ScreenshotNeo API documentation for request options.
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://example.com/social-card/example -o shot.webpScreenshotNeo accepts cookie or consent banners before capture and removes more than 60 known consent platforms, newsletter popups, and chat widgets; each step can be turned off. Bot checks and CAPTCHAs, blank pages, timeouts, failed loads, and cache hits are not billed, and response headers say which verdict and billing status applied. Its MCP server gives AI agents tools for screenshots, page information, and PDF capture. The Free plan includes 1,000 screenshots per month with no card; paid plans start at $5 for 3,000 shots.
Sign up for ScreenshotNeo’s free plan to start with 1,000 screenshots a month and no card.
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.
