---
title: "defineOgImageScreenshot() · Nuxt OG Image · Nuxt SEO"
canonical_url: "https://nuxtseo.com/docs/og-image/v5/api/define-og-image-screenshot"
last_updated: "2026-08-16T10:00:26.563Z"
meta:
  description: "Define an OG Image that takes a screenshot of the page."
  "og:description": "Define an OG Image that takes a screenshot of the page."
  "og:title": "defineOgImageScreenshot() · Nuxt OG Image · Nuxt SEO"
---

Nuxt SEO on GitHub

You're viewing **OG Image v5** documentation. For the latest, [~~switch to v6~~](https://nuxtseo.com/docs/og-image/getting-started/introduction).

](https://nuxtseo.com/docs/og-image/v5/getting-started/introduction)

](https://nuxtseo.com/docs/og-image/v5/api/define-og-image)

](https://nuxtseo.com/docs/og-image/v5/releases/v5)

Switch to OG Image](https://nuxtseo.com/docs/og-image/getting-started/introduction)Switch to Nuxt SEO](https://nuxtseo.com/docs/nuxt-seo/getting-started/introduction)Switch to Robots](https://nuxtseo.com/docs/robots/getting-started/introduction)Switch to Sitemap](https://nuxtseo.com/docs/sitemap/getting-started/introduction)Switch to Schema.org](https://nuxtseo.com/docs/schema-org/getting-started/introduction)Switch to Link Checker](https://nuxtseo.com/docs/link-checker/getting-started/introduction)Switch to SEO Utils](https://nuxtseo.com/docs/seo-utils/getting-started/introduction)Switch to Site Config](https://nuxtseo.com/docs/site-config/getting-started/introduction)Switch to Skew Protection](https://nuxtseo.com/docs/skew-protection/getting-started/introduction)Switch to AI Ready](https://nuxtseo.com/docs/ai-ready/getting-started/introduction)

**Nuxt API**

# **defineOgImageScreenshot()**

## 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 [**~~chromium~~**](https://nuxtseo.com/docs/og-image/guides/chromium) guide for more information.

## Props

### `**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 that should be removed 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'
})
```

**Was this page helpful?**

[**defineOgImageComponent()** Define an og:image for the current page with type safety.](https://nuxtseo.com/docs/og-image/v5/api/define-og-image-component) [**Components** Components that are included with the module, including OgImage and OgImageScreenshot.](https://nuxtseo.com/docs/og-image/v5/api/components)