---
title: "WhatsApp & Multiple Images"
description: "Generate multiple OG images per page for different platforms like WhatsApp."
canonical_url: "https://nuxtseo.com/docs/og-image/guides/whatsapp"
last_updated: "2026-05-06T00:50:59.436Z"
---

Different social platforms have different requirements for OG images:

<table>
<thead>
  <tr>
    <th>
      Platform
    </th>
    
    <th>
      Recommended Size
    </th>
    
    <th>
      Aspect Ratio
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      Twitter/X
    </td>
    
    <td>
      1200x600
    </td>
    
    <td>
      2:1
    </td>
  </tr>
  
  <tr>
    <td>
      Facebook
    </td>
    
    <td>
      1200x630
    </td>
    
    <td>
      1.91:1
    </td>
  </tr>
  
  <tr>
    <td>
      LinkedIn
    </td>
    
    <td>
      1200x627
    </td>
    
    <td>
      1.91:1
    </td>
  </tr>
  
  <tr>
    <td>
      WhatsApp
    </td>
    
    <td>
      800x800
    </td>
    
    <td>
      1:1 (square)
    </td>
  </tr>
</tbody>
</table>

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:

```vue
<script lang="ts" setup>
defineOgImage('NuxtSeo', { 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/s/title_My+Page,p_...` (default)
- `/_og/s/k_whatsapp,w_800,h_800,title_My+Page,p_...`

## How Keys Work

The `key` option determines which meta tags the module generates:

<table>
<thead>
  <tr>
    <th>
      Key Value
    </th>
    
    <th>
      Meta Tags Generated
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        'og'
      </code>
      
       (default)
    </td>
    
    <td>
      Both <code>
        og:image
      </code>
      
       and <code>
        twitter:image
      </code>
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        'twitter'
      </code>
    </td>
    
    <td>
      Only <code>
        twitter:image
      </code>
    </td>
  </tr>
  
  <tr>
    <td>
      Any other string
    </td>
    
    <td>
      Only <code>
        og:image
      </code>
      
       (additional images)
    </td>
  </tr>
</tbody>
</table>

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:

```vue
<script lang="ts" setup>
defineOgImage('NuxtSeo', { 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:

```vue
<script lang="ts" setup>
defineOgImage('NuxtSeo', { 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:

```vue
<script lang="ts" setup>
defineOgImage('NuxtSeo', { 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:

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

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

## Component Variants

You can use different components for different platforms using the array-only syntax:

```vue
<script lang="ts" setup>
defineOgImage('OgImageLandscape', [
  { props: { title: 'My Page' } },
  {
    component: 'OgImageSquare',
    props: { title: 'My Page' },
    key: 'whatsapp',
    width: 800,
    height: 800,
  },
])
</script>
```