---
title: "defineOgImageComponent()"
description: "Define an og:image for the current page with type safety."
canonical_url: "https://nuxtseo.com/docs/og-image/api/define-og-image-component"
last_updated: "2026-05-25T01:33:10.320Z"
---

<callout icon="i-heroicons-exclamation-triangle" type="warning">

**Deprecated in v6.** Use [`defineOgImage()`](/docs/og-image/api/define-og-image) instead with the component name as the first argument.

```ts
// Before
defineOgImageComponent('NuxtSeo', { title: 'Hello' })
// After
defineOgImage('NuxtSeo', { title: 'Hello' })
```

Run `npx nuxt-og-image migrate v6` to auto-migrate.

</callout>

## Introduction

The `defineOgImageComponent()` composable allows you to define an og:image using a custom template for the current page
with improved type safety.

## Arguments

```ts
defineOgImageComponent(
  component,
  propsOrOptions,
  options
)
```

- `component`: The component to render as the og:image.
- `propsOrOptions`: Props for the component, or an array of options for multiple images.
- `options`: Options for generating the image (only when `propsOrOptions` is not an array). Same as [defineOgImage](/docs/og-image/api/define-og-image).

Returns an array of generated image URLs.

## Single Image

```ts
defineOgImageComponent(
  'MyCustomComponent',
  { title: 'Welcome to my site!' },
  { cacheMaxAgeSeconds: 3600 }
)
```

## Multiple Images

Pass an array as the second argument to generate multiple OG images with different dimensions. This is useful for platforms like WhatsApp that require square images.

```ts
defineOgImageComponent('NuxtSeo', [
  // Default 1200x600 for Twitter/Facebook
  { title: 'My Page' },
  // Square 800x800 for WhatsApp
  { title: 'My Page', key: 'whatsapp', width: 800, height: 800 },
])
```

Each item in the array can include all component props plus [OgImageOptions](/docs/og-image/api/define-og-image) like `key`, `width`, `height`, etc.

```ts
const urls = defineOgImageComponent('NuxtSeo', [
  { title: 'Default' },
  { title: 'Square', key: 'square', width: 450, height: 450 },
])
// urls = [
//   '/_og/s/title_Default,p_...',
//   '/_og/s/k_square,w_450,h_450,title_Square,p_...'
// ]
```

See the [WhatsApp guide](/docs/og-image/guides/whatsapp) for more details.