Skip to main contentSkip to sidebarSkip to headerSkip to footer

Structured Data

A component for embedding structured data (like JSON-LD) for SEO.

Installation

Import the component from the passport-ui package.

components/example.tsx
1
import { StructuredData } from "passport-ui";

Usage

Basic example showing how to use the component.

components/example.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
const articleData = {
  "@context": "https://schema.org",
  "@type": "Article",
  headline: "Understanding React Component Libraries",
  description: "A deep dive into building and maintaining React component libraries for modern web applications.",
  author: {
    "@type": "Person",
    name: "Jordan Chen",
    url: "https://example.com/authors/jordan-chen",
  },
  datePublished: "2024-01-15T09:00:00Z",
  dateModified: "2024-01-20T16:45:00Z",
  publisher: {
    "@type": "Organization",
    name: "Tech Insights",
    logo: {
      "@type": "ImageObject",
      url: "https://placehold.co/300x100/059669/ffffff?text=Tech+Insights",
    },
  },
  image: {
    "@type": "ImageObject",
    url: "https://placehold.co/800x400/0ea5e9/ffffff?text=React+Components",
    width: 800,
    height: 400,
  },
};
 
<StructuredData data={articleData} />

Additional resources

Documentation and examples are available in Storybook.

View in Storybook ↗