---
title: "WhatsApp & Multiple Images · Nuxt OG Image · Nuxt SEO"
canonical_url: "https://nuxtseo.com/docs/og-image/guides/whatsapp"
last_updated: "2026-08-15T08:15:24.816Z"
meta:
  description: "Generate multiple OG images per page for different platforms like WhatsApp."
  "og:description": "Generate multiple OG images per page for different platforms like WhatsApp."
  "og:title": "WhatsApp & Multiple Images · Nuxt OG Image · Nuxt SEO"
---

Nuxt SEO on GitHub

**OG Image v6** is here. Looking for an older version? [~~View v5 docs ~~](https://nuxtseo.com/docs/og-image/v5/getting-started/introduction).

](https://nuxtseo.com/docs/og-image/getting-started/introduction)

](https://nuxtseo.com/docs/og-image/api/define-og-image)

](https://nuxtseo.com/docs/og-image/releases/v6)

Switch to OG Image](https://nuxtseo.com/docs/og-image/getting-started/introduction)Switch to Nuxt SEO](https://nuxtseo.com/docs/nuxt-seo/getting-started/introduction)Switch to Robots](https://nuxtseo.com/docs/robots/getting-started/introduction)Switch to Sitemap](https://nuxtseo.com/docs/sitemap/getting-started/introduction)Switch to Schema.org](https://nuxtseo.com/docs/schema-org/getting-started/introduction)Switch to Link Checker](https://nuxtseo.com/docs/link-checker/getting-started/introduction)Switch to SEO Utils](https://nuxtseo.com/docs/seo-utils/getting-started/introduction)Switch to Site Config](https://nuxtseo.com/docs/site-config/getting-started/introduction)Switch to Skew Protection](https://nuxtseo.com/docs/skew-protection/getting-started/introduction)Switch to AI Ready](https://nuxtseo.com/docs/ai-ready/getting-started/introduction)

**Core Concepts**

# **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:

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

| **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:

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

**Was this page helpful?**

### **Related **

[**defineOgImage()**](https://nuxtseo.com/docs/og-image/api/define-og-image)

[**Embedding OG Images**](https://nuxtseo.com/docs/og-image/guides/resolve-og-images)

[**Performance**](https://nuxtseo.com/docs/og-image/guides/performance)

[**Error Pages** How to display OG images for error pages.](https://nuxtseo.com/docs/og-image/guides/error-pages) [**Performance** Optimize OG image generation for fast rendering and minimal HTML overhead.](https://nuxtseo.com/docs/og-image/guides/performance)