defineOgImageComponent()

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

Introduction

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

Arguments

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.

Returns an array of generated image URLs.

Single Image

defineOgImageComponent(
  'MyCustomComponent',
  { title: 'Welcome to my site!' },
  { fonts: ['CustomFont:400'] }
)

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.

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 like key, width, height, etc.

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 for more details.