Next.js › Metadata API & SEO Optimization

What structured data, also known as schema markup, can you add to a Next.js page to improve how it appears in search results?

Advanced

Answer

You embed a script tag containing JSON-LD structured data describing your content, such as marking up a recipe with its ingredients and cooking time, or an article with its author and publish date, which helps search engines display rich results like star ratings or recipe cards directly in search listings.

export default function RecipePage({ recipe }) {
  const jsonLd = {
    '@context': 'https://schema.org',
    '@type': 'Recipe',
    name: recipe.name,
    recipeIngredient: recipe.ingredients
  };
  return (
    <>
      <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }} />
      <h1>{recipe.name}</h1>
    </>
  );
}

Real-world example A recipe website adds structured data to every recipe page, resulting in eye catching recipe cards with star ratings and cooking time appearing directly within Google search results.

Common follow-ups: What types of structured data are most valuable for e-commerce websites?;How do you test that structured data is correctly formatted?

Route Handlers (API Route.js);Security Best Practices in Next.js