How to Create Dynamic OG Images in Nuxt

If you're building a Nuxt app and want your content to stand out on social media, dynamic OG images are a game-changer. Instead of static, generic preview images, you can generate personalized visuals on the fly based on your page data.

Let’s walk through how to create dynamic OG images in Nuxt, step-by-step.

Enjoy!

🤔 Why dynamic OG images?

Open Graph images are what platforms like Facebook, Twitter, and LinkedIn use when someone shares your link. Instead of using the same image for every page, you can dynamically generate unique images using page-specific data—like titles, authors, or thumbnails.

Example use cases:

• Blog posts with custom titles.
• Product pages showing the actual product.
• User profiles with avatars

🟢 Creating dynamic OG Images in Nuxt

There are multiple ways how you can add dynamic OG images to your Nuxt application.

The first option is to use image generation on the fly service such as one of the below:

1. Vercel OG Image Generation
2. Satori (for generating SVGs)
3. Puppeteer (for full-page screenshots)
4. Third-party APIs like Cloudinary or BannerBear.

These solutions will help you achieve result pretty fast but there are ways in Nuxt how you can build dynamic OG images efficiently and for that, we can use nuxt-og-image module from Harlan Winton (as a part of NuxtSeo).

Using Nuxt OG Image module comes with several benefits such as:

1. Built-in image generation via Vue components
2. No third-party services like Vercel OG or Cloudinary needed
3. Works with Tailwind CSS or any styling method
4. Auto-generates OG images per route or component
5. Zero-config after setup.
6. Reusable components for OG layouts.
7. Supports dynamic props via query params.
8. Fully SSR-compatible.

To use it in Nuxt we need to install it:

pnpm install nuxt-og-image

And add it to the modules array in nuxt.config.ts file:

  modules: ['nuxt-og-image']

Now, we can start defining our OG Image elements. If we want to use one of the existing templates, we can do so like following:

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

As a result, if we share a link to our application on social media such as Twitter/X we will see following image:

In my case, one of the existing templates was enough, but you can take custom OG Image generation to the next level by creating your own Vue component template. Read more about it here.

✅ Best practices

When building dynamic OG images, make sure to follow these best practices to achieve the best results:

1. Cache your OG images if possible to reduce server load.
2. Validate your OG tags with Facebook Sharing Debugger and Twitter Card Validator.
3. Make sure your dynamic endpoint is fast, since social platforms often have short timeouts when fetching OG images.
4. Optimize fonts and assets used in your OG components for performance.
5. Combine with Nuxt’s runtime config for dynamic base URLs across environments.

📖 Learn more

If you would like to learn more about Vue, Nuxt, JavaScript or other useful technologies, checkout VueSchool by clicking this link or by clicking the image below:

It covers most important concepts while building modern Vue or Nuxt applications that can help you in your daily work or side projects 😉

✅ Summary

With dynamic OG images, your Nuxt site instantly becomes more shareable and professional. Whether it's personalized blog covers, product previews, or user profiles, dynamic visuals give your links an edge on social platforms.

Take care and see you next time!

And happy coding as always 🖥️

Comments

[WILD.CODES]

nice!