ScreenshotNeo

BlogHow-to

How to Create Social Preview Images from Indian Website URLs with Browserless

Render an Indian website or custom social card with Browserless, publish it through Open Graph metadata, and handle geography, timing, and common capture failures.

By the ScreenshotNeo team4 October 20268 min read

To create a social preview image from an Indian website URL with Browserless, send the URL to its REST /screenshot endpoint, save the returned image bytes, host the image at a publicly reachable URL, and set that URL in the page’s og:image metadata. Browserless creates the image; it does not publish the image or add metadata to your site. An Indian domain does not by itself require an India-based proxy. Use geographic routing only if the page’s content changes by visitor location.

This guide uses Browserless’s documented REST screenshot workflow. You need a Browserless API token and a page you are permitted to capture. See the Browserless documentation for current endpoint options and account-specific details.

1. Choose what the social image should show

There are three practical choices:

  • Capture the live page: Pass the Indian page URL. This preserves its rendered appearance, but long pages, banners, and layout may make a poor share card.
  • Render a designed card: Send custom HTML and CSS for a deliberate title, image, or brand composition. This gives you control over the composition and requires maintaining the card markup and styles.
  • Capture one element or a clip: Reuse a well-framed card already on the page. This depends on a stable selector or correct clip coordinates.

For most social previews, a designed card or a carefully selected element is easier to frame than a full-page screenshot. Use a full-page capture only when the entire page is genuinely the image you want to share.

2. Capture a URL with Browserless

The REST endpoint accepts a POST request with a URL and optional screenshot options. The examples below request a PNG and save the response body as binary data. Replace the placeholder token and target URL. Confirm the exact option schema against the current Browserless documentation for your account and endpoint.

cURL

curl --fail-with-body --silent --show-error \
  -X POST 'https://production-sfo.browserless.io/screenshot?token=YOUR_BROWSERLESS_TOKEN' \
  -H 'Content-Type: application/json' \
  --data '{"url":"https://example.in","options":{"type":"png","fullPage":true}}' \
  --output preview.png

Use fullPage: true only when you want the entire document. For a social card, omit it or use a selector or clip so the result has a deliberate frame. The response is image data; do not treat it as JSON.

Python

import os
import requests

endpoint = "https://production-sfo.browserless.io/screenshot"
token = os.environ["BROWSERLESS_TOKEN"]
payload = {
    "url": "https://example.in",
    "options": {
        "type": "png",
        "fullPage": True,
    },
}

response = requests.post(
    endpoint,
    params={"token": token},
    json=payload,
    timeout=90,
)
response.raise_for_status()
content_type = response.headers.get("content-type", "").lower()
if not content_type.startswith("image/"):
    raise RuntimeError(f"Expected image bytes, received {content_type!r}")

with open("preview.png", "wb") as image_file:
    image_file.write(response.content)

Node.js

import { writeFile } from "node:fs/promises";

const endpoint = new URL("https://production-sfo.browserless.io/screenshot");
endpoint.searchParams.set("token", process.env.BROWSERLESS_TOKEN);

const response = await fetch(endpoint, {
  method: "POST",
  headers: { "content-type": "application/json" },
  body: JSON.stringify({
    url: "https://example.in",
    options: { type: "png", fullPage: true },
  }),
  signal: AbortSignal.timeout(90_000),
});

if (!response.ok) {
  throw new Error(`Browserless returned HTTP ${response.status}: ${await response.text()}`);
}
const contentType = response.headers.get("content-type") ?? "";
if (!contentType.toLowerCase().startsWith("image/")) {
  throw new Error(`Expected image bytes, received ${contentType}`);
}
await writeFile("preview.png", Buffer.from(await response.arrayBuffer()));

Keep the token in an environment variable or secret store. Avoid placing it in client-side code or a public repository. Check both the HTTP status and content type before writing the body: an error response saved with a .png extension is still an error response.

3. Control the capture

Browserless documents URL and raw-HTML input, screenshot format, full-page capture, selector-based capture, clipping, and wait controls. Use only options supported by the endpoint you call; Browserless notes that parameter support can vary by endpoint.

Need Use Watch for
Choose the output format Set the screenshot type to PNG, JPEG, or WebP as appropriate. Ensure the filename and hosted content type match the returned format.
Capture the entire document Enable fullPage. A long page may be unreadable or unsuitable as a social card.
Capture a specific card Use selector-based capture or a clip. Selectors must match the rendered page; clip coordinates must frame the subject.
Wait for asynchronous content Use a supported wait condition, delay, or selector wait. A fixed delay can waste time and still fail when load times vary; prefer a relevant condition when available.
Include lazy-loaded content Use Browserless’s documented scrollPage: true behavior; combine with fullPage: true only if capturing the whole page. Scrolling can trigger more page content and increase capture work.
Render a purpose-built card Submit raw HTML with styles through the documented HTML input. Keep referenced assets reachable to the browser and size the composition for the intended use.

