---
title: "Install Nuxt OG Image · Nuxt OG Image · Nuxt SEO"
canonical_url: "https://nuxtseo.com/docs/og-image/getting-started/installation"
last_updated: "2026-08-17T17:20:41.798Z"
meta:
  description: "Get started with Nuxt OG Image by installing the dependency to your project."
  "og:description": "Get started with Nuxt OG Image by installing the dependency to your project."
  "og:title": "Install Nuxt OG Image · Nuxt OG Image · Nuxt SEO"
---

Nuxt SEO on GitHub

**OG Image v6** is here. Looking for an older version? [~~View v5 docs ~~](https://nuxtseo.com/docs/og-image/v5/getting-started/introduction).

](https://nuxtseo.com/docs/og-image/getting-started/introduction)

](https://nuxtseo.com/docs/og-image/api/define-og-image)

](https://nuxtseo.com/docs/og-image/releases/v6)

Switch to OG Image](https://nuxtseo.com/docs/og-image/getting-started/introduction)Switch to Nuxt SEO](https://nuxtseo.com/docs/nuxt-seo/getting-started/introduction)Switch to Robots](https://nuxtseo.com/docs/robots/getting-started/introduction)Switch to Sitemap](https://nuxtseo.com/docs/sitemap/getting-started/introduction)Switch to Schema.org](https://nuxtseo.com/docs/schema-org/getting-started/introduction)Switch to Link Checker](https://nuxtseo.com/docs/link-checker/getting-started/introduction)Switch to SEO Utils](https://nuxtseo.com/docs/seo-utils/getting-started/introduction)Switch to Site Config](https://nuxtseo.com/docs/site-config/getting-started/introduction)Switch to Skew Protection](https://nuxtseo.com/docs/skew-protection/getting-started/introduction)Switch to AI Ready](https://nuxtseo.com/docs/ai-ready/getting-started/introduction)

**Getting Started**

# **Install Nuxt OG Image**

## Setup Module

Want to know why you might need this module? Check out the [**~~introduction~~**](https://nuxtseo.com/docs/og-image/getting-started/introduction).

To get started with Nuxt OG Image, you need to install the dependency and add it to your Nuxt config.

Already using `**@nuxtjs/seo**`? Do not install this again unless you want to manage the OG Image module separately. `**@nuxtjs/seo**` includes `**nuxt-og-image**`.

`npx nuxt module add nuxt-og-image`

Generate an Agent Skill for this package using [**~~skilld~~**](https://github.com/harlan-zw/skilld):

```bash
npx skilld add nuxt-og-image
```

The module bundles Inter (400 and 700) by default. For custom fonts, see the [**~~Custom Fonts~~**](https://nuxtseo.com/docs/og-image/guides/custom-fonts) guide.

## Verifying Installation

Out-of-the-box the module will not do anything until you configure it.

Verify the module installation by checking the [**~~Nuxt DevTools~~**](https://devtools.nuxt.com/) for the OG Image tab.

The DevTools is the starting point, providing a playground to design and test your OG Image with full HMR support.

## Configuration

OG Images must be served with absolute URLs. If you're prerendering, you will need to provide a Site URL.

[Site Config Quick Setup](https://nuxtseo.com/docs/site-config/getting-started/introduction)

```
export default defineNuxtConfig({
  site: {
    url: 'https://example.com',
    name: 'My Awesome Website'
  },
})
```

For more advanced configurations, check out the [~~site config guide ~~](https://nuxtseo.com/docs/site-config/guides/setting-site-config).

## Install a Renderer

Use the CLI to install renderer dependencies:

```bash
# Takumi (recommended) - 2-10x faster with full CSS support
npx nuxt-og-image enable takumi

# Satori - SVG-based renderer
npx nuxt-og-image enable satori

# Browser - full CSS via screenshots (prerender only)
npx nuxt-og-image enable browser
```

For edge runtimes (Cloudflare, Vercel Edge), the CLI auto-detects your deployment target and installs Wasm variants. You can also pass `**--edge**` explicitly.

Running `**nuxi dev**` will prompt you to install missing dependencies automatically.

All renderers support [**~~Tailwind CSS~~**](https://tailwindcss.com), [**~~UnoCSS~~**](https://unocss.dev), CSS variables, Nuxt UI v3 colors, custom fonts, emoji, and edge runtimes. See the [**~~Renderers~~**](https://nuxtseo.com/docs/og-image/renderers) overview for details.

## Next Steps

You've successfully installed Nuxt OG Image. Here's the recommended reading path:

1. **[**~~Getting Familiar with Nuxt OG Image~~**](https://nuxtseo.com/docs/og-image/getting-started/getting-familiar-with-nuxt-og-image)** - Walk through building your first OG image template
2. **[**~~CLI~~**](https://nuxtseo.com/docs/og-image/guides/cli)** - Scaffold a starter component with `**npx nuxt-og-image create**`, auto-detecting your CSS framework and renderer
3. **[**~~Renderers~~**](https://nuxtseo.com/docs/og-image/renderers)** - Compare Takumi, Satori, and Browser

**Was this page helpful?**

### **Related **

[**Tutorial: Your first OG Image**](https://nuxtseo.com/docs/og-image/getting-started/getting-familiar-with-nuxt-og-image)

[**Renderers**](https://nuxtseo.com/docs/og-image/renderers)

[**Install Nuxt Site Config**](https://nuxtseo.com/docs/site-config/getting-started/installation)

[**Introduction** Generate OG Images with Vue templates in Nuxt.](https://nuxtseo.com/docs/og-image/getting-started/introduction) [**Troubleshooting** Debug common Nuxt OG Image issues, from missing text on Cloudflare Workers to StackBlitz reproduction limitations.](https://nuxtseo.com/docs/og-image/getting-started/troubleshooting)