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.
In Nuxt Content v3 we need to use the asSchemaOrgCollection() function to augment any collections
to be able to use the schemaOrg frontmatter key.
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.
<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>
No extra set up is required, simply add the schemaOrg key to your frontmatter.
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"
---
---
title: 'My Blog Post'
schemaOrg:
- type: "BlogPosting"
headline: "How to Use Our Product"
author:
type: "Person"
name: "Jane Smith"
datePublished: "2023-10-01"
---
---
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."
---
---
title: 'About'
schemaOrg:
"@type": "AboutPage"
---
---
title: 'Contact'
schemaOrg:
"@type": "ContactPage"
mainEntity:
"@type": "ContactPoint"
contactType: "Customer Service"
telephone: "+1-800-555-5555"
email: "support@example.com"
---
---
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"
---