Tutorial: Your first OG Image · Nuxt OG Image · Nuxt SEO

[NuxtSEO](https://nuxtseo.com/ "Home")

- [Modules](https://nuxtseo.com/docs/nuxt-seo/getting-started/introduction)
- [Tools](https://nuxtseo.com/tools)
- [Pro](https://nuxtseo.com/pro)
- [Learn SEO](https://nuxtseo.com/learn-seo/nuxt) [Releases](https://nuxtseo.com/releases)

[1.4K](https://github.com/harlan-zw/nuxt-seo)

[Nuxt SEO on GitHub](https://github.com/harlan-zw/nuxt-seo)

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

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

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

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

OG Image

- [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)

Search…```k`` /`

v6 (latest)

- Playgrounds
- [Discord Support](https://discord.com/invite/275MBUBvgP)

### Getting Started

- [Introduction](https://nuxtseo.com/docs/og-image/getting-started/introduction)
- [Installation](https://nuxtseo.com/docs/og-image/getting-started/installation)
- [Troubleshooting](https://nuxtseo.com/docs/og-image/getting-started/troubleshooting)
- [Tutorial: Your first OG Image](https://nuxtseo.com/docs/og-image/getting-started/getting-familiar-with-nuxt-og-image)

### Core Concepts

- [Zero Runtime](https://nuxtseo.com/docs/og-image/guides/zero-runtime)
- [WhatsApp & Multiple Images](https://nuxtseo.com/docs/og-image/guides/whatsapp)
- [Performance](https://nuxtseo.com/docs/og-image/guides/performance)
- [CLI](https://nuxtseo.com/docs/og-image/guides/cli)
- [Security](https://nuxtseo.com/docs/og-image/guides/security)
- [Cloudflare](https://nuxtseo.com/docs/og-image/guides/cloudflare)
- [Route Rules](https://nuxtseo.com/docs/og-image/guides/route-rules)
- [Caching Images](https://nuxtseo.com/docs/og-image/guides/cache)
- [JPEGs](https://nuxtseo.com/docs/og-image/guides/jpegs)
- [Custom Fonts](https://nuxtseo.com/docs/og-image/guides/custom-fonts)
- [Non-English Locales](https://nuxtseo.com/docs/og-image/guides/non-english-locales)
- [Emojis](https://nuxtseo.com/docs/og-image/guides/emojis)
- [Icons and Images](https://nuxtseo.com/docs/og-image/guides/icons-and-images)
- [Styling](https://nuxtseo.com/docs/og-image/guides/styling)
- [Community Templates](https://nuxtseo.com/docs/og-image/guides/community-templates)
- [Error pages](https://nuxtseo.com/docs/og-image/guides/error-pages)

### Overview

- [Overview](https://nuxtseo.com/docs/og-image/renderers)
- [Takumi Renderer](https://nuxtseo.com/docs/og-image/renderers/takumi)
- [Satori Renderer](https://nuxtseo.com/docs/og-image/renderers/satori)
- [Browser Renderer](https://nuxtseo.com/docs/og-image/renderers/browser)

### Integrations

- [Nuxt Content](https://nuxtseo.com/docs/og-image/integrations/content)
- [Nuxt Color Mode](https://nuxtseo.com/docs/og-image/integrations/color-mode)
- [Nuxt I18n](https://nuxtseo.com/docs/og-image/integrations/i18n)

Getting Started

# Tutorial: Your first OG Image

[Copy for LLMs](https://nuxtseo.com/docs/og-image/getting-started/getting-familiar-with-nuxt-og-image.md)

This is a three-part tutorial to help you get familiar with the module. It's recommended to follow this guide when you use the module for the first time.

- [Part 1: Using An OG Image](#part-1-using-an-og-image)
- [Part 2: Customising NuxtSeo Template](#part-2-customising-nuxtseo-template)
- [Part 3: Creating Your Own Template](#part-3-creating-your-own-template)

## [Part 1: Using An OG Image](#part-1-using-an-og-image)

To start with, we want to be able to see the module generating an image for us, any image, and play around with different options we can provide to change it.

**Prerequisites:**[Install the module](https://nuxtseo.com/docs/og-image/getting-started/installation) and enable [Nuxt DevTools](https://devtools.nuxt.com/).

### [1. Define an OG Image](#_1-define-an-og-image)

Firstly, we're going to use the server-only composable `defineOgImage` to define the `og:image` for our home page.

pages/index.vue

```
<script lang="ts" setup>
defineOgImage('NuxtSeo.takumi')
</script>
```

This will use the default template [NuxtSeo](https://nuxtseo.com/docs/og-image/guides/community-templates) with the [Takumi](https://nuxtseo.com/docs/og-image/renderers/takumi) renderer.

### [2. View your `og:image`](#_2-view-your-ogimage)

Visit the home page in your browser and open up the Nuxt DevTools (`Shift` + `Alt` + `D`).

Once you're in the Nuxt DevTools, you can navigate to the OG Image tab by opening the command palette (`Ctrl` + `K`) and typing `og`.

You should now see a preview of your OG Image.

![NuxtSeo Template](https://nuxtseo.com/og-image/tutorial/0-hello.png)

## [Part 2: Customising NuxtSeo Template](#part-2-customising-nuxtseo-template)

Now that we can see our OG Image, we're going to customize it by modifying the props we pass to the `defineOgImage` composable.

Feel free to pass in any props you like, but for this example we're going to use the following:

pages/index.vue

```
<script lang="ts" setup>
defineOgImage('NuxtSeo.takumi', {
  title: 'Hello OG Image',
  description: 'Look at me in dark mode',
  colorMode: 'dark',
})
</script>
```

The playground has full HMR, so you should see the updated image immediately.

![NuxtSeo Template](https://nuxtseo.com/og-image/tutorial/1-customize.png)

Congrats, you've set up and customized your first `og:image`!

Going further, we can even try using one of the other community templates available. For the full list, check out the `Community` tab within Nuxt DevTools.

Community templates are for development only. Before deploying, eject them with `npx nuxt-og-image eject<template>` or create your own.

pages/index.vue

```
<script lang="ts" setup>
defineOgImage('NuxtSeo.takumi', {
  title: 'Hello OG Image',
  description: 'Look at me using the NuxtSeo template',
  isPro: true,
})
</script>
```

![NuxtSeo Template](https://nuxtseo.com/og-image/tutorial/2-alt-template.png)

You can see all the supported props on the [NuxtSeo Template](https://nuxtseo.com/docs/og-image/guides/community-templates) documentation. It's also worth checking out the [defineOgImage API](https://nuxtseo.com/docs/og-image/api/define-og-image).

## [Part 3: Creating Your Own Template](#part-3-creating-your-own-template)

Using the community templates is a fun way to experiment with the OG Image template you want to use. However, they will always be limited in what you can do with them.

For production builds, you **must** eject any community template you're using. The easiest way is with the CLI:

```
npx nuxt-og-image eject SimpleBlog
```

Or copy and paste the template manually from the `Community` tab in Nuxt DevTools or [GitHub](https://github.com/nuxt-modules/og-image/tree/main/src/runtime/app/components/Templates/Community).

### [1. Create your template component](#_1-create-your-template-component)

We're going to start with the [SimpleBlog](https://github.com/nuxt-modules/og-image/blob/main/src/runtime/app/components/Templates/Community/SimpleBlog.satori.vue) template as a quick way to get started.

Let's copy this template into our project at `./components/OgImage/BlogPost.takumi.vue` and remove some of the boilerplate.

The module automatically registers any components you add to an OgImage folder as templates. The `.takumi` suffix tells the module which renderer to use - [Takumi](https://nuxtseo.com/docs/og-image/renderers/takumi) is the recommended renderer.

components/OgImage/BlogPost.takumi.vue

```
<script setup lang="ts">
const { title = 'title' } = defineProps<{
  title?: string
}>()
</script>

<template>
  <div class="h-full w-full flex items-start justify-start border-solid border-blue-500 border-[12px] bg-gray-50">
    <div class="flex items-start justify-start h-full">
      <div class="flex flex-col justify-between w-full h-full">
        <h1 class="text-[80px] p-20 font-black text-left">
          {{ title }}
        </h1>
        <p class="text-2xl pb-10 px-20 font-bold mb-0">
          mycoolsite.com
        </p>
      </div>
    </div>
  </div>
</template>
```

### [2. Use the new template](#_2-use-the-new-template)

Now that you have your template, you can use it for your home page.

pages/index.vue

```
<script lang="ts" setup>
defineOgImage('BlogPost.takumi', {
  title: 'Is this thing on?'
})
</script>
```

Check your Nuxt DevTools to see the new template in action.

You may notice that the Tailwind classes work, even if you're not using the Tailwind module.

Tailwind v4, [UnoCSS](https://unocss.dev), CSS variables, and Nuxt UI v3 colors are all supported by default. You can learn more in the [Styling](https://nuxtseo.com/docs/og-image/guides/styling) guide.

**The module processes CSS classes at build time.** Dynamic class names like `:class="[\`border-${color}\`]"` won't work because the generated class isn't in the stylesheet. Use static classes for Tailwind/UnoCSS, and `:style` bindings for dynamic values.

### [3. Customize your template](#_3-customize-your-template)

Now that you have your template, you can start customizing it.

Any props you pass to the `defineOgImage` composable will be available in the component.

With this in mind, let's add a new prop to change the border color: `borderColor`.

It's recommended to always provide default values for your props. This allows you to preview the template when you're not passing any props.

Since the module processes CSS classes at build time, we use a `:style` binding for the dynamic border color instead of a dynamic class name.

components/OgImage/BlogPost.takumi.vue

```
<script setup lang="ts">
const { title = 'title', borderColor = '#3b82f6' } = defineProps<{
  title?: string
  borderColor?: string
}>()
</script>

<template>
  <div :style="{ borderColor }" class="h-full w-full flex items-start justify-start border-solid border-[12px] bg-gray-50">
    <div class="flex items-start justify-start h-full">
      <div class="flex flex-col justify-between w-full h-full">
        <h1 class="text-[80px] p-20 font-black text-left">
          {{ title }}
        </h1>
        <p class="text-2xl pb-10 px-20 font-bold mb-0">
          mycoolsite.com
        </p>
      </div>
    </div>
  </div>
</template>
```

Now let's customize the border to be a light green instead.

pages/index.vue

```
<script lang="ts" setup>
defineOgImage('BlogPost.takumi', {
  title: 'Is this thing on?',
  borderColor: '#86efac',
})
</script>
```

Within the playground, you should now see the border color change to green.

[](https://nuxtseo.com/tools/social-share-debugger)**Test your OG images** - See how your images appear on social platforms with our [Social Share Debugger](https://nuxtseo.com/tools/social-share-debugger).

## [Conclusion](#conclusion)

Thanks for following along. You now have a basic understanding of how to use the module.

It's recommended to look through the rest of the documentation to get a full understanding of what's possible.

If you have any questions, on [Discord](https://discord.gg/275MBUBvgP) or [GitHub](https://github.com/nuxt-modules/og-image).

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

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

Did this page help you?

[Troubleshooting Create minimal reproductions for Nuxt OG Image or just experiment with the module.](https://nuxtseo.com/docs/og-image/getting-started/troubleshooting) [Overview Choose the right renderer for your OG images.](https://nuxtseo.com/docs/og-image/renderers)

On this page

- [Part 1: Using An OG Image](#part-1-using-an-og-image)
- [Part 2: Customising NuxtSeo Template](#part-2-customising-nuxtseo-template)
- [Part 3: Creating Your Own Template](#part-3-creating-your-own-template)
- [Conclusion](#conclusion)

[GitHub](https://github.com/harlan-zw/nuxt-seo) [ Discord](https://discord.com/invite/275MBUBvgP)

### [NuxtSEO](https://nuxtseo.com/ "Home")

- [Getting Started](https://nuxtseo.com/docs/nuxt-seo/getting-started/introduction)
- [MCP](https://nuxtseo.com/docs/nuxt-seo/guides/mcp)

Modules

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

### [NuxtSEO Pro](https://nuxtseo.com/pro "Home")

- [Getting Started](https://nuxtseo.com/pro)
- [Dashboard](https://nuxtseo.com/pro/dashboard)
- [Pro MCP](https://nuxtseo.com/docs/nuxt-seo-pro/mcp/installation)

### [Learn SEO](https://nuxtseo.com/learn-seo "Learn SEO")

Nuxt

- [Mastering Meta](https://nuxtseo.com/learn-seo/nuxt/mastering-meta)
- [Controlling Crawlers](https://nuxtseo.com/learn-seo/nuxt/controlling-crawlers)
- [Launch & Listen](https://nuxtseo.com/learn-seo/nuxt/launch-and-listen)
- [Routes & Rendering](https://nuxtseo.com/learn-seo/nuxt/routes-and-rendering)
- [Staying Secure](https://nuxtseo.com/learn-seo/nuxt/routes-and-rendering/security)

Vue

- [Vue SEO Guide](https://nuxtseo.com/learn-seo/vue)
- [Mastering Meta](https://nuxtseo.com/learn-seo/vue/mastering-meta)
- [Controlling Crawlers](https://nuxtseo.com/learn-seo/vue/controlling-crawlers)
- [SPA SEO](https://nuxtseo.com/learn-seo/vue/spa)
- [SSR Frameworks](https://nuxtseo.com/learn-seo/vue/ssr-frameworks)
- [SEO Checklist](https://nuxtseo.com/learn-seo/checklist)
- [Pre-Launch Warmup](https://nuxtseo.com/learn-seo/pre-launch-warmup)
- [Backlinks & Authority](https://nuxtseo.com/learn-seo/backlinks)

### [Tools](https://nuxtseo.com/tools "SEO Tools")

- [Social Share Debugger](https://nuxtseo.com/tools/social-share-debugger)
- [Robots.txt Generator](https://nuxtseo.com/tools/robots-txt-generator)
- [Meta Tag Checker](https://nuxtseo.com/tools/meta-tag-checker)
- [HTML to Markdown](https://nuxtseo.com/tools/html-to-markdown)
- [XML Sitemap Validator](https://nuxtseo.com/tools/xml-sitemap-validator)
- [Schema.org Validator](https://nuxtseo.com/tools/schema-validator)
- [Keyword Research Pro](https://nuxtseo.com/tools/keyword-research)
- [SERP Analyzer Pro](https://nuxtseo.com/tools/serp-analyzer)
- [Domain Rankings Pro](https://nuxtseo.com/tools/domain-rankings)

Copyright © 2023-2026 Harlan Wilton - [MIT License](https://github.com/harlan-zw/nuxt-seo/blob/main/license) · [mdream](https://mdream.dev)