Skip to content
HTML/CSS to ImageDocs

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.

MetadataTypeDescription
hcti:cssStringCSS used to style the rendered image or modify a captured page.
hcti:content_versionIntegerChange an OG image's content identity when content at the same path changes.
hcti:block_consent_bannersBooleanWhen set to true, automatically blocks cookie consent banners and popups on websites. Most useful for URL screenshots.
hcti:color_schemeStringSet Chrome to render in light or dark mode. Affects websites using prefers-color-scheme.
hcti:device_scaleDoubleControl resolution by adjusting the pixel ratio from 0.1 to 3. Higher values increase image quality and file size.
hcti:identify_as_hctiBooleanAdd X-HCTI-SCREENSHOT: 1 to the top-level request when screenshotting a URL.
hcti:max_wait_msIntegerSet a maximum time limit from 500 to 10000 milliseconds for waiting before taking the screenshot.
hcti:media_typeStringSet Chrome to render using screen or print CSS media styles.
hcti:ms_delayIntegerDelay before generating the image. Useful when waiting for JavaScript; start with 500 milliseconds.
hcti:render_when_readyBooleanWait to generate the image until JavaScript calls ScreenshotReady().
hcti:selectorStringCrop the image to an element matching this CSS selector, such as section#complete-toolkit.container-lg.
hcti:timezoneStringSet Chrome's timezone with an IANA identifier such as America/New_York.
hcti:transparent_backgroundBooleanSet to true to render with a transparent background.
hcti:viewport_heightIntegerSet the height of Chrome's viewport. Both dimensions must be set when using either.
hcti:viewport_landscapeBooleanSet Chrome's viewport to landscape mode.
hcti:viewport_mobileBooleanSet Chrome's viewport to emulate a mobile device.
hcti:viewport_touchBooleanSet Chrome's viewport to support touch events.
hcti:viewport_widthIntegerSet 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.