Nuxt Content · Nuxt SEO

[NuxtSEO](https://nuxtseo.com/ "Home")

- [Modules](https://nuxtseo.com/docs/nuxt-seo/getting-started/introduction)
- [Tools](https://nuxtseo.com/tools)
- [Pro](https://nuxtseo.com/pro)
- [Learn SEO](https://nuxtseo.com/learn-seo/nuxt) [Releases](https://nuxtseo.com/releases)

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

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

[User Guides](https://nuxtseo.com/docs/nuxt-seo/getting-started/introduction)

[Releases](https://nuxtseo.com/docs/nuxt-seo/releases/v5)

Nuxt SEO

- [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 OG Image](https://nuxtseo.com/docs/og-image/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)

Search…```k`` /`

v5.1.3

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

### Getting Started

- [Introduction](https://nuxtseo.com/docs/nuxt-seo/getting-started/introduction)
- [Installation](https://nuxtseo.com/docs/nuxt-seo/getting-started/installation)
- [Troubleshooting](https://nuxtseo.com/docs/nuxt-seo/getting-started/troubleshooting)
- [Community Videos](https://nuxtseo.com/docs/nuxt-seo/getting-started/community-videos)

### Core Concepts

- [Quick Module Setup Guide](https://nuxtseo.com/docs/nuxt-seo/guides/using-the-modules)
- [Disabling Modules](https://nuxtseo.com/docs/nuxt-seo/guides/disabling-modules)
- [Nuxt Content](https://nuxtseo.com/docs/nuxt-seo/guides/nuxt-content)
- [I18n](https://nuxtseo.com/docs/nuxt-seo/guides/i18n)
- [MCP Server](https://nuxtseo.com/docs/nuxt-seo/guides/mcp)
- [LLMs.txt](https://nuxtseo.com/docs/nuxt-seo/guides/llms-txt)
- [Understanding Site Config](https://nuxtseo.com/docs/nuxt-seo/guides/site-config)
- [Debugging Modules](https://nuxtseo.com/docs/nuxt-seo/guides/debugging-modules)
- [Updating Nuxt Modules](https://nuxtseo.com/docs/nuxt-seo/guides/updating-modules)

Core Concepts

# Nuxt Content

[](https://nuxtseo.com/tools/html-to-markdown)**Migrating content?** Use our [HTML to Markdown Converter](https://nuxtseo.com/tools/html-to-markdown) to convert existing pages to Nuxt Content format.

## [Introduction](#introduction)

Most Nuxt SEO modules integrate with Nuxt Content by default.

- Nuxt Robots: `robots` ([docs](https://nuxtseo.com/docs/robots/guides/content))
- Nuxt Sitemap: `sitemap` ([docs](https://nuxtseo.com/docs/sitemap/guides/content))
- Nuxt OG Image: `ogImage` ([docs](https://nuxtseo.com/docs/og-image/integrations/content))
- Nuxt Schema.org: `schemaOrg` ([docs](https://nuxtseo.com/docs/schema-org/guides/content))
- Nuxt Link Checker: Uses content APIs to check links

The Nuxt Content setup is identical whether you installed `@nuxtjs/seo` or the modules individually. Each module provides its own `defineXxxSchema()` function that you compose in your collection schema. You only need to include schemas for the modules you use.

For Nuxt Content v3 you need to add each module's schema to your collection using their `defineXxxSchema()` functions.

For Nuxt Content v2, please see the individual module documentation for how to configure them.

## [Setup Nuxt Content v3](#setup-nuxt-content-v3)

Add each module's schema field to your collection using `defineXxxSchema()` from the relevant module.

content.config.ts

```
import { defineCollection, defineContentConfig } from '@nuxt/content'
import { defineRobotsSchema } from '@nuxtjs/robots/content'
import { defineSitemapSchema } from '@nuxtjs/sitemap/content'
import { defineOgImageSchema } from 'nuxt-og-image/content'
import { defineSchemaOrgSchema } from 'nuxt-schema-org/content'
import { z } from 'zod'

export default defineContentConfig({
  collections: {
    content: defineCollection({
      type: 'page',
      source: '**/*.md',
      schema: z.object({
        robots: defineRobotsSchema(),
        sitemap: defineSitemapSchema(),
        ogImage: defineOgImageSchema(),
        schemaOrg: defineSchemaOrgSchema(),
      }),
    }),
  },
})
```

You only need to include the schemas for the modules you use. For example, if you only need sitemap and robots support, include those two:

content.config.ts

```
import { defineCollection, defineContentConfig } from '@nuxt/content'
import { defineRobotsSchema } from '@nuxtjs/robots/content'
import { defineSitemapSchema } from '@nuxtjs/sitemap/content'
import { z } from 'zod'

export default defineContentConfig({
  collections: {
    content: defineCollection({
      type: 'page',
      source: '**/*.md',
      schema: z.object({
        robots: defineRobotsSchema(),
        sitemap: defineSitemapSchema(),
      }),
    }),
  },
})
```

The `asSeoCollection()` wrapper is deprecated. Use the individual `defineXxxSchema()` functions shown above instead.

To ensure the tags gets rendered you need to ensure you're using the SEO composable.

[...slug].vue

```
<script setup lang="ts">
const route = useRoute()
const { data: page } = await useAsyncData(\`page-${route.path}\`, () => {
  return queryCollection('content').path(route.path).first()
})
if (page.value?.ogImage?.component) {
  defineOgImage({ component: page.value.ogImage.component, ...page.value.ogImage.props }) // <-- Nuxt OG Image
}
// Ensure the schema.org is rendered
useSchemaOrg(page.value.schemaOrg || []) // <-- Nuxt Schema.org
useSeoMeta(page.value.seo || {}) // <-- useSeoMeta
</script>
```

Due to Nuxt Content v3 limitations, you must load `@nuxtjs/seo` before `@nuxt/content` in your modules array.

```
export default defineNuxtConfig({
  modules: [
    '@nuxtjs/seo',
    '@nuxt/content' // <-- Must be after @nuxtjs/seo
  ]
})
```

## [Usage](#usage)

For the full options available for each module i.e. for the schemas specific to each of the different SEO modules, please see the individual module documentation.

E.g.: The schema of the [OG Image](https://nuxtseo.com/docs/og-image/integrations/content) module (as provided by `defineOgImageSchema()` - see above) defines 3 properties:

- `component` ⇒ corresponding to a real component name as implemented within the `components/OgImage` folder.
- `props` ⇒ holding the values of properties defined in the aforementioned component.
- `url` ⇒ providing the address of an already existing (og compatible) image file, which is to be used as-is instead of an image generated on the fly by the module.

content/index.md

```
---
title: "Hello World Page"
description: "The purpose of this page is to say 'hello!' to the world."
ogImage:
  component: HelloWorld
  props:
    title: "Hello World"
    description: "This is a description"
sitemap:
  lastmod: 2025-01-01
robots: index, nofollow
schemaOrg:
  - "@type": "BlogPosting"
    headline: "How to Use Our Product"
    author:
      type: "Person"
      name: "Jane Smith"
    datePublished: "2023-10-01"
---

# {{$doc.title}}

{{ $doc.description}}
```

Using the following (example) og-image template "Simple.takumi" and the YAML data defined above

components/OgImage/Simple.takumi.vue

```
<script setup lang="ts">
const props = defineProps({
  title: { type: String, required: false, default: 'title' },
  description: { type: String, required: false },
})
</script>

<template>
  <div style="background-color: darkgoldenrod;display: flex; flex-direction: column; font-size: 2rem; padding: 3rem; color: white">
    <h1 style="font-size: 4rem; font-weight: 800;">
      {{ title }}
    </h1>
    <h2 v-if="description" style="display: block;">
      {{ description }}
    </h2>
  </div>
</template>
```

You may now choose how to generate the og-image for any given content page:

- Using the frontmatter properties `title` and `description`, since those properties are defined by default in the schema of every "page" collection - see [Standard Collection Fields](https://content.nuxt.com/docs/collections/types#schema-overrides) for the **page** collection type)[...slug].vue

  ```
  <script lang="ts" setup>
  const route = useRoute()
  const { data: page } = await useAsyncData(\`page-${route.path}\`, () => {
    return queryCollection('content').path(route.path).first()
  })

  const [ogImagePath] = defineOgImage('Simple.takumi', { title: () => page.value?.title, description: () => page.value?.description })

  useSeoMeta({
    title: page.value.title,
    description: page.value.description,
    ogImage: ogImagePath,
    // ...
  })
  </script>
  //...
  ```

   or
- Using the `ogImage` frontmatter property and its attributes `component` and `props`[...slug].vue

  ```
  <script lang="ts" setup>
  const route = useRoute()
  const { data: page } = await useAsyncData(\`page-${route.path}\`, () => {
    return queryCollection('content').path(route.path).first()
  })

  const [ogImagePath] = defineOgImage(page.value.ogImage.component, page.value.ogImage.props)

  useSeoMeta({
    title: page.value.title,
    description: page.value.description,
    ogImage: ogImagePath,
    // ...
  })
  </script>
  //...
  ```

   Note: this would require that **all** content pages provide the adequate frontmatter data or
- any combining (failover) strategy like[...slug].vue

  ```
  <script lang="ts" setup>
  // ...
  const component = page.value?.ogImage?.component || 'Simple.takumi'
  const props = page.value?.ogImage?.props || { title: page.value?.title, description: page.value?.description }
  const [ogImagePath] = defineOgImage(component, props)
  // ...
  </script>
  ```



Note: Consider to differentiate the **multiple/different** usages and requirements of such **description** fields on purpose:

```
<head>
  <meta name="description" content="...">
  <meta property="og:description" content="...">
  <meta name="twitter:description" content="...">
  <meta property="og:image:alt" content="...">
  <!-- ... -->
</head>
```

[Edit this page](https://github.com/harlan-zw/nuxt-seo/edit/main/docs/content/2.guides/2.nuxt-content.md)

[Markdown For LLMs](https://nuxtseo.com/docs/nuxt-seo/guides/nuxt-content.md)

Did this page help you?

[Disabling Modules Learn how to disable modules in Nuxt SEO.](https://nuxtseo.com/docs/nuxt-seo/guides/disabling-modules) [I18n How Nuxt SEO modules integrate with @nuxtjs/i18n and nuxt-i18n-micro.](https://nuxtseo.com/docs/nuxt-seo/guides/i18n)

On this page

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

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

### [NuxtSEO](https://nuxtseo.com/ "Home")

- [Getting Started](https://nuxtseo.com/docs/nuxt-seo/getting-started/introduction)
- [MCP](https://nuxtseo.com/docs/nuxt-seo/guides/mcp)

Modules

- [Robots](https://nuxtseo.com/docs/robots/getting-started/introduction)
- [Sitemap](https://nuxtseo.com/docs/sitemap/getting-started/introduction)
- [OG Image](https://nuxtseo.com/docs/og-image/getting-started/introduction)
- [Schema.org](https://nuxtseo.com/docs/schema-org/getting-started/introduction)
- [Link Checker](https://nuxtseo.com/docs/link-checker/getting-started/introduction)
- [SEO Utils](https://nuxtseo.com/docs/seo-utils/getting-started/introduction)
- [Site Config](https://nuxtseo.com/docs/site-config/getting-started/introduction)
- [Skew Protection](https://nuxtseo.com/docs/skew-protection/getting-started/introduction)
- [AI Ready](https://nuxtseo.com/docs/ai-ready/getting-started/introduction)

### [NuxtSEO Pro](https://nuxtseo.com/pro "Nuxt SEO Pro")

- [Getting Started](https://nuxtseo.com/pro)
- [Dashboard](https://nuxtseo.com/pro/dashboard)
- [Pro MCP](https://nuxtseo.com/pro/docs/getting-started/mcp-setup)

### [Learn SEO](https://nuxtseo.com/learn-seo "Learn SEO")

Nuxt

- [Mastering Meta](https://nuxtseo.com/learn-seo/nuxt/mastering-meta)
- [Controlling Crawlers](https://nuxtseo.com/learn-seo/nuxt/controlling-crawlers)
- [Launch & Listen](https://nuxtseo.com/learn-seo/nuxt/launch-and-listen)
- [Routes & Rendering](https://nuxtseo.com/learn-seo/nuxt/routes-and-rendering)
- [Staying Secure](https://nuxtseo.com/learn-seo/nuxt/routes-and-rendering/security)

Vue

- [Vue SEO Guide](https://nuxtseo.com/learn-seo/vue)
- [Mastering Meta](https://nuxtseo.com/learn-seo/vue/mastering-meta)
- [Controlling Crawlers](https://nuxtseo.com/learn-seo/vue/controlling-crawlers)
- [SPA SEO](https://nuxtseo.com/learn-seo/vue/spa)
- [SSR Frameworks](https://nuxtseo.com/learn-seo/vue/ssr-frameworks)
- [SEO Checklist](https://nuxtseo.com/learn-seo/checklist)
- [Pre-Launch Warmup](https://nuxtseo.com/learn-seo/pre-launch-warmup)
- [Backlinks & Authority](https://nuxtseo.com/learn-seo/backlinks)

### [Tools](https://nuxtseo.com/tools "SEO Tools")

- [Social Share Debugger](https://nuxtseo.com/tools/social-share-debugger)
- [Robots.txt Generator](https://nuxtseo.com/tools/robots-txt-generator)
- [Meta Tag Checker](https://nuxtseo.com/tools/meta-tag-checker)
- [HTML to Markdown](https://nuxtseo.com/tools/html-to-markdown)
- [XML Sitemap Validator](https://nuxtseo.com/tools/xml-sitemap-validator)
- [Schema.org Validator](https://nuxtseo.com/tools/schema-validator)
- [Keyword Idea Generator](https://nuxtseo.com/tools/keyword-generator)
- [Keyword Research](https://nuxtseo.com/tools/keyword-research)
- [SERP Analyzer](https://nuxtseo.com/tools/serp-analyzer)
- [Domain Rankings](https://nuxtseo.com/tools/domain-rankings)

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