defineOgImageComponent() · 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

# defineOgImageComponent()

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

## [Introduction](#introduction)

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

## [Arguments](#arguments)

```
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.

## [Example](#example)

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

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

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

Did this page help you?

On this page

- [Introduction](#introduction)
- [Arguments](#arguments)
- [Example](#example)

[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)