Schema Markup

Schema Markup (Structured Data)

Schema markup, or structured data, helps search engines like Google understand the content and context of your web pages more effectively. This can lead to richer search results (rich snippets) for your site.

StarterKitPro provides helper functions in lib/seo/schema-markup.ts to easily generate and add JSON-LD schema markup to your pages. Default values like your app's name and domain are pulled from lib/app-config.ts.

Test Your Schema

You can test your implementation using the Google Rich Results Test.

SaaS Schema (`generateSaasSchema`)

This schema uses the SoftwareApplication type and is ideal for your main landing page or specific product pages.

Usage (Landing Page):

Import: Import generateSaasSchema in your landing page file (e.g., app/(marketing)/page.tsx).
Generate Schema: Call generateSaasSchema. You can rely on defaults pulled from app-config.ts or pass overrides for properties like name, description, price, ratings, etc.
Render Script: Add the JSON-LD script tag in your component's JSX.

app/(marketing)/page.tsx

import type { SoftwareApplication, WithContext } from "schema-dts";
import { generateSaasSchema } from "@/lib/seo/schema-markup";
// ... other imports for landing page components
 
export default function LandingPage() {
  // Generate the schema object (using defaults or providing overrides)
  const saasSchema: WithContext<SoftwareApplication> = generateSaasSchema({});
 
  return (
    <>
      {/* Render the schema script */}
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(saasSchema) }}
      />
      {/* Rest of your landing page components */}
      {/* <HeroSection /> */}
      {/* <FeaturesSection /> */}
      {/* ... */}
    </>
  );
}

Article Schema (`generateArticleSchema`)

This schema is ideal for individual blog posts or docs.

Usage (Single Blog Post Page):

Import: Import generateArticleSchema in your blog post page file (e.g., app/(marketing)/blog/[slug]/page.tsx).
Prepare Data: Fetch the post data (title, description, dates, etc.) and construct the full URL for the post.
Generate Schema: Call generateArticleSchema with the post data and URL.
Render Script: Add a <script type="application/ld+json"> tag in your component's JSX, embedding the generated schema object as a JSON string.

app/(marketing)/blog/[slug]/page.tsx

import type { Article, WithContext } from "schema-dts";
import { generateArticleSchema } from "@/lib/seo/schema-markup";
 
// ... (Props definition)
 
export default async function BlogPage({ params }: Props) {
  // Construct the full URL for the post
  const url = `https://${appConfig.domainName}/blog/${post.slug}`;
  // Generate the schema object and all other fields which can be passed to generateArticleSchema
  const articleSchema: WithContext<Article> = generateArticleSchema({
    title: post.data.title,
    description: post.data.description,
    url: url,
    datePublished: post.data.date,
    authorName: post.data.authorName,
    imageUrl: post.data.featuredImage,
  });
 
  return (
    <>
      {/* Render the schema script */}
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(articleSchema) }}
      />
      <div className="container mx-auto px-4 sm:px-6 py-8 md:py-12">
        <SingleArticle
          page={post}
          moreArticles={getMoreArticles(blog, post.slug)}
        />
      </div>
    </>
  );
}

By implementing these schemas, you provide valuable context to search engines, potentially improving your site's visibility and appearance in search results.

Schema Markup (Structured Data)

SaaS Schema (generateSaasSchema)

Article Schema (generateArticleSchema)

On this page

SaaS Schema (`generateSaasSchema`)

Article Schema (`generateArticleSchema`)