WhatsApp & Multiple Images

Different social platforms have different requirements for OG images:

Platform	Recommended Size	Aspect Ratio
Twitter/X	1200x600	2:1
Facebook	1200x630	1.91:1
LinkedIn	1200x627	1.91:1
WhatsApp	800x800	1:1 (square)

WhatsApp displays OG images as square thumbnails, so the default landscape image gets cropped. To avoid this, you can generate multiple images with different dimensions.

Basic Usage

Pass shared props and an array of size variants to defineOgImage. The module shares props across all variants - no need to repeat them:

<script lang="ts" setup>
defineOgImage('NuxtSeo.takumi', { title: 'My Page' }, [
  // Default landscape for Twitter/Facebook
  { key: 'og' },
  // Square for WhatsApp
  { key: 'whatsapp', width: 800, height: 800 },
])
</script>

Each image gets a unique URL based on its options:

/_og/d/title_My+Page,p_... (default)
/_og/d/k_whatsapp,w_800,h_800,title_My+Page,p_...

How Keys Work

The key option determines which meta tags the module generates:

Key Value	Meta Tags Generated
`'og'` (default)	Both `og:image` and `twitter:image`
`'twitter'`	Only `twitter:image`
Any other string	Only `og:image` (additional images)

Since WhatsApp uses og:image meta tags, multiple OG images with different keys will all be available for WhatsApp to choose from. WhatsApp typically picks the first image that meets its size requirements.

Recommended Setup

For optimal display across all platforms:

<script lang="ts" setup>
defineOgImage('NuxtSeo.takumi', { title: 'My Page' }, [
  // Primary image for og:image and twitter:image (1200x600)
  { key: 'og' },
  // Additional square image for WhatsApp (800x800)
  { key: 'whatsapp', width: 800, height: 800 },
])
</script>

Twitter-Only Images

Use key: 'twitter' to generate an image that only appears in Twitter meta tags:

<script lang="ts" setup>
defineOgImage('NuxtSeo.takumi', { title: 'My Page' }, [
  // og:image only (no twitter:image)
  { key: 'og-only' },
  // twitter:image only
  { key: 'twitter' },
])
</script>

Per-Variant Prop Overrides

Shared props can be overridden per variant using the props field:

<script lang="ts" setup>
defineOgImage('NuxtSeo.takumi', { title: 'My Page', description: 'Full description here' }, [
  { key: 'og' },
  { key: 'whatsapp', width: 800, height: 800, props: { description: 'Short' } },
])
</script>

Accessing Image URLs

defineOgImage returns an array of generated URLs:

<script lang="ts" setup>
const urls = defineOgImage('NuxtSeo.takumi', { title: 'Default' }, [
  { key: 'og' },
  { key: 'square', width: 450, height: 450 },
])

// urls = [
//   '/_og/d/title_Default,p_...',
//   '/_og/d/k_square,w_450,h_450,title_Default,p_...'
// ]
</script>

Component Variants

To use a different component for another platform, call defineOgImage() once per component and give each call its own key. The first argument sets the component for every variant in that call:

<script lang="ts" setup>
defineOgImage('Landscape', { title: 'My Page' })
defineOgImage('Square', { title: 'My Page' }, { key: 'whatsapp', width: 800, height: 800 })
</script>