WhatsApp & Multiple Images · Nuxt OG Image · Nuxt SEO

[NuxtSEO](https://nuxtseo.com/ "Home")

- [Modules](https://nuxtseo.com/docs/nuxt-seo/getting-started/introduction)
- [Tools](https://nuxtseo.com/tools)
- [Pro](https://nuxtseo.com/pro)
- [Learn SEO](https://nuxtseo.com/learn-seo/nuxt) [Releases](https://nuxtseo.com/releases)

[1.4K](https://github.com/harlan-zw/nuxt-seo)

[Nuxt SEO on GitHub](https://github.com/harlan-zw/nuxt-seo)

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

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

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

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

OG Image

- [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)

Search…```k`` /`

v6 (latest)

- Playgrounds
- [Discord Support](https://discord.com/invite/275MBUBvgP)

### Getting Started

- [Introduction](https://nuxtseo.com/docs/og-image/getting-started/introduction)
- [Installation](https://nuxtseo.com/docs/og-image/getting-started/installation)
- [Troubleshooting](https://nuxtseo.com/docs/og-image/getting-started/troubleshooting)
- [Tutorial: Your first OG Image](https://nuxtseo.com/docs/og-image/getting-started/getting-familiar-with-nuxt-og-image)

### Core Concepts

- [Zero Runtime](https://nuxtseo.com/docs/og-image/guides/zero-runtime)
- [WhatsApp & Multiple Images](https://nuxtseo.com/docs/og-image/guides/whatsapp)
- [Performance](https://nuxtseo.com/docs/og-image/guides/performance)
- [CLI](https://nuxtseo.com/docs/og-image/guides/cli)
- [Security](https://nuxtseo.com/docs/og-image/guides/security)
- [Cloudflare](https://nuxtseo.com/docs/og-image/guides/cloudflare)
- [Route Rules](https://nuxtseo.com/docs/og-image/guides/route-rules)
- [Caching Images](https://nuxtseo.com/docs/og-image/guides/cache)
- [JPEGs](https://nuxtseo.com/docs/og-image/guides/jpegs)
- [Custom Fonts](https://nuxtseo.com/docs/og-image/guides/custom-fonts)
- [Non-English Locales](https://nuxtseo.com/docs/og-image/guides/non-english-locales)
- [Emojis](https://nuxtseo.com/docs/og-image/guides/emojis)
- [Icons and Images](https://nuxtseo.com/docs/og-image/guides/icons-and-images)
- [Styling](https://nuxtseo.com/docs/og-image/guides/styling)
- [Community Templates](https://nuxtseo.com/docs/og-image/guides/community-templates)
- [Error pages](https://nuxtseo.com/docs/og-image/guides/error-pages)

### Overview

- [Overview](https://nuxtseo.com/docs/og-image/renderers)
- [Takumi Renderer](https://nuxtseo.com/docs/og-image/renderers/takumi)
- [Satori Renderer](https://nuxtseo.com/docs/og-image/renderers/satori)
- [Browser Renderer](https://nuxtseo.com/docs/og-image/renderers/browser)

### Integrations

- [Nuxt Content](https://nuxtseo.com/docs/og-image/integrations/content)
- [Nuxt Color Mode](https://nuxtseo.com/docs/og-image/integrations/color-mode)
- [Nuxt I18n](https://nuxtseo.com/docs/og-image/integrations/i18n)

Core Concepts

# WhatsApp & Multiple Images

[Copy for LLMs](https://nuxtseo.com/docs/og-image/guides/whatsapp.md)

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](#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', { 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](#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](#recommended-setup)

For optimal display across all platforms:

```
<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](#twitter-only-images)

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

```
<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](#per-variant-prop-overrides)

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

```
<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](#accessing-image-urls)

`defineOgImage` returns an array of generated URLs:

```
<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](#component-variants)

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

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

[Edit this page](https://github.com/nuxt-modules/og-image/edit/main/docs/content/3.guides/10.whatsapp.md)

[Markdown For LLMs](https://nuxtseo.com/docs/og-image/guides/whatsapp.md)

Did this page help you?

[Zero Runtime Create OG Images without the server runtime overhead.](https://nuxtseo.com/docs/og-image/guides/zero-runtime) [Performance Optimise OG image generation for fast rendering and minimal HTML overhead.](https://nuxtseo.com/docs/og-image/guides/performance)

On this page

- [Basic Usage](#basic-usage)
- [How Keys Work](#how-keys-work)
- [Recommended Setup](#recommended-setup)
- [Twitter-Only Images](#twitter-only-images)
- [Per-Variant Prop Overrides](#per-variant-prop-overrides)
- [Accessing Image URLs](#accessing-image-urls)
- [Component Variants](#component-variants)

[GitHub](https://github.com/harlan-zw/nuxt-seo) [ Discord](https://discord.com/invite/275MBUBvgP)

### [NuxtSEO](https://nuxtseo.com/ "Home")

- [Getting Started](https://nuxtseo.com/docs/nuxt-seo/getting-started/introduction)
- [MCP](https://nuxtseo.com/docs/nuxt-seo/guides/mcp)

Modules

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

### [NuxtSEO Pro](https://nuxtseo.com/pro "Home")

- [Getting Started](https://nuxtseo.com/pro)
- [Dashboard](https://nuxtseo.com/pro/dashboard)
- [Pro MCP](https://nuxtseo.com/docs/nuxt-seo-pro/mcp/installation)

### [Learn SEO](https://nuxtseo.com/learn-seo "Learn SEO")

Nuxt

- [Mastering Meta](https://nuxtseo.com/learn-seo/nuxt/mastering-meta)
- [Controlling Crawlers](https://nuxtseo.com/learn-seo/nuxt/controlling-crawlers)
- [Launch & Listen](https://nuxtseo.com/learn-seo/nuxt/launch-and-listen)
- [Routes & Rendering](https://nuxtseo.com/learn-seo/nuxt/routes-and-rendering)
- [Staying Secure](https://nuxtseo.com/learn-seo/nuxt/routes-and-rendering/security)

Vue

- [Vue SEO Guide](https://nuxtseo.com/learn-seo/vue)
- [Mastering Meta](https://nuxtseo.com/learn-seo/vue/mastering-meta)
- [Controlling Crawlers](https://nuxtseo.com/learn-seo/vue/controlling-crawlers)
- [SPA SEO](https://nuxtseo.com/learn-seo/vue/spa)
- [SSR Frameworks](https://nuxtseo.com/learn-seo/vue/ssr-frameworks)
- [SEO Checklist](https://nuxtseo.com/learn-seo/checklist)
- [Pre-Launch Warmup](https://nuxtseo.com/learn-seo/pre-launch-warmup)
- [Backlinks & Authority](https://nuxtseo.com/learn-seo/backlinks)

### [Tools](https://nuxtseo.com/tools "SEO Tools")

- [Social Share Debugger](https://nuxtseo.com/tools/social-share-debugger)
- [Robots.txt Generator](https://nuxtseo.com/tools/robots-txt-generator)
- [Meta Tag Checker](https://nuxtseo.com/tools/meta-tag-checker)
- [HTML to Markdown](https://nuxtseo.com/tools/html-to-markdown)
- [XML Sitemap Validator](https://nuxtseo.com/tools/xml-sitemap-validator)
- [Schema.org Validator](https://nuxtseo.com/tools/schema-validator)
- [Keyword Research Pro](https://nuxtseo.com/tools/keyword-research)
- [SERP Analyzer Pro](https://nuxtseo.com/tools/serp-analyzer)
- [Domain Rankings Pro](https://nuxtseo.com/tools/domain-rankings)

Copyright © 2023-2026 Harlan Wilton - [MIT License](https://github.com/harlan-zw/nuxt-seo/blob/main/license) · [mdream](https://mdream.dev)