How to Generate Social Media Preview Images from Web Pages with Browshot

Short answer: Use Browshot to capture the page or a specific element, make the resulting image publicly retrievable, and reference its URL in the page’s Open Graph og:image tag. Browshot generates the image; the social platform reads the page metadata and fetches the image separately.

This guide covers the capture choices, an API request pattern, Open Graph markup, image delivery, LinkedIn’s documented image limits, and fixes for previews that do not appear. Browshot’s API details are documented in its API documentation.

1. Understand the two parts of a social preview

A social preview is assembled from information published on the page and fetched by the platform. A screenshot API does not, by itself, publish a preview: it creates an image. You must host that image at a URL the platform crawler can fetch and add that URL to the page metadata.

1. Capture: Browshot renders the target page and produces an image.
2. Deliver: Store or serve the image at a reachable URL. Browshot documents hosting output on Browshot or on S3; S3 hosting requires a bucket.
3. Describe: Put the image URL and the page’s title, description, and canonical URL in Open Graph metadata in the HTML head.
4. Inspect: Check the result with the destination platform’s preview or sharing tool, then correct the capture or metadata and refresh the preview if needed.

The Open Graph Protocol defines og:image as the image URL representing the page. If a page has multiple og:image values, the first one is preferred, so put the intended primary image first. See the Open Graph Protocol.

2. Choose what Browshot should capture

Pick the capture region based on what the shared card should communicate. Browshot documents screen and page capture modes and CSS-selector targeting.

Capture choice	Use it when	Watch for
Browser screen or viewport	You want a composed, card-like view of the page’s visible area.	Set a viewport that gives the important content room and the intended crop. A viewport capture is not the same as a full-page image.
Full page	The page itself, including below-the-fold content, is the desired image.	A long page can produce a very tall image, which may be cropped or unsuitable for a social card. Consider cropping or resizing to the destination’s shape.
CSS selector	The page contains a specific hero, chart, or designed share-card element to capture.	Ensure the selector matches a rendered element and wait for dynamic content to be ready.

Decide separately whether you need a fresh capture or can reuse a cached one, how long to wait for client-rendered content, and what browser dimensions and output dimensions fit the destination. Browshot’s full screenshot API documents options including cache behavior, delay, browser dimensions, headers, and JavaScript execution; consult its API reference for exact parameter names and supported values.

3. Request a Browshot screenshot

Browshot’s simple endpoint can retrieve a screenshot in one request. The following is a request shape rather than a claim about unlisted credentials or parameters; use the endpoint and required fields shown in Browshot’s current documentation for your account and capture mode.

curl --get 'https://api.browshot.com/api/v1/simple' \
  --data-urlencode 'url=https://example.com/article' \
  --output preview.png

For a fuller capture, configure the documented screenshot API with the appropriate instance and options. Browser size controls the viewport, delay and JavaScript execution help with dynamic pages, headers can support pages that require request context, and cache behavior determines whether a prior capture may be reused. Do not assume a delay alone guarantees that asynchronous content has finished loading; inspect the output and tune the wait for the page.

For asynchronous requests, Browshot’s documentation says to follow redirects and check screenshot status before retrieving the completed output. Treat capture creation and image retrieval as separate stages: a pending job is not yet a usable image URL.

4. Publish Open Graph metadata

After you have a stable, publicly retrievable image URL, add the metadata to the shared page’s HTML head. Replace the example values with the page’s real title, description, canonical URL, and image location.

<head>
  <meta property="og:title" content="Article title">
  <meta property="og:description" content="A concise description of the article.">
  <meta property="og:url" content="https://example.com/article">
  <meta property="og:image" content="https://images.example.com/article-preview.png">
</head>

Use an absolute image URL so a crawler can resolve it without knowing the page’s relative path. If you publish multiple og:image tags, put the intended image first. Keep the metadata in the server-delivered page head where the platform can read it; do not rely on a client-side update that the crawler may not execute.

5. Make the image accessible and fit the destination

The image host must let the social platform retrieve the file. Browshot documents its own hosting and S3 hosting; with S3, you need a bucket. You can also retrieve the screenshot and serve it from your own public image host. In each case, verify that the final URL responds to an unauthenticated fetch and does not point to a protected directory.

LinkedIn’s sharing guidance specifies a minimum image size of 1200 × 627 pixels, recommends a 1.91:1 ratio, and sets a maximum file size of 5 MB. It also says images under 401 pixels wide display as a thumbnail. If your capture differs, crop or resize it before publishing. These are LinkedIn-specific figures; check the target platform’s current requirements because specifications can differ and change. See LinkedIn’s sharing guidance.

• Prefer a capture framed for the destination’s aspect ratio rather than expecting every platform to show a full-page screenshot uncropped.
• Keep the key subject away from edges that may be cropped.
• Check final pixel dimensions and file size after any crop or resize.
• Make sure the image URL is stable and reachable by crawlers without cookies, login, or special headers.

6. Inspect the result and update it safely

1. Open the image URL directly in a private browser session. Confirm it loads without signing in.
2. Inspect the page source or server output and confirm the Open Graph tags are in the head and contain the expected values.
3. Use the destination’s sharing preview or inspection tool to see what its crawler reads.
4. If you change the screenshot or tags, request a fresh inspection where the platform supports it. Platforms may retain previously fetched preview data.
5. When updating the image at the same URL, account for browser, host, and platform caching. A versioned image URL can make a changed asset distinguishable, provided you update og:image accordingly.

