defineOgImageComponent()

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

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!' },
  { 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.

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

Each item in the array takes OgImageOptions like key, width, and height. Component props go in its props key.

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

See the WhatsApp guide for more details.