Nuxt Content
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.
Setup Nuxt Content v3
This integration requires Zod v4. Install it with pnpm add zod@^4.6.6.
Add defineOgImageSchema() to your collection's schema to enable the ogImage frontmatter key.
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(),
}),
}),
},
})ogImage field needs the same Zod instance your project uses. The module resolves Zod from your project (it's an optional peer dependency), so this works automatically. If you have multiple Zod versions installed and ogImage is missing from the generated ContentCollectionItem type, pass your instance explicitly with defineOgImageSchema({ z }).To ensure the tags get rendered, you need to use the defineOgImage() composable with the ogImage key.
<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>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.
---
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.
---
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:
---
ogImage:
component: PageScreenshot
---