For an India-specific view, first determine whether the site actually varies by country, language, or IP. Browserless documents proxy country selection and locale matching, but country availability and parameter support depend on the network and endpoint. Check current documentation before configuring a proxy, then inspect the resulting page. Do not add geographic routing just because the URL ends in .in.

4. Host the image and add Open Graph metadata

After capture, upload the image to a location that social preview consumers can fetch. The page you want shared must reference that image URL in its HTML head. Open Graph defines og:title, og:type, og:image, and og:url as required properties; provide og:image:alt to describe the image as well. See the Open Graph protocol.

<head>
  <meta property="og:title" content="A useful page title">
  <meta property="og:type" content="website">
  <meta property="og:image" content="https://cdn.example.com/previews/example-in.png">
  <meta property="og:url" content="https://example.in/page">
  <meta property="og:image:alt" content="A preview of the page about …">
</head>

Use the canonical URL for og:url and a stable, externally reachable URL for og:image. A successful screenshot response alone does not make a social preview available. After deployment, fetch the image URL independently and inspect the page’s delivered metadata. Preview services may cache results; the reviewed sources do not establish one universal cache refresh method, so use the relevant consumer’s current tools and guidance.

5. Inspect and publish the result

  1. Open the saved file and check that it contains the intended content, framing, and complete assets.
  2. Confirm that the hosted image URL can be fetched without an interactive login.
  3. Inspect the published page’s HTML head for the required Open Graph values and the correct canonical URL.
  4. Check the preview with the intended sharing consumer after publishing. If it shows an old image, consider caching and verify the consumer’s supported refresh process.

6. Troubleshooting

Symptom Likely cause What to do
HTTP error or no image file Missing or invalid token, unsupported request shape, or a failed capture. Check the HTTP status and error body, confirm the token and endpoint, and compare the payload with current Browserless REST documentation.
File exists but will not open as an image An error or non-image response was saved with an image extension. Check status and Content-Type before saving; inspect the response body when the status is not successful.
Blank or white screenshot The page failed to render, content was not ready, or the target blocked automation. Wait for the relevant content, check the target URL and page state, and inspect whether a bot challenge or access-denied page appeared.
CAPTCHA, 403, or access denied The site may be blocking automated traffic. Browserless documents /unblock for some protections and suggests residential proxies for best results. Neither guarantees access to every protected page; follow the target site’s access rules.
Images or lower sections are missing Lazy-loaded content was not triggered before capture. Use the documented scrollPage: true option where supported, and use full-page capture only if the whole page is needed.
Text, charts, or embeds are incomplete Asynchronous content had not finished when the screenshot ran. Wait for a specific selector or other supported readiness condition instead of relying on an arbitrary short delay.
The image looks wrong as a share card A full page, overlay, or poorly framed region was captured. Use supplied HTML for a designed card, or capture a stable element or clip with suitable framing.
The social preview does not update The page metadata or image URL may be wrong, or the consumer may have cached the previous preview. Fetch the image directly, inspect the live page metadata, and follow the consumer’s current preview refresh process.

7. Performance, reliability, and cost considerations

Capture only the content you need. A full-page image of a long site and a page that waits on slow scripts can take more browser work than a compact card capture. Selector or clip capture can also avoid including irrelevant page sections. The dossier provides no benchmark or universal capture-time figure, so measure your own target pages and choose waits based on the content that must be present.

For a production workflow, treat rendering as a fallible network operation: set a client timeout appropriate to your use, check the HTTP status, preserve useful error details, and verify content type before storing bytes. If you retry transient failures, use a bounded retry policy and avoid retrying unchanged requests indefinitely. Recheck the final hosted asset and metadata independently. The research does not establish Browserless pricing or a guaranteed success rate; consult its current service terms for costs and limits.

Or skip the browser setup

ScreenshotNeo is a website screenshot API and MCP server. Its one-call API can return a screenshot or PDF, with options for full-page capture, selectors, waits, formats, and custom HTML/CSS. See the ScreenshotNeo API docs.

curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://example.in -o shot.webp
import requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://example.in"}, timeout=90)
open("shot.webp", "wb").write(r.content)
const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://example.in' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);

ScreenshotNeo accepts cookie and consent banners and removes more than 60 known consent platforms, newsletter popups, and chat widgets before capture; each step can be turned off. Bot checks, blank pages, timeouts, failed loads, and cache hits are not billed, and response headers report the page verdict and billing status. Its MCP server gives AI agents tools for screenshots, page information, and PDF capture. The free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000 screenshots.

Sign up free for 1,000 screenshots a month, no card required.

FAQ

Does an Indian URL automatically need an India proxy?

No. Use a country proxy only when the page changes based on geographic location and you need to reproduce that variation.

Does Browserless put the image into Open Graph metadata?

No. You must host the generated image and set its public URL in the page’s og:image property.

Should I use a full-page screenshot for a social preview?

Only if the whole page is the intended preview. A designed card or a well-framed element is often more suitable.

Can a generated image be used when the source page is blocked?

Not reliably. Browserless documents approaches for some protections, but CAPTCHA and access restrictions can still prevent a usable capture.