API Reference
JsonLd Component
API documentation for the JsonLd component
JsonLd Component
The JsonLd component renders JSON-LD structured data in your pages for better search engine understanding.
Import
import { JsonLd } from 'seox/next';Props
interface JsonLdProps {
data: object;
}| Prop | Type | Description |
|---|---|---|
data | object | The JSON-LD structured data object |
Basic Usage
import { JsonLd } from 'seox/next';
export default function Page() {
return (
<>
<JsonLd
data={{
'@context': 'https://schema.org',
'@type': 'Organization',
name: 'Acme Inc',
url: 'https://acme.com',
}}
/>
<main>Content</main>
</>
);
}How It Works
The component:
- Takes your data object
- Serializes it to JSON
- Renders it in a
<script type="application/ld+json">tag - Search engines parse this for rich results
Common Schema Types
Organization
<JsonLd
data={{
'@context': 'https://schema.org',
'@type': 'Organization',
name: 'Acme Inc',
url: 'https://acme.com',
logo: 'https://acme.com/logo.png',
sameAs: [
'https://twitter.com/acme',
'https://linkedin.com/company/acme',
'https://github.com/acme',
],
contactPoint: {
'@type': 'ContactPoint',
telephone: '+1-800-555-1234',
contactType: 'customer service',
},
}}
/>Article
<JsonLd
data={{
'@context': 'https://schema.org',
'@type': 'Article',
headline: 'Article Title',
description: 'Article description',
image: 'https://example.com/article-image.jpg',
author: {
'@type': 'Person',
name: 'John Doe',
url: 'https://example.com/authors/john',
},
publisher: {
'@type': 'Organization',
name: 'Acme Inc',
logo: {
'@type': 'ImageObject',
url: 'https://acme.com/logo.png',
},
},
datePublished: '2024-01-15T09:00:00Z',
dateModified: '2024-01-20T14:30:00Z',
}}
/>Product
<JsonLd
data={{
'@context': 'https://schema.org',
'@type': 'Product',
name: 'Premium Widget',
description: 'The best widget money can buy',
image: 'https://example.com/widget.jpg',
brand: {
'@type': 'Brand',
name: 'Acme',
},
offers: {
'@type': 'Offer',
price: '99.99',
priceCurrency: 'USD',
availability: 'https://schema.org/InStock',
seller: {
'@type': 'Organization',
name: 'Acme Inc',
},
},
aggregateRating: {
'@type': 'AggregateRating',
ratingValue: '4.8',
reviewCount: '256',
},
}}
/>BreadcrumbList
<JsonLd
data={{
'@context': 'https://schema.org',
'@type': 'BreadcrumbList',
itemListElement: [
{
'@type': 'ListItem',
position: 1,
name: 'Home',
item: 'https://example.com',
},
{
'@type': 'ListItem',
position: 2,
name: 'Products',
item: 'https://example.com/products',
},
{
'@type': 'ListItem',
position: 3,
name: 'Widgets',
item: 'https://example.com/products/widgets',
},
],
}}
/>FAQ
<JsonLd
data={{
'@context': 'https://schema.org',
'@type': 'FAQPage',
mainEntity: [
{
'@type': 'Question',
name: 'What is SEOX?',
acceptedAnswer: {
'@type': 'Answer',
text: 'SEOX is an SEO library for Next.js applications.',
},
},
{
'@type': 'Question',
name: 'How do I install SEOX?',
acceptedAnswer: {
'@type': 'Answer',
text: 'Run bun add seox to install the package.',
},
},
],
}}
/>WebSite with SearchAction
<JsonLd
data={{
'@context': 'https://schema.org',
'@type': 'WebSite',
name: 'Acme Inc',
url: 'https://acme.com',
potentialAction: {
'@type': 'SearchAction',
target: {
'@type': 'EntryPoint',
urlTemplate: 'https://acme.com/search?q={search_term_string}',
},
'query-input': 'required name=search_term_string',
},
}}
/>Multiple Schemas
You can include multiple schemas on a single page:
export default function ProductPage({ product }) {
return (
<>
{/* Organization schema */}
<JsonLd
data={{
'@context': 'https://schema.org',
'@type': 'Organization',
name: 'Acme Inc',
url: 'https://acme.com',
}}
/>
{/* Product schema */}
<JsonLd
data={{
'@context': 'https://schema.org',
'@type': 'Product',
name: product.name,
// ...
}}
/>
{/* Breadcrumb schema */}
<JsonLd
data={{
'@context': 'https://schema.org',
'@type': 'BreadcrumbList',
// ...
}}
/>
<main>{/* Page content */}</main>
</>
);
}Validation
Test your structured data using these tools:
Best Practices
- Place at top of component - Add
JsonLdbefore your main content - Use accurate types - Match the schema type to your content
- Include required properties - Check schema.org for required fields
- Test before deploying - Use validation tools to catch errors
- Keep data fresh - Update timestamps and dynamic data