defineOgImageScreenshot() · Nuxt OG Image · Nuxt SEO

-
-
-
-

[1.4K](https://github.com/harlan-zw/nuxt-seo)

[Nuxt SEO on GitHub](https://github.com/harlan-zw/nuxt-seo)

You're viewing **OG Image v5** documentation. For the latest,

.

OG Image

-
-
-
-
-
-
-
-
-
-

Search…```k`` /`

v5

- Playgrounds
- [Discord Support](https://discord.com/invite/275MBUBvgP)

### Nuxt API

-
-
-
-
-
-

### Nitro API

-

Nuxt API

# defineOgImageScreenshot()

[Copy for LLMs](https://nuxtseo.com/docs/og-image/v5/api/define-og-image-screenshot.md)

## [Introduction](#introduction)

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

This requires the `chromium` renderer, check the

 guide for more information.

## [Props](#props)

### [`colorScheme`](#colorscheme)

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

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

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

### [`delay`](#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.

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

### [`mask`](#mask)

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

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

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

### [`selector`](#selector)

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

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

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

[Edit this page](https://github.com/nuxt-modules/og-image/blob/v5.1.13/docs/content/4.api/0.define-og-image-screenshot.md)

[Markdown For LLMs](https://nuxtseo.com/docs/og-image/v5/api/define-og-image-screenshot.md)

Did this page help you?

On this page

- [Introduction](#introduction)
- [Props](#props)

[GitHub](https://github.com/harlan-zw/nuxt-seo) [ Discord](https://discord.com/invite/275MBUBvgP)

###

-
-

Modules

-
-
-
-
-
-
-
-
-

###

-
-
-

###

Nuxt

-
-
-
-
-

Vue

-
-
-
-
-
-
-
-

###

-
-
-
-
-
-
-
-
-
-

Copyright © 2023-2026 Harlan Wilton - [MIT License](https://github.com/harlan-zw/nuxt-seo/blob/main/license) · [mdream](https://mdream.dev)