This project simplifies the process of integrating Schema.org structured data into Next.js applications using JSON-LD. By providing a straightforward way to implement schema markup, it enhances SEO capabilities, making it easier for search engines to understand your content.
The nextjs-jsonld-schema library provides type-safe JSON-LD structured data builders designed specifically for Next.js applications. This tool facilitates the generation of SEO-optimized schema.org markup, enhancing the visibility and discoverability of web pages such as calculators, blogs, FAQs, and more.
Add a website schema to the root layout for comprehensive site organization:
import { SchemaScript, buildWebsiteSchema } from 'nextjs-jsonld-schema';
export default function RootLayout({ children }) {
const schema = buildWebsiteSchema({
siteUrl: "https://example.com",
siteName: "My Calculator Site",
description: "Free online calculators for finance, math, and more",
organization: {
name: "My Company",
url: "https://example.com",
logo: "/logo.png",
contactEmail: "hello@example.com",
},
author: {
name: "John Doe",
url: "/about",
jobTitle: "Lead Developer",
},
searchUrlTemplate: "https://example.com/search?q={search_term_string}",
});
return (
<html>
<head>
<SchemaScript schema={schema} />
</head>
<body>{children}</body>
</html>
);
}
For calculator pages and online tools, use:
import { SchemaScript, buildCalculatorSchema } from 'nextjs-jsonld-schema';
export default function LoanCalculatorPage() {
const schema = buildCalculatorSchema({
siteUrl: "https://example.com",
url: "/calculators/loan",
title: "Loan Calculator",
description: "Calculate your monthly loan payments with our free tool",
category: "FinanceApplication",
image: "/images/loan-calc.png",
howtoSteps: [...],
faq: [...],
breadcrumbs: [...],
});
return (
<>
<SchemaScript schema={schema} />
{/* Your calculator UI */}
</>
);
}
Utilize the following structure for blog articles to enable rich snippet support:
import { SchemaScript, buildBlogPostSchema } from 'nextjs-jsonld-schema';
export default function BlogPost({ post }) {
const schema = buildBlogPostSchema({
siteUrl: "https://example.com",
url: `/blog/${post.slug}`,
title: post.title,
...
});
return (
<>
<SchemaScript schema={schema} />
<article>{/* Your blog content */}</article>
</>
);
}
Support for standalone FAQ schemas and breadcrumbs can be easily added:
import { SchemaScript, buildFAQSchema } from 'nextjs-jsonld-schema';
const schema = buildFAQSchema({
items: [...],
url: "https://example.com/faq",
});
<SchemaScript schema={schema} />
The library offers various builders such as:
| Function | Description |
|---|---|
buildWebsiteSchema() | Creates web site and organization schema |
buildCalculatorSchema() | Builds software application, HowTo, and FAQ schemas |
buildBlogPostSchema() | Generates a blog post schema for articles |
buildFAQSchema() | For standalone FAQ pages |
buildBreadcrumbSchema() | Constructs breadcrumb lists |
Ensure generated schemas are valid using tools like the Google Rich Results Test and the Schema.org Validator.
This library is successfully used in production environments, demonstrated by its application in hemenhesap.com, a Turkish financial calculator platform with extensive rich snippet visibility in Google Search.
Contributions and improvements to the project are encouraged, fostering collaboration for the Next.js community.
No comments yet.
Sign in to be the first to comment.