For programmatic SEO sites that generate hundreds or thousands of pages, adding structured data ensures search engines can classify your content accurately, boosting visibility. Whether you’re building a site with articles, reviews, or product listings, structured data is crucial.

But how do you handle this for dynamic pages where content is generated on the fly? That’s where automation comes in!

Creating Dynamic Schema Markup in Next.js Using JSON-LD

First things first, JSON-LD is the format preferred by Google for structured data, and you can easily integrate it into your Next.js pages. For a dynamically generated page, we want to make sure that the schema markup is dynamic as well—meaning that it adapts based on the content that’s loaded on each page.

Here’s how you can create dynamic schema markup using JSON-LD in your Next.js application:

1. Install the next-seo package This is a simple SEO plugin for Next.js that also lets you add JSON-LD scripts to your pages.

   npm install next-seo
   

2. Create a dynamic schema in your Next.js page Add a JSON-LD script tag to your dynamic page using the next-seo package.

   import { NextSeo, ArticleJsonLd } from 'next-seo';
   
   export default function DynamicPage({ article }) {
       return (
           <>
               <NextSeo title={article.title} description={article.excerpt} />
               <ArticleJsonLd
                   url={`https://example.com/articles/${article.slug}`}
                   title={article.title}
                   images={article.imageUrls}
                   datePublished={article.publishedAt}
                   dateModified={article.updatedAt}
                   authorName={article.author}
                   description={article.excerpt}
               />
               <h1>{article.title}</h1>
               <p>{article.content}</p>
           </>
       );
   }
   

3. Fetch data dynamically You would typically get your page’s data from an API or a CMS (like Contentful, Sanity, or even a headless WordPress setup). Your schema should match the content that gets loaded dynamically. For example, if you’re creating a schema for an article, you’ll populate fields like title, author, and datePublished using the API response.

Automating Schema Generation for Large Datasets

For large-scale sites, manually adding structured data to each page is impractical. You need a way to automate schema generation across thousands of pages. This is where Next.js dynamic routing and getStaticProps come in handy. By fetching all your data at build time (or via ISR), you can automatically generate structured data for each page.

Let’s say you run an e-commerce site with thousands of products. You can loop through your product database, fetch details like product name, price, and availability, and then insert them into the schema:

export async function getStaticProps({ params }) {
    const product = await fetchProductData(params.id);
    return {
        props: {
            product,
        },
        revalidate: 3600, // ISR to update the product every hour
    };
}

export default function ProductPage({ product }) {
    return (
        <>
            <NextSeo title={product.name} description={product.description} />
            <script
                type="application/ld+json"
                dangerouslySetInnerHTML={{
                    __html: JSON.stringify({
                        "@context": "https://schema.org/",
                        "@type": "Product",
                        "name": product.name,
                        "description": product.description,
                        "image": product.images,
                        "sku": product.sku,
                        "offers": {
                            "@type": "Offer",
                            "priceCurrency": product.currency,
                            "price": product.price,
                            "availability": "https://schema.org/InStock",
                        },
                    }),
                }}
            />
            <h1>{product.name}</h1>
            <p>{product.description}</p>
        </>
    );
}

This setup lets you automatically generate schema markup for each product without manually coding each page.

Testing and Debugging Schema Markup Using Google’s Rich Results Test

Once you’ve added your structured data, testing is crucial. Google offers a handy tool called the Rich Results Test to validate your schema.

1. Run your page through the test Go to Google's Rich Results Test and enter the URL of your page. The tool will check if your structured data is correctly implemented and whether it's eligible for rich results in Google search.

2. Fix errors and warnings If the test throws errors or warnings, don’t ignore them. They can prevent your content from showing up as rich results. Common issues include:

   • Missing required fields (e.g., author for an article schema).
   • Incorrect field types (e.g., price values as a string instead of a number).

3. Test with structured data testing tool Google also provides a structured data testing tool for deeper analysis. Use this to inspect your JSON-LD directly and ensure it's structured properly.

Best Practices for Keeping Schema Updated and Avoiding Penalties

Now that you’ve got structured data up and running, let’s talk maintenance. Google’s algorithm evolves constantly, and schema markup should evolve with it. Here are some best practices:

1. Keep your schema updated If you’re using structured data for reviews, products, or events, make sure the data reflects the latest info. For example, outdated product availability or incorrect prices can lead to penalties.

2. Use the latest schema types Keep an eye on schema.org for updates. New schema types are added frequently, and using the most up-to-date types can improve your chances of being featured in rich results.

3. Avoid overloading with unnecessary schema Don’t try to add every possible schema type to your page. Focus on what’s most relevant to your content. Too much unnecessary schema can confuse search engines and hurt your rankings.

Examples of Structured Data: Articles, Reviews, Products

Here are a few examples of how you might structure JSON-LD for different types of pages:

1. Article Schema For blog posts or news articles:

   {
     "@context": "https://schema.org",
     "@type": "Article",
     "headline": "How to Automate Structured Data",
     "author": "John Doe",
     "datePublished": "2024-10-01",
     "image": "https://example.com/image.jpg",
     "publisher": {
       "@type": "Organization",
       "name": "Tech Times",
       "logo": {
         "@type": "ImageObject",
         "url": "https://example.com/logo.jpg"
       }
     }
   }
   

2. Product Schema For e-commerce product listings:

   {
     "@context": "https://schema.org/",
     "@type": "Product",
     "name": "Cool Gadget",
     "image": "https://example.com/product.jpg",
     "description": "A really cool gadget that does amazing things.",
     "sku": "12345",
     "offers": {
       "@type": "Offer",
       "priceCurrency": "USD",
       "price": "99.99",
       "availability": "https://schema.org/InStock"
     }
   }
   

3. Review Schema For user-generated reviews:

   {
     "@context": "https://schema.org",
     "@type": "Review",
     "itemReviewed": {
       "@type": "Product",
       "name": "Cool Gadget"
     },
     "author": {
       "@type": "Person",
       "name": "Jane Doe"
     },
     "reviewRating": {
       "@type": "Rating",
       "ratingValue": "5",
       "bestRating": "5"
     },
     "reviewBody": "This gadget changed my life!"
   }
   

Conclusion

Structured data is an essential component of modern SEO, especially for programmatically generated content. Implementing it in Next.js isn’t hard—you just need to automate the process for scalability. By following this guide, you’ll ensure your dynamic pages are SEO-friendly and eligible for rich results, all while saving time and effort.