How to Create Dynamic OG Images in Nuxt

I’ve been exploring how to make my Nuxt app stand out on social media, and dynamic OG images have been a game-changer. They let you create personalized visuals for each page, making your links pop.

Let’s dive into how to set this up in Nuxt!

Why Dynamic OG Images Matter

Static images are boring. Dynamic OG images use page data—like titles or thumbnails—to create unique previews for platforms like Twitter or LinkedIn.

Use cases:

• Blog posts with custom titles
• Product pages with actual products
• User profiles with avatars

My Setup Process

1. Exploring Options

You can use services like Vercel OG, Satori, or Puppeteer for quick results, but I wanted a more integrated solution.

2. Using Nuxt OG Image Module

I went with the nuxt-og-image module by Harlan Winton. It’s awesome because:

• Generates images via Vue components
• No third-party services needed
• Works with Tailwind CSS
• Auto-generates images per route
• Fully SSR-compatible

Installation:

pnpm install nuxt-og-image

Add to nuxt.config.ts:

modules: ['nuxt-og-image']

Usage example:

<script setup lang="ts">
defineOgImageComponent('Nuxt', {
  title: 'Nuxt Commerce',
  description: 'A high-performance, server-rendered E-commerce app built with Nuxt & Shopify',
  theme: '#4ADE80',
  colorMode: 'dark',
})
</script>

This creates a custom OG image for social sharing!

Tips for Success

• Cache images to reduce server load.
• Validate tags with Facebook Sharing Debugger.
• Keep endpoints fast—social platforms have short timeouts.
• Optimize fonts and assets for performance.

Final Thoughts

Dynamic OG images make your Nuxt app more shareable and professional. They’re perfect for personalized blog covers or product previews, giving your links an edge on social platforms.

Happy coding!

— Dmytro