---
title: "defineOgImageComponent() · Nuxt OG Image · Nuxt SEO"
canonical_url: "https://nuxtseo.com/docs/og-image/v5/api/define-og-image-component"
last_updated: "2026-08-16T10:00:26.556Z"
meta:
  description: "Define an og:image for the current page with type safety."
  "og:description": "Define an og:image for the current page with type safety."
  "og:title": "defineOgImageComponent() · 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**

# **defineOgImageComponent()**

## 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~~**](https://nuxtseo.com/docs/og-image/api/define-og-image).

## Example

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

**Was this page helpful?**

[**defineOgImage()** Define an og:image for the current page.](https://nuxtseo.com/docs/og-image/v5/api/define-og-image) [**defineOgImageScreenshot()** Define an OG Image that takes a screenshot of the page.](https://nuxtseo.com/docs/og-image/v5/api/define-og-image-screenshot)