---
title: "Nuxt Content · Nuxt OG Image · Nuxt SEO"
meta:
  "og:description": "How to use the Nuxt OG Image module with Nuxt Content."
  "og:title": "Nuxt Content · Nuxt OG Image · Nuxt SEO"
  description: "How to use the Nuxt OG Image module with Nuxt Content."
---

**Integrations**

# **Nuxt Content**

Last updated **Jan 11, 2026** by [Harlan Wilton](https://github.com/harlan-zw) in [fix!: require explicit provider dependencies (#415) Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com>](https://github.com/nuxt-modules/og-image/pull/415).

[Copy for LLMs

## [Introduction](#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](#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.

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.

[...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](#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.

```
export default defineNuxtConfig({
  ogImage: {
    strictNuxtContentPaths: true
  }
})
```

```
---
path: /blog/3-months-of-europe
ogImage: true
---
```

### [Content head](#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.

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

```
<template>
  <ContentDoc head />
</template>
```

## [Usage](#usage)

The frontmatter key has the same options as [`defineOgImage()`](https://nuxtseo.com/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.

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.

content/blog/3-months-of-europe.md

```
---
ogImage:
  url: /blog/3-months-of-europe.png
```

### [Screenshots](#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.

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

content/blog/3-months-of-europe.md

```
:OgImageScreenshot
```

[Edit this page](https://github.com/nuxt-modules/og-image/blob/v5.1.13/docs/content/1.integrations/1.content.md)

[Markdown For LLMs](https://nuxtseo.com/docs/og-image/v5/integrations/content.md)

**Did this page help you? **

[**Tutorial: Your first OG Image** Get started with the module by setting up your first og:image on your home page.](https://nuxtseo.com/docs/og-image/v5/getting-started/getting-familar-with-nuxt-og-image) [**Nuxt Color Mode** How to use the Nuxt OG Image module with Nuxt Color Mode.](https://nuxtseo.com/docs/og-image/v5/integrations/color-mode)

**On this page**

- [Introduction](#introduction)
- [Setup Nuxt Content v3](#setup-nuxt-content-v3)
- [Setup Nuxt Content v2](#setup-nuxt-content-v2)
- [Usage](#usage)