---
title: "defineOgImageComponent()"
description: "Define an og:image for the current page with type safety."
canonical_url: "https://nuxtseo.com/docs/og-image/v5/api/define-og-image-component"
last_updated: "2026-05-06T18:46:22.206Z"
---

## 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,
  props,
  options
)
```

- `component`: The component to render as the og:image.
- `props`: The props to pass to the component.
- `options`: The options to use when generating the image. Same as the props for [defineOgImage](/docs/og-image/api/define-og-image).

## Example

```ts
export default defineOgImageComponent(
  // component
  'MyCustomComponent',
  // props
  {
    title: 'Welcome to my site!'
  },
  // options
  {
    fonts: [
      'CustomFont:400'
    ]
  }
)
```