WhatsApp & Multiple Images
Different social platforms have different requirements for OG images:
| Platform | Recommended Size | Aspect Ratio |
|---|---|---|
| Twitter/X | 1200x600 | 2:1 |
| 1200x630 | 1.91:1 | |
| 1200x627 | 1.91:1 | |
| 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 an array to defineOgImage or defineOgImageComponent to generate multiple images:
<script lang="ts" setup>
defineOgImageComponent('NuxtSeo', [
// Default landscape for Twitter/Facebook
{ title: 'My Page' },
// Square for WhatsApp
{ title: 'My Page', 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 are generated:
| 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>
defineOgImageComponent('NuxtSeo', [
// Primary image for og:image and twitter:image (1200x600)
{ title: 'My Page' },
// Additional square image for WhatsApp (800x800)
{
title: 'My Page',
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>
defineOgImageComponent('NuxtSeo', [
// og:image only (no twitter:image)
{ title: 'OG Only', key: 'og-only' },
// twitter:image only
{ title: 'Twitter Card', key: 'twitter' },
])
</script>
Accessing Image URLs
Both composables return an array of generated URLs:
<script lang="ts" setup>
const urls = defineOgImageComponent('NuxtSeo', [
{ title: 'Default' },
{ title: 'Square', key: 'square', width: 450, height: 450 },
])
// urls = [
// '/_og/s/title_Default,p_...',
// '/_og/s/k_square,w_450,h_450,title_Square,p_...'
// ]
</script>
This is useful for sitemaps or external integrations where you need the direct image URLs.
With defineOgImage
You can also use the lower-level defineOgImage composable:
<script lang="ts" setup>
defineOgImage([
{
component: 'NuxtSeo',
props: { title: 'My Page' },
},
{
component: 'NuxtSeo',
props: { title: 'My Page' },
key: 'whatsapp',
width: 800,
height: 800,
},
])
</script>
Component Variants
You can use different components for different platforms:
<script lang="ts" setup>
defineOgImage([
{
component: 'OgImageLandscape',
props: { title: 'My Page' },
},
{
component: 'OgImageSquare',
props: { title: 'My Page' },
key: 'whatsapp',
width: 800,
height: 800,
},
])
</script>