How to Use GrabzIt to Create Open Graph Images from HTML

To create an Open Graph image from HTML with GrabzIt, send a purpose-built HTML card to its HTML-to-image API, save the returned image at a stable public HTTPS URL, and put that URL in the page’s og:image metadata. A 1200 × 630 pixel canvas is a useful starting point for a landscape preview, but it is a practical convention rather than a size required by the Open Graph Protocol; check the destination platform’s current guidance.

1. Build the HTML card

Make a compact document or a dedicated card element containing the title, brand treatment, and visuals that should appear when the page is shared. Keep essential content within the chosen canvas and leave comfortable margins so text and important details are not clipped. A simple starting document might look like this:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <style>
    * { box-sizing: border-box; }
    html, body { margin: 0; width: 1200px; height: 630px; }
    body {
      display: grid;
      place-items: center;
      background: #10243b;
      color: #fff;
      font: 700 64px/1.1 system-ui, sans-serif;
    }
    .card { width: 100%; padding: 72px; }
    .eyebrow { color: #8ee3d0; font-size: 22px; margin-bottom: 24px; }
  </style>
</head>
<body>
  <main class="card">
    <div class="eyebrow">Developer guide</div>
    <div>A clear, shareable page title</div>
  </main>
</body>
</html>

This is only a design example. Replace the sample copy and styling with the content and visual identity appropriate to your page.

2. Make referenced assets available

If the markup uses external stylesheets, web fonts, or background images, use absolute URLs so the renderer can resolve them. GrabzIt also suggests embedding image content as data URLs. Relative paths such as /assets/card.png may resolve differently from the page where the HTML was authored, so avoid relying on them unless the rendering request provides a matching base location.

Keep the card’s important appearance self-contained where practical. Check that remote resources are publicly reachable and do not require browser-only authentication. If an image or font fails to load, the resulting image may still be produced but can differ from the intended design.

3. Render HTML with GrabzIt

GrabzIt documents an HTML-to-image method and a URL-to-image method. Use HTML input when you are generating a purpose-built share card from markup. Use URL capture when the graphic already exists as a rendered webpage. The following examples show the documented Node.js method name and the general REST request pattern; confirm the current endpoint, authentication fields, and option names in GrabzIt’s documentation for your account and SDK version.

Node.js

const { GrabzItClient } = require("grabzit");

const client = new GrabzItClient(
  "YOUR_APPLICATION_KEY",
  "YOUR_APPLICATION_SECRET"
);
const html = `<!doctype html>
<html><body style="margin:0;width:1200px;height:630px;background:#10243b;color:white;font:700 56px system-ui;display:grid;place-items:center">
  A share card rendered from HTML
</body></html>`;

client.html_to_image(html, {
  format: "png",
  width: 1200,
  height: 630
});

// Complete the capture using the save/retrieval method for your installed
// GrabzIt SDK version, then publish the resulting file at a public HTTPS URL.

The method name html_to_image(html, options) is documented by GrabzIt’s Node.js reference. The save or retrieval flow and accepted option details depend on the current SDK version, so use its official reference rather than assuming this illustrative call writes a local file by itself.

Python

GrabzIt’s supplied research references document HTML-to-image and Node.js, but do not establish a current Python SDK call signature. Avoid guessing one. Use the documented GrabzIt client for your chosen language, or use the REST API after confirming its current request and authentication contract. The following cURL shape is an illustrative REST request, not a verified endpoint contract; substitute the endpoint and fields from the official REST documentation.

curl --request POST \
  --header "Authorization: YOUR_GRABZIT_CREDENTIALS" \
  --header "Content-Type: application/json" \
  --data '{"html":"<html><body>Share card</body></html>","format":"png","width":1200,"height":630}' \
  "GRABZIT_REST_ENDPOINT_FROM_CURRENT_DOCUMENTATION" \
  --output og-image.png

Do not use placeholder authentication or endpoint values as-is. Consult the [GrabzIt HTML-to-image documentation](https://grabz.it/html-to-image/) and its [REST API reference](https://grabz.it/api/) for the current authentication scheme, request encoding, output retrieval, and account limits.

4. Choose the capture area, dimensions, and format

Viewport size and output image dimensions are separate capture considerations in GrabzIt’s REST documentation. Set the browser viewport large enough for the intended composition, then set output dimensions to the actual image canvas you want. If your document contains more than the card, use the REST API’s documented CSS target selector option to capture a single element; check the current reference for exact parameter spelling and behavior.

Choice	When to use it	Considerations
PNG	When preserving crisp text, flat colors, and image quality matters	GrabzIt describes PNG as a quality-oriented choice; check file size after rendering.
JPG	When reducing file size is more important	GrabzIt describes JPG as a file-size-conscious choice; inspect text edges and gradients.
WEBP, BMP, TIFF, SVG	When the destination workflow supports a listed format	GrabzIt lists these formats. Verify that the social destination accepts the format you publish.

A 1200 × 630 canvas has a 1.91:1 aspect ratio and is a broadly useful working choice. One secondary guide reports 1200 × 630 as recommended and 600 × 315 as a Facebook minimum, but platform requirements can change and those figures are not Open Graph Protocol requirements. Confirm current destination-specific guidance before launch and keep key content away from the edges.

5. Publish the image and add Open Graph metadata

Save the generated file somewhere stable and publicly fetchable over HTTPS. The page’s metadata must point to that image; generating a file alone does not complete Open Graph setup. The protocol identifies og:title, og:type, og:image, and og:url as required properties. Add descriptive image metadata where useful:

<head>
  <meta property="og:title" content="How to use GrabzIt to create Open Graph images">
  <meta property="og:type" content="article">
  <meta property="og:image" content="https://example.com/images/grabzit-og.png">
  <meta property="og:url" content="https://example.com/guides/grabzit-og-images">
  <meta property="og:image:width" content="1200">
  <meta property="og:image:height" content="630">
  <meta property="og:image:alt" content="A share card for a guide to creating Open Graph images from HTML">
</head>

Replace the example domain, image path, title, and dimensions with the published page’s real values. The Open Graph Protocol also defines optional image properties such as MIME type and secure URL. Keep image-specific properties with the image declaration they describe. Multiple values are allowed for a property; when values conflict, the first tag in document order has preference.

6. Inspect the result before sharing

1. Open the published image URL directly and confirm it responds with the intended file.
2. Check the actual output dimensions and format, not just the requested options.
3. Inspect text wrapping, margins, and remote assets in the rendered image.
4. Confirm the live page serves the intended Open Graph tags in its document head.
5. Preview the link on the destination platform. Platforms may handle previews differently, and a successful image render does not guarantee identical presentation everywhere.

Or skip the browser setup

If the image you need is a screenshot of a live page, [ScreenshotNeo](https://screenshotneo.com) provides a one-request screenshot API. This is a different input path from rendering a designed HTML card: it captures a URL, which can be useful when the share image should reflect a page that already exists.

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

See the [ScreenshotNeo API documentation](https://screenshotneo.com/docs/) for request options. ScreenshotNeo removes cookie banners, newsletter popups, and chat widgets before the shot; bot checks, blank pages, and failed loads are never billed. Its MCP server lets AI agents take screenshots. The free plan includes 1,000 screenshots a month with no card, and paid plans start at $5 for 3,000 screenshots. [Create a free ScreenshotNeo account](https://screenshotneo.com/account/sign-up/).

Troubleshooting

Symptom	Likely cause	Fix
External styling or imagery is missing	Relative paths, inaccessible resources, or remote assets that require authentication	Use absolute URLs or data URLs, and make sure the renderer can fetch each resource.
The card is clipped or has unexpected whitespace	Viewport and output dimensions do not match the card layout, or the page includes extra content	Set the intended canvas dimensions, inspect the layout at that size, and use a documented target selector for a single element if appropriate.
Fonts or line breaks differ from the design	A web font did not load before capture, or the fallback font has different metrics	Make the font resource reachable, allow for its loading in the capture workflow, and design with enough width for fallback behavior.
The API rejects an option	An option name or value is unsupported by the selected endpoint, SDK version, or account	Check the current GrabzIt reference for the exact method, spelling, and account-dependent limits.
The output image exists but the social preview has no image	The page’s og:image is absent, malformed, or points to an unreachable URL	Publish the image at a stable public HTTPS URL and verify the served page metadata and image URL.
The preview differs between destinations	Platforms can apply different preview behavior and requirements	Check each destination’s current image guidance and inspect the preview there before relying on it.

Performance, reliability, and cost considerations

Rendering time and reliability depend on the capture request and the resources the HTML needs. Remote stylesheets, fonts, and images add dependencies that can fail or load slowly, so keeping the card self-contained or using dependable absolute URLs can make its appearance more predictable. For a production workflow, handle API errors, retain the output only after a successful capture, and verify that the published asset is reachable.

The research available for this guide does not establish current GrabzIt prices, free-tier limits, watermark terms, numeric plan limits, or an end-to-end capture benchmark. Check the current product and account documentation before estimating recurring costs or choosing an output workflow. The product page states that free-tier and trial conversions include a watermark; verify current terms if that matters for production use.

FAQ

Does the Open Graph Protocol require a 1200 × 630 image?

No. That is a practical landscape canvas commonly used for previews, not a size mandated by the protocol. Check the current guidance for the platform where the link will appear.

Can I use GrabzIt to capture an existing page instead of supplying HTML?

Yes. GrabzIt documents URL-to-image capture as well as HTML-to-image rendering. Choose URL capture when the desired graphic already exists as a webpage.

Will the generated file automatically appear in link previews?

No. Publish the file at a reachable image URL and add that URL to the page’s og:image metadata along with the other page metadata.

Which output format should I use?

GrabzIt characterizes PNG as quality-oriented and JPG as more focused on file size. Compare the actual output and confirm the destination platform currently accepts the chosen format.