---
title: "Nuxt OG Image · Nuxt SEO"
meta:
  "og:description": "Generate OG Images with Vue templates in Nuxt."
  "og:title": "Nuxt OG Image · Nuxt SEO"
  description: "Generate OG Images with Vue templates in Nuxt."
---

**Getting Started**

# **Nuxt OG Image**

Last updated **Feb 24, 2026** by [Harlan Wilton](https://github.com/harlan-zw) in [doc: v6 improvements](https://github.com/nuxt-modules/og-image/commit/e5ac5b5c66afe583c7fcb166d15c024ab148d74b).

[Copy for LLMs

**v6 is currently in beta.** Install with `nuxt-og-image@beta`. See the [**migration guide**](https://nuxtseo.com/docs/og-image/migration-guide/v6) for upgrade instructions.

## [Why use Nuxt OG Image?](#why-use-nuxt-og-image)

Nuxt OG Image generates social media preview images (og:image) using Vue templates. Images are rendered at build time or on-demand using [**Takumi**](https://nuxtseo.com/docs/og-image/renderers/takumi) (recommended), [**Satori**](https://nuxtseo.com/docs/og-image/renderers/satori), or [**Browser**](https://nuxtseo.com/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**](https://nuxtseo.com/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**](https://nuxtseo.com/docs/og-image/getting-started/installation).

## [Features](#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 comprehensive 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, custom fonts, emoji support across all renderers
- 📸 Feeling lazy? Just generate screenshots for every page: hide elements, wait for animations, and more
- ⚙️ Works on the edge: Vercel Edge, Netlify Edge and Cloudflare Workers

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

[Edit this page](https://github.com/nuxt-modules/og-image/edit/main/docs/content/0.getting-started/0.introduction.md)

[Markdown For LLMs](https://nuxtseo.com/docs/og-image/getting-started/introduction.md)

**Did this page help you? **

[**Installation** Get started with Nuxt OG Image by installing the dependency to your project.](https://nuxtseo.com/docs/og-image/getting-started/installation)

**On this page**

- [Why use Nuxt OG Image?](#why-use-nuxt-og-image)
- [Features](#features)