Nuxt Content · Nuxt OG Image · Nuxt SEO

-
-
-
-

[1.4K](https://github.com/harlan-zw/nuxt-seo)

[Nuxt SEO on GitHub](https://github.com/harlan-zw/nuxt-seo)

You're viewing **OG Image v5** documentation. For the latest,

.

OG Image

-
-
-
-
-
-
-
-
-
-

Search…```k`` /`

v5

- Playgrounds
- [Discord Support](https://discord.com/invite/275MBUBvgP)

### Getting Started

-
-
-
-

### Core Concepts

-
-
-
-
-
-
-
-
-
-
-
-
-
-

### Integrations

-
-

Integrations

# Nuxt Content

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

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

Strict Paths

Path Key

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

useContentHead

ContentDoc

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

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

On this page

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

[GitHub](https://github.com/harlan-zw/nuxt-seo) [ Discord](https://discord.com/invite/275MBUBvgP)

###

-
-

Modules

-
-
-
-
-
-
-
-
-

###

-
-
-

###

Nuxt

-
-
-
-
-

Vue

-
-
-
-
-
-
-
-

###

-
-
-
-
-
-
-
-
-
-

Copyright © 2023-2026 Harlan Wilton - [MIT License](https://github.com/harlan-zw/nuxt-seo/blob/main/license) · [mdream](https://mdream.dev)