Render Schema.org structured data as JSON-LD

Before you begin

To configure and display JSON-LD, you need:

• A headless Sitecore Experience Accelerator (SXA) site with access to its items and templates in the Content Editor.
• Compatible Content SDK packages that export ScJsonLdSchemaComponent from @sitecore-content-sdk/angular.
• An Angular rendering host that receives the full Page object, including its layout and page mode.

Configure schemas in SitecoreAI

Follow Configure JSON-LD schemas to create the site's Schema container and configure any of the following:

• Page schemas that map fields on a page template to schema properties.
• Rendering schemas that map fields on a rendering's data source template to schema properties. Each rendering instance must have Include in schema enabled.
• Site schemas that provide values shared across the site, such as an organization's name or URL.

The SDK renders the resolved data; it doesn't create the mappings or generate schemas automatically. Review the configuration limitations before choosing schema types and properties.

Render JSON-LD in your application

The Angular app template includes ScJsonLdSchemaComponent in src/app/shared/layout.component.ts. Apps generated from a template that includes this component require no additional rendering code.

To add the component to an existing app:

1. Update @sitecore-content-sdk/angular and its related SDK dependencies to compatible versions that include the component.

2. In src/app/shared/layout.component.ts, import ScJsonLdSchemaComponent, add it to the component's imports, and pass the current page to it:

   import { Component, input } from '@angular/core';
   import {
     Page,
     ScJsonLdSchemaComponent,
   } from '@sitecore-content-sdk/angular';
   
   @Component({
     selector: 'app-layout',
     imports: [ScJsonLdSchemaComponent],
     template: `
       <sc-json-ld-schema [page]="page()" />
       <!-- Keep your existing layout and placeholders here. -->
     `,
   })
   export class LayoutComponent {
     readonly page = input.required<Page>();
   }

   When adapting this example, retain your existing component imports, layout markup, and other layout logic.

3. Remove custom JSON-LD rendering code that duplicates the schemas now rendered by the component.

ScJsonLdSchemaComponent accepts one input:

The component manages a script in the document head rather than rendering visible page content. Its position in the layout template doesn't determine the script's position in the document.

<script data-sc-json-ld="" type="application/ld+json">[{"@context":"https:\u002f\u002fschema.org","@type":"Organization","name":"Acme"}]</script>

Use the JSON-LD service

For a custom layout or other code that doesn't use the component, inject JsonLdSchemaService from @sitecore-content-sdk/angular:

When using the service directly, call apply() when the page changes and clear() during the owning component's destruction. Use one component or service owner for the active page to avoid conflicting updates.

Verify the output

To check your configuration:

1. Request Layout Service data for a page with configured mappings. Check that sitecore.context.schemas contains the expected schema types, properties, and values.
2. Request the page in normal mode from the SSR server. Inspect the returned HTML for a script with type="application/ld+json" and the data-sc-json-ld attribute.
3. Navigate to another page in the browser. Confirm that the SDK updates the script or removes it if the new page has no schemas.
4. Validate the rendered structured data with the Schema Markup Validator and, for Google search features, the Rich Results Test.

If schemas is absent from the Layout Service response, check the site's Schema container, template mappings, and, for rendering schemas, the data source and Include in schema parameter.

The component serializes the data but doesn't validate it against Schema.org or search-engine requirements. Configure the properties required for your schema type and validate the final rendered page, not only the Layout Service response.