Nuxt Content
How to use the Nuxt Schema.org module with Nuxt Content.
Introduction
Nuxt Schema.org integrates with Nuxt Content out of the box, supporting a schemaOrg frontmatter key that can be used to configure your pages
schema.org data.
You can see a demo of this integration in the Nuxt OG Image & Nuxt Content Playground.
Setup Nuxt Content v3
In Nuxt Content v3 we need to use the asSchemaOrgCollection() function to augment any collections
to be able to use the schemaOrg frontmatter key.
content.config.ts
import { defineCollection, defineContentConfig } from '@nuxt/content'
import { asSchemaOrgCollection } from 'nuxt-schema-org/content'
export default defineContentConfig({
collections: {
content: defineCollection(
asSchemaOrgCollection({
type: 'page',
source: '**/*.md',
}),
),
},
})
To ensure the tags actually gets rendered you need to ensure you're using the useHead() composable with the head key.
[...slug
<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()
})
// Ensure the schema.org is rendered
useHead(page.value.head || {})
useSeoMeta(page.value.seo || {})
</script>
Setup Nuxt Content v2
No extra set up is required, simply add the schemaOrg key to your frontmatter.
Usage
It's recommended to provide an array of Schema.org nodes, otherwise you will be extending the WebPage node with the provided data.
---
schemaOrg:
# Define new nodes
- "@type": "BlogPosting"
headline: "How to Use Our Product"
author:
type: "Person"
name: "Jane Smith"
datePublished: "2023-10-01"
---
---
schemaOrg:
# Augment WebPage to an AboutPage
"@type": "AboutPage"
---
Markdown Recipes
Blog Post
---
title: 'My Blog Post'
schemaOrg:
- type: "BlogPosting"
headline: "How to Use Our Product"
author:
type: "Person"
name: "Jane Smith"
datePublished: "2023-10-01"
---
FAQ Page
---
title: 'FAQ'
schemaOrg:
type: FaqPage
mainEntity:
- "@type": "Question"
name: "What is your return policy?"
acceptedAnswer:
"@type": "Answer"
text: "You can return any item within 30 days of purchase."
- "@type": "Question"
name: "Do you offer technical support?"
acceptedAnswer:
"@type": "Answer"
text: "Yes, we offer 24/7 technical support."
---
About Page
---
title: 'About'
schemaOrg:
"@type": "AboutPage"
---
Contact Page
---
title: 'Contact'
schemaOrg:
"@type": "ContactPage"
mainEntity:
"@type": "ContactPoint"
contactType: "Customer Service"
telephone: "+1-800-555-5555"
email: "[email protected]"
---
Product Page
---
title: 'Product'
schemaOrg:
- "@type": "Product"
name: "Product XYZ"
description: "A high-quality product that meets your needs."
offers:
"@type": "Offer"
price: "29.99"
priceCurrency: "USD"
---
Did this page help you?