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.
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_...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.
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>
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>
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.
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>
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>