---
title: "Nuxt Content"
description: "How to use the Nuxt OG Image module with Nuxt Content."
canonical_url: "https://nuxtseo.com/docs/og-image/integrations/content"
last_updated: "2026-05-12T18:20:29.548Z"
---

## Introduction

Nuxt OG Image integrates with Nuxt Content by default, supporting a `ogImage` frontmatter key for configuring your OG Image.

You can see a demo of this integration in the [Nuxt OG Image & Nuxt Content Playground](https://stackblitz.com/edit/github-hgunsf?file=package.json).

## Setup Nuxt Content v3

Add `defineOgImageSchema()` to your collection's schema to enable the `ogImage` frontmatter key.

```ts [content.config.ts]
import { defineCollection, defineContentConfig } from '@nuxt/content'
import { defineOgImageSchema } from 'nuxt-og-image/content'
import { z } from 'zod'

export default defineContentConfig({
  collections: {
    content: defineCollection({
      type: 'page',
      source: '**/*.md',
      schema: z.object({
        ogImage: defineOgImageSchema(),
      }),
    }),
  },
})
```

To ensure the tags gets rendered you need to ensure you're using the `defineOgImage()` composable with the `ogImage` key.

```vue [[...slug].vue]
<script setup lang="ts">
import { queryCollection, useRoute } from '#imports'

const route = useRoute()
const { data: page } = await useAsyncData(`page-${route.path}`, () => {
  return queryCollection('content').path(route.path).first()
})
if (page.value?.ogImage?.component) {
  defineOgImage(page.value.ogImage.component, page.value.ogImage.props)
}
</script>
```

<warning>

Nuxt Content v2 is no longer supported in v6. Please upgrade to [Nuxt Content v3](https://content.nuxt.com).

</warning>

## Usage

The frontmatter key supports `component`, `props`, and `url` options.
Providing `true` will use the default values, a `false` value will disable the OG Image for that page.

```md [content/blog/3-months-of-europe.md]
---
ogImage:
  component: BlogOgImage
  props:
    image: /blog/3-months-of-europe.png
    readingMins: 5
---
```

If you'd like to use OG Images from your public folder, you can use the `ogImage.url` key which will
serve your image instead of generating one.

```md [content/blog/3-months-of-europe.md]
---
ogImage:
  url: /blog/3-months-of-europe.png
---
```

### Screenshots

To use screenshots for content pages, set the component to use the browser renderer in your frontmatter:

```md [content/blog/3-months-of-europe.md]
---
ogImage:
  component: PageScreenshot
---
```