nextjs-jsonld-schema

drab_magenta_gipsy

Schema.org integration for Next.js applications with JSON-LD.

0likes0comments

Visit project 0

Project details

About this project

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.

Key Features

Type-Safe: Offers complete TypeScript support with comprehensive interfaces, ensuring robust development.
Optimized for Next.js: Seamlessly integrates with both App Router and Pages Router of Next.js.
Rich Snippets Ready: Generates structured data that complies with Google’s standards, improving search engine results.
Modular Design: Use only the components that are necessary for the project, ensuring efficiency.
Lightweight: Designed with zero external dependencies, aside from React as a peer dependency.

Quick Start Examples

Website Schema Integration

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>
  );
}

Schema for Calculators

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 */}
    </>
  );
}

Blog Post Schema

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>
    </>
  );
}

FAQ and Breadcrumb Schemas

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} />

Comprehensive API Reference

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

Validation

Ensure generated schemas are valid using tools like the Google Rich Results Test and the Schema.org Validator.

Production Usage

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.

Comments

Your draft will be saved

Start the conversation

Share the first comment.