7. Troubleshooting: why is my og:image not showing?

Symptom	Likely cause	What to check or fix
No image appears	The crawler cannot retrieve the image, or the metadata is missing or malformed.	Open the absolute image URL without authentication; check the HTML head for a valid og:image URL; confirm the response serves the intended image.
The wrong image appears	The page declares several images and the first is being preferred, or the platform has cached older metadata.	Put the intended image first, then refresh the platform’s preview inspection if available.
A stale image persists	The platform or an intermediate cache still has an earlier fetch.	Request a new fetch using the destination’s available inspection flow. If replacing the asset, use a versioned URL and update the tag.
The screenshot is blank or incomplete	The page had not rendered its content, a selector did not match, or client-side scripts/content needed more time.	Inspect the capture; verify the page and selector; tune Browshot’s documented delay or JavaScript options and recapture.
The image is clipped or too tall	A full-page capture does not match the social card’s aspect ratio.	Use a viewport or selector capture, or crop and resize the resulting file for the destination.
LinkedIn shows a small thumbnail	The image is under 401 pixels wide, according to LinkedIn’s guidance.	Provide a sufficiently wide image and meet LinkedIn’s documented minimum dimensions and recommended ratio.
The capture request redirects or is not ready	The API request is asynchronous or the image has not finished rendering.	Follow redirects, check the documented screenshot status, then retrieve the completed image.
LinkedIn cannot fetch an otherwise valid image	The image may be in a protected directory or the site may block LinkedIn’s fetch.	Serve the file from a publicly accessible location and check access controls or crawler blocking. LinkedIn calls out both conditions in its help guidance.

8. Performance, reliability, and cost considerations

• Performance: Reuse cached captures when the page has not changed and freshness is not required. For rapidly changing pages, request a fresh capture and allow for rendering time. Full-page captures and pages with substantial client-side rendering may take more work to produce than a simple viewport; choose only the capture scope you need.
• Reliability: For async captures, track status and retrieve only completed output. Keep image hosting independent of the source page’s access restrictions, and check that the final URL is fetchable by crawlers. The source materials do not establish Browshot uptime or service-level commitments.
• Cost: The available Browshot documentation in this research does not establish current pricing, free-tier limits, or per-capture costs. Check Browshot’s current account and API documentation before estimating spend. Caching and selecting only the required capture are practical ways to avoid unnecessary work, but exact billing effects depend on Browshot’s current terms.

9. Or skip the browser setup

ScreenshotNeo is a website screenshot API and MCP server for developers. One GET request returns a PNG, JPEG, WebP, or PDF. Its capture can accept a consent banner like a visitor and remove more than 60 known consent platforms, newsletter popups, and chat widgets; each cleanup step can be turned off. Bot checks and CAPTCHAs, blank pages, timeouts, failed loads, and cache hits are not billed, and responses identify the page verdict and billing status in headers. An MCP server provides take_screenshot, get_page_info, and capture_pdf tools for Claude, Cursor, and other MCP clients. See the ScreenshotNeo API documentation.

curl -G "https://api.screenshotneo.com/v1/shot" \
  -d access_key=YOUR_API_KEY \
  --data-urlencode url=https://example.com/article \
  -o shot.webp

import requests

r = requests.get(
    "https://api.screenshotneo.com/v1/shot",
    params={"access_key": "YOUR_API_KEY", "url": "https://example.com/article"},
    timeout=90,
)
r.raise_for_status()
open("shot.webp", "wb").write(r.content)

const q = new URLSearchParams({
  access_key: 'YOUR_API_KEY',
  url: 'https://example.com/article'
});
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);
if (!res.ok) throw new Error(`Screenshot request failed: ${res.status}`);
const image = Buffer.from(await res.arrayBuffer());
await import('node:fs/promises').then(fs => fs.writeFile('shot.webp', image));

These examples save the returned image locally; host it at a public URL and set that URL in og:image. Cookie banners, popups, and chat widgets are removed before the shot; bot checks, blank pages, and failed loads are never billed; an MCP server lets AI agents take screenshots; and 1,000 screenshots a month are free with no card. Paid plans start at $5 for 3,000 screenshots. Sign up for 1,000 free screenshots a month, with no card required.

10. Frequently asked questions

Does Browshot publish the Open Graph tag for me?

No. Browshot creates the screenshot. Your page must publish the metadata that points to its hosted image.

Can I use a screenshot as the preview image without changing the page?

The platform needs a page URL to inspect, and that page needs metadata associating it with the image. Uploading an image alone does not tell the platform which page it represents.

Should I capture a full page or just the first screen?

Use the viewport when you want a composed card-like view. Use full-page capture when the whole page is the intended image and you can handle its resulting shape. A selector is useful when a specific element is already designed for sharing.

Can I use the same preview image on every social platform?

You can publish one image URL in Open Graph metadata, but platforms can have different display behavior and requirements. Check the destination’s current guidance and inspect its preview.

Why does my browser show the image while a crawler does not?

Your browser may have a login session, cookies, or access unavailable to a crawler. Test the image URL without authentication and check whether access controls block the platform.