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

## Introduction

Nuxt OG Image integrates with Nuxt Content out of the box, supporting a `ogImage` frontmatter key that can be used to configure 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

In Nuxt Content v3 we need to use the `asOgImageCollection()` function to augment any collections
to be able to use the `ogImage` frontmatter key.

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

export default defineContentConfig({
  collections: {
    content: defineCollection(
      asOgImageCollection({
        type: 'page',
        source: '**/*.md',
      }),
    ),
  },
})
```

To ensure the tags actually 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) {
  defineOgImage(page.value.ogImage)
}
</script>
```

## Setup Nuxt Content v2

When `strictNuxtContentPaths` has been configured, images will be automatically generated for each markdown file in your content folder.
To use `strictNuxtContentPaths` the markdown paths must match the path of the page. For example, if you have a markdown file at `content/blog/3-months-of-europe.md`, the path of the page must be `/blog/3-months-of-europe`.

Otherwise, you will need to provide the `ogImage` for each markdown file.

<code-group>

```ts [Strict Paths]
export default defineNuxtConfig({
  ogImage: {
    strictNuxtContentPaths: true
  }
})
```

```md [Path Key]
---
path: /blog/3-months-of-europe
ogImage: true
---
```

</code-group>

### Content head

The v2 Content integration works by injecting extra tags within the `content.head` property of a markdown file.

To have the OG Image work it needs to render this property, if you're not using document driven then you
will need to use the `useContentHead()` composable or the `head` property in your component.

<code-group>

```vue [useContentHead]
<script setup>
const page = await useAsyncData(`docs-${route.path}`, () => queryContent(route.path).findOne())
useContentHead(page)
</script>
```

```vue [ContentDoc]
<template>
  <ContentDoc head />
</template>
```

</code-group>

## Usage

The frontmatter key has the same options as [`defineOgImage()`](/docs/og-image/api/define-og-image-component).
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

If you'd prefer to render just screenshots, you can use the`<OgImageScreenshot />` component within your content instead of using
frontmatter.

To have this work in your markdown files, you will need to make the components global.

```ts
export default defineNuxtConfig({
  ogImage: {
    componentOptions: {
      global: true,
    }
  }
})
```

```md [content/blog/3-months-of-europe.md]
:OgImageScreenshot
```