logoMhL

Structured Data

Overview

Structured data is a standardized format for providing information about a page and classifying its content. It helps search engines understand the content of your pages and can enhance how your pages appear in search results.

Component

The StructuredDataScript component provides a type-safe way to add structured data to your Next.js pages using the schema-dts package. It follows Next.js 15's recommended approach for implementing structured data.

import type { Thing, WithContext } from "schema-dts";

type StructuredDataScriptProps<T extends Thing> = {
  data: WithContext<T>;
  id?: string;
};

export default function StructuredDataScript<T extends Thing>({
  data,
  id,
}: StructuredDataScriptProps<T>) {
  return (
    <script
      id={id}
      type="application/ld+json"
      dangerouslySetInnerHTML={{
        __html: JSON.stringify(data),
      }}
    />
  );
}

Usage Examples

Basic Usage

import { StructuredDataScript } from "@/components/structured-data";
import type { WithContext, Article } from "schema-dts";

const articleData: WithContext<Article> = {
  "@context": "https://schema.org",
  "@type": "Article",
  headline: "My Article Title",
  author: {
    "@type": "Person",
    name: "John Doe",
  },
  datePublished: "2024-03-20",
};

export default function ArticlePage() {
  return (
    <>
      <StructuredDataScript data={articleData} />
      {/* Your page content */}
    </>
  );
}

References

Tools