---
title: "Nuxt Content · Nuxt OG Image · Nuxt SEO"
canonical_url: "https://nuxtseo.com/docs/og-image/v5/integrations/content"
last_updated: "2026-08-16T10:00:31.933Z"
meta:
  description: "How to use the Nuxt OG Image module with Nuxt Content."
  "og:description": "How to use the Nuxt OG Image module with Nuxt Content."
  "og:title": "Nuxt Content · Nuxt OG Image · Nuxt SEO"
---

Nuxt SEO on GitHub

You're viewing **OG Image v5** documentation. For the latest, [~~switch to v6~~](https://nuxtseo.com/docs/og-image/getting-started/introduction).

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

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

](https://nuxtseo.com/docs/og-image/v5/releases/v5)

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)

**Integrations**

# **Nuxt Content**

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

content.config.ts

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

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

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

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

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

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

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

```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,
    }
  }
})
```

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

```md
:OgImageScreenshot
```

**Was this page helpful?**

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