How It Works

Introduction

Nuxt Schema.org will generate structured data for your site based on the input you provide and the content of your pages.

This is used to help search engines understand your content better and provide more relevant search results.

Nuxt Schema.org is built on Unhead Schema.org, which powers the underlying schema generation engine.

LD+JSON tag

The schema is injected within a <script type="application/ld+json"> tag in your document's <head>.

Production Static data

When running in development this schema will be reactive to page changes, however when in production it will be static.

This is because robots will only ever parse the initial SSR response and not any client-side changes. To avoid the extra bundle size required to generate schema.org on the frontend, it is only generated statically on the SSR response.

If you really need this behavior you can enable the reactive module config.

Data Inferencing

To avoid much of the boilerplate associated with schema.org, Nuxt Schema.org will infer data from your pages.

For example, the WebPage node takes its name from the page <title>.

The description of the WebPage and Article nodes comes from the page meta description, such as useSeoMeta({ description }). Without one, it falls back to your Site Config description.

To set a different description on a node, pass description to it:

useSchemaOrg([
  defineWebPage({ description: 'My page description' }),
])

Key Points

• Schema is generated server-side and injected as JSON-LD in <head>
• In production, schema is static (not reactive) to reduce bundle size
• The WebPage name comes from the page title. The description comes from the page meta description, then Site Config.
• To debug during development, use the Schema.org tab in Nuxt DevTools. Its panel needs nuxtseo-devtools-host as a dev dependency.