Supported OG Image parameters
Control how an individual page is rendered by adding hcti: metadata to its HTML.
The most common screenshot controls are provided in the dashboard when you create or edit an OG Image Config. Use page-level metadata when a particular page needs to override those defaults.
Some parameters from the general HTML/CSS to Image API are not supported here because they do not make sense for OG Image Configs or must be configured at the config or template level. The table below is the full list of parameters supported in page metadata.
Add a supported parameter to the page’s <head> using either the property or name attribute:
<meta property="hcti:selector" content="#social-card">
<meta property="hcti:viewport_width" content="1200">
<meta property="hcti:viewport_height" content="630">
Page metadata takes precedence over the corresponding defaults in the dashboard. Keep Parse meta tags for each path enabled for these overrides to be read.
| Metadata | Type | Description |
|---|---|---|
hcti:css | String | CSS used to style the rendered image or modify a captured page. |
hcti:content_version | Integer | Change an OG image’s content identity when content at the same path changes. |
hcti:block_consent_banners | Boolean | When set to true, automatically blocks cookie consent banners and popups on websites. Most useful for URL screenshots. |
hcti:color_scheme | String | Set Chrome to render in light or dark mode. Affects websites using prefers-color-scheme. |
hcti:device_scale | Double | Control resolution by adjusting the pixel ratio from 0.1 to 3. Higher values increase image quality and file size. |
hcti:identify_as_hcti | Boolean | Add X-HCTI-SCREENSHOT: 1 to the top-level request when screenshotting a URL. |
hcti:max_wait_ms | Integer | Set a maximum time limit from 500 to 10000 milliseconds for waiting before taking the screenshot. |
hcti:media_type | String | Set Chrome to render using screen or print CSS media styles. |
hcti:ms_delay | Integer | Delay before generating the image. Useful when waiting for JavaScript; start with 500 milliseconds. |
hcti:render_when_ready | Boolean | Wait to generate the image until JavaScript calls ScreenshotReady(). |
hcti:selector | String | Crop the image to an element matching this CSS selector, such as section#complete-toolkit.container-lg. |
hcti:timezone | String | Set Chrome’s timezone with an IANA identifier such as America/New_York. |
hcti:transparent_background | Boolean | Set to true to render with a transparent background. |
hcti:viewport_height | Integer | Set the height of Chrome’s viewport. Both dimensions must be set when using either. |
hcti:viewport_landscape | Boolean | Set Chrome’s viewport to landscape mode. |
hcti:viewport_mobile | Boolean | Set Chrome’s viewport to emulate a mobile device. |
hcti:viewport_touch | Boolean | Set Chrome’s viewport to support touch events. |
hcti:viewport_width | Integer | Set the width of Chrome’s viewport. Both dimensions must be set when using either. |
For parameters used outside OG Image Configs, see the complete API parameter reference.