Managing JSON-LD Schemas on Sitecore XM Cloud with Next.js and SXA

Introduction

In the modern digital landscape, enhancing search engine optimization (SEO) is crucial for the visibility and success of any website. One effective method to improve SEO is by implementing JSON-LD (JavaScript Object Notation for Linked Data) schemas. JSON-LD allows you to embed structured data on your web pages, helping search engines better understand your content and potentially display rich snippets in search results.

This blog post will guide you through the process of managing JSON-LD schemas on Sitecore XM Cloud using Next.js and Sitecore Experience Accelerator (SXA).

Prerequisites

Before we dive into the implementation, ensure you have the following prerequisites:

• A Next.js project set up and integrated with Sitecore XM Cloud.
• Basic understanding of Sitecore XM Cloud, Next.js, and JSON-LD.
• next-seo package installed in your Next.js project.

Setting Up the Next.js Project

First, make sure your Next.js project is set up and integrated with Sitecore XM Cloud. If you haven't done this yet, follow the Sitecore documentation to get started.

Installing Necessary Dependencies

Install the next-seo package, which will help us manage JSON-LD schemas in our Next.js application:

npm install next-seo

Creating a Reusable JSON-LD Schema Component

Create a reusable JSON-LD schema component that can be included in your pages. This component will use the next-seo package to inject JSON-LD data into your pages.

// components/JsonLdSchema.js
import { JsonLd } from 'next-seo';

const JsonLdSchema = ({ type, data }) => {
  return <JsonLd type={type} {...data} />;
};

export default JsonLdSchema;

Defining the Article Detail Component

Next, create the article detail component that will be used on the article detail page template in Sitecore. This component will receive the necessary data from the Sitecore context.

// components/ArticleDetail.js
import { withSitecoreContext } from '@sitecore-jss/sitecore-jss-nextjs';
import JsonLdSchema from './JsonLdSchema';

const ArticleDetail = ({ sitecoreContext }) => {
  const { articleData } = sitecoreContext.route.fields;

  const jsonLdData = {
    '@context': 'https://schema.org',
    '@type': 'Article',
    'headline': articleData.title.value,
    'description': articleData.description.value,
    'datePublished': articleData.datePublished.value,
    'author': {
      '@type': 'Person',
      'name': articleData.author.value
    },
    'mainEntityOfPage': {
      '@type': 'WebPage',
      '@id': articleData.url.value
    }
  };

  return (
    <div>
      <JsonLdSchema type="Article" data={jsonLdData} />
      <h1>{articleData.title.value}</h1>
      <p>{articleData.description.value}</p>
      <p><strong>Published on:</strong> {articleData.datePublished.value}</p>
      <p><strong>Author:</strong> {articleData.author.value}</p>
    </div>
  );
};

export default withSitecoreContext()(ArticleDetail);

Integrating the Component into Sitecore

Define Sitecore Fields: Ensure the Sitecore template for the article detail page includes the necessary fields (title, description, datePublished, author, url). These fields will be populated with data and passed to the component.

Create the necessary Sitecore Components

You can do that following the official sitecore guide for SXA development: Components Design Best Practices

Advanced Usage: Multiple JSON-LD Scripts
If you need to include multiple JSON-LD scripts on a single page, you can use the scriptKey prop to uniquely identify each script tag:

// components/MultipleSchemas.js
import { JsonLd } from 'next-seo';

const MultipleSchemas = () => {
  const personSchema = {
    '@context': 'https://schema.org',
    '@type': 'Person',
    'name': 'John Doe',
    'jobTitle': 'Software Engineer',
    'worksFor': {
      '@type': 'Organization',
      'name': 'Example Inc.'
    }
  };

  const articleSchema = {
    '@context': 'https://schema.org',
    '@type': 'Article',
    'headline': 'Understanding JSON-LD',
    'description': 'A detailed guide on JSON-LD schemas.',
    'datePublished': '2024-07-24',
    'author': {
      '@type': 'Person',
      'name': 'Jane Smith'
    }
  };

  return (
    <div>
      <JsonLd type="Person" scriptKey="person" {...personSchema} />
      <JsonLd type="Article" scriptKey="article" {...articleSchema} />
    </div>
  );
};

export default MultipleSchemas;

Example Output

When rendered, the JSON-LD scripts will be included in the HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Understanding JSON-LD</title>
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "Person",
    "name": "John Doe",
    "jobTitle": "Software Engineer",
    "worksFor": {
      "@type": "Organization",
      "name": "Example Inc."
    }
  }
  </script>
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "Article",
    "headline": "Understanding JSON-LD",
    "description": "A detailed guide on JSON-LD schemas.",
    "datePublished": "2024-07-24",
    "author": {
      "@type": "Person",
      "name": "Jane Smith"
    }
  }
  </script>
</head>
<body>
  <div>
    <h1>Understanding JSON-LD</h1>
    <p>By Jane Smith</p>
    <p>Published on: July 24, 2024</p>
    <h2>About the Author</h2>
    <p>John Doe is a Software Engineer at Example Inc.</p>
  </div>
</body>
</html>

Conclusion

By following this guide, you can effectively manage JSON-LD schemas in your Sitecore XM Cloud project using Next.js and SXA. Implementing structured data helps search engines better understand your content, enhancing your site's SEO and visibility. Leveraging the next-seo package simplifies the process, allowing you to focus on creating valuable content for your users.

If you have any questions or need further assistance, feel free to reach out in the comments below!