---
title: "defineOgImageScreenshot()"
description: "Define an OG Image that takes a screenshot of the page."
canonical_url: "https://nuxtseo.com/docs/og-image/api/define-og-image-screenshot"
last_updated: "2026-05-14T22:22:24.342Z"
---

## Introduction

The `defineOgImageScreenshot()` composable allows you to take a screenshot of the page and use it as the image.

This requires the `browser` renderer, check the [Browser](/docs/og-image/renderers/browser) guide for more information.

<warning>

Screenshots require the Browser renderer which is **not available on most serverless platforms** (Vercel, [Netlify](https://netlify.com), AWS Lambda) due to binary size limits. [Cloudflare Workers/Pages](/docs/og-image/renderers/browser#cloudflare-browser-rendering) are an exception via Browser Rendering bindings. Otherwise, you must either [prerender](/docs/og-image/guides/zero-runtime) your images at build time or use [Satori](/docs/og-image/renderers/satori) / [Takumi](/docs/og-image/renderers/takumi) with a custom component instead.

</warning>

## Props

### `width`

- Type: `number | (() => number) | Ref<number>`
- Default: `1200`

The width of the screenshot.

### `height`

- Type: `number | (() => number) | Ref<number>`
- Default: `600`

The height of the screenshot.

### `colorScheme`

...

- Type: `'dark' | 'light'`
- Default: `'light'`

The color scheme to use when generating the image. This is useful for generating dark mode images.

```ts
defineOgImageScreenshot({
  colorScheme: 'dark'
})
```

### `delay`

- Type: `number`
- Default: `0`

The delay to wait before taking the screenshot. This is useful if you want to wait for animations to complete.

```ts
defineOgImageScreenshot({
  // wait 2 seconds
  delay: 2000
})
```

### `mask`

- Type: `string`
- Default: `undefined`

HTML selectors the module should remove from the image. Useful for removing popup banners or other elements that may be in the way.

```ts
defineOgImageScreenshot({
  mask: '.popup-banner, .cookie-banner'
})
```

### `selector`

- Type: `string`
- Default: `undefined`

The selector to take a screenshot of. This is useful if you want to exclude header / footer elements.

```ts
defineOgImageScreenshot({
  selector: '.page-content'
})
```