---
title: "Nuxt OG Image"
description: "Generate OG Images with Vue templates in Nuxt."
canonical_url: "https://nuxtseo.com/docs/og-image/getting-started/introduction"
last_updated: "2026-05-06T15:06:54.304Z"
---

<callout icon="i-heroicons-arrow-up-circle" color="blue">

**v6 is here.** See the [migration guide](/docs/og-image/migration-guide/v6) for upgrade instructions from v5.

</callout>

## Why use Nuxt OG Image?

Nuxt OG Image generates social media preview images (og:image) using Vue templates. It renders images at build time or on-demand using [Takumi](/docs/og-image/renderers/takumi) (recommended), [Satori](/docs/og-image/renderers/satori), or [Browser](/docs/og-image/renderers/browser).

When you share a link of your site on social media or some chat platforms, the link will be [unfurled](https://medium.com/slack-developer-blog/everything-you-ever-wanted-to-know-about-unfurling-but-were-afraid-to-ask-or-how-to-make-your-e64b4bb9254),
displaying a title, description, and an image. All of these are powered by the [Open Graph Protocol](https://ogp.me/).

New to Open Graph? Check out the [Mastering Open Graph Tags](/learn-seo/nuxt/mastering-meta/social-sharing) guide to learn more.

For example, check the `og:image` meta tag in the page source to see the OG image for the current page.

While it may not help with your organic traffic, it can significantly improve the click-through rate of your pages when shared.

While it's simple to create your own OG images, it can be time-consuming to keep them up-to-date with your site's content and easy to misconfigure
the meta tags for each platform.

Ready to get started? Check out the [installation guide](/docs/og-image/getting-started/installation).

## Features

- ✨ Create an og:image using the built-in templates or make your own with Vue components
- 🎨 Design and test your og:image in the Nuxt DevTools OG Image Playground with full HMR
- 🚀 Render using [Takumi](https://github.com/kane50613/takumi) (recommended): 2-10x faster with complete CSS support
- ▲ Or use [Satori](https://github.com/vercel/satori): The original renderer, good CSS support
- 🤖 Or prerender using the Browser: Full CSS support for complex templates
- 🎨 [Tailwind CSS](https://tailwindcss.com), custom fonts, emoji support across all renderers
- 📸 Feeling lazy? generate screenshots for every page: hide elements, wait for animations, and more
- ⚙️ Works on the edge: Vercel Edge, Netlify Edge and Cloudflare Workers

<callout icon="i-heroicons-share" to="/tools/social-share-debugger">

**Preview your OG images** - Use our free [Social Share Debugger](/tools/social-share-debugger) to see how your links appear on Twitter, Facebook, LinkedIn, and more.

</callout>