---
title: "Tutorial: Your first OG Image"
description: "Get started with the module by setting up your first og:image on your home page."
canonical_url: "https://nuxtseo.com/docs/og-image/getting-started/getting-familiar-with-nuxt-og-image"
last_updated: "2026-05-05T22:34:41.498Z"
---

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

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.

<note icon="i-heroicons-check-circle">

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

</note>

### 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.

```vue [pages/index.vue]
<script lang="ts" setup>
defineOgImage('NuxtSeo.takumi')
</script>
```

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

### 2. View your `og:image`

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.

<div className="px-10">

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

</div>

## 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:

```vue [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.

<div className="px-10">

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

</div>

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.

<callout icon="i-heroicons-light-bulb">

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

</callout>

```vue [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>
```

<div className="px-10">

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

</div>

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

## 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:

```bash
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

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](/docs/og-image/renderers/takumi) is the recommended renderer.

```vue [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

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

```vue [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](/docs/og-image/guides/styling) guide.

<warning icon="i-heroicons-exclamation-triangle">

**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.

</warning>

### 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.

```vue [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.

```vue [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.

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

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

</callout>

## 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).