Social images and link previews

Recipes for 1200×630 Open Graph images from an HTML template, link-preview thumbnails and single-component captures.

Open Graph image from an HTML template#

Design the card in HTML and CSS, fill in the title on your server, and capture exactly the viewport:

const html = `<!doctype html>
<html><body style="margin:0;width:1200px;height:630px;display:grid;place-items:center;
  background:#18202b;color:#fff;font:700 64px system-ui">
  ${escapeHtml(post.title)}
</body></html>`;

const res = await fetch('https://rendersbolt.com/v1/screenshot', {
  method: 'POST',
  headers: { Authorization: `Bearer ${process.env.API_KEY}`, 'Content-Type': 'application/json' },
  body: JSON.stringify({ html, viewport: { width: 1200, height: 630 }, format: 'png', cache: true, cache_ttl: 604800 }),
});

html = f"""<!doctype html><html><body style="margin:0;width:1200px;height:630px;display:grid;
  place-items:center;background:#18202b;color:#fff;font:700 64px system-ui">{escape(post.title)}</body></html>"""

r = requests.post(
    "https://rendersbolt.com/v1/screenshot",
    headers={"Authorization": f"Bearer {os.environ['API_KEY']}"},
    json={"html": html, "viewport": {"width": 1200, "height": 630}, "format": "png", "cache": True, "cache_ttl": 604800},
)

Render the card once when the post is published and store it. cache protects you when the same card is requested twice.

Thumbnail of a website#

{ "url": "https://example.com", "viewport": { "width": 1280, "height": 800 }, "format": "webp", "quality": 80, "block_cookie_banners": true, "block_ads": true }

For a smaller file, resize on your side. For sharp images on high-density screens, add "device_scale_factor": 2.

One component#

{ "url": "https://example.com/pricing", "selector": "#plans", "omit_background": true, "format": "png" }

Hide chat widgets and banners#

{ "url": "https://example.com", "block_cookie_banners": true, "hide_selectors": ["#intercom-container", ".promo-bar"] }

Read the longer guide on the blog: Website screenshots without cookie banners, ads or half-loaded images.

Stuck? Write to [email protected] with the request you sent and the error code you got back.