Blog
3 min read

Schema Markup Explained: Structured Data for SEO (With JSON-LD Examples)

Schema markup is code that tells search engines what your page is about — an article, a product, a business, an FAQ — in a format they understand exactly. What it does, JSON-LD examples for common types, adding it in Next.js, testing it, and what it can and can't do for rankings.

Schema markup (also called structured data) is extra code on a page that describes its content in a standard vocabulary — schema.org — so search engines and other machines understand it precisely.

A human sees "$29" next to a picture. Structured data tells Google: this is a Product, its price is 29, the currency is USD, and it's in stock.

What it does for you

  • Rich results — Google can show extra details in search: star ratings, prices, breadcrumbs, article dates, event times, recipes. These often get more clicks.
  • Clearer understanding — search engines and AI tools can identify your organisation, products, authors and articles unambiguously. (Generative engine optimization)

What it doesn't do: it isn't a direct ranking boost, and Google decides whether to show rich results at all.

JSON-LD: the format to use

There are several formats; JSON-LD is the one Google recommends. It's a <script> block that doesn't affect what visitors see:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "How to Fix a 502 Bad Gateway Error",
  "datePublished": "2026-10-02",
  "dateModified": "2026-10-02",
  "author": { "@type": "Organization", "name": "Acme" },
  "image": "https://acme.example/og/502.png"
}
</script>

(What is JSON?)

Common types with examples

Organization (your homepage)

{
  "@context": "https://schema.org",
  "@type": "Organization",
  "name": "Acme",
  "url": "https://acme.example",
  "logo": "https://acme.example/logo.png",
  "sameAs": ["https://x.com/acme", "https://github.com/acme"]
}

Product with an offer

{
  "@context": "https://schema.org",
  "@type": "Product",
  "name": "Desk Lamp",
  "image": "https://acme.example/lamp.jpg",
  "offers": {
    "@type": "Offer",
    "price": "39.00",
    "priceCurrency": "USD",
    "availability": "https://schema.org/InStock"
  }
}

SoftwareApplication (for SaaS)

{
  "@context": "https://schema.org",
  "@type": "SoftwareApplication",
  "name": "Acme Invoicing",
  "applicationCategory": "BusinessApplication",
  "operatingSystem": "Web",
  "offers": { "@type": "Offer", "price": "9", "priceCurrency": "USD" }
}

Describes where the page sits in your site's hierarchy, often shown in search results instead of the raw URL.

FAQPage

Marks up question-and-answer content. Google now shows FAQ rich results only for a limited set of authoritative sites, but the markup still describes the content clearly.

Adding it in Next.js

Render the JSON-LD in your page component:

export default function Page({ post }) {
  const jsonLd = {
    '@context': 'https://schema.org',
    '@type': 'Article',
    headline: post.title,
    datePublished: post.date,
  }
  return (
    <>
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd).replace(/</g, '\\u003c') }}
      />
      <article>...</article>
    </>
  )
}

The replace escapes < so content can't break out of the script tag. (XSS explained)

Make sure it's in the server-rendered HTML, not added later by client JavaScript.

Testing it

  • Google's Rich Results Test — shows which rich results your page qualifies for and any errors.
  • Schema Markup Validator (validator.schema.org) — checks the markup against schema.org.
  • Search Console → Enhancements — shows structured data issues across your site. (Google Search Console)

Rules to follow

  • Mark up only what's visible on the page. Prices, ratings and reviews in the markup must match what users see. Misleading structured data can get rich results removed.
  • Don't invent reviews or ratings.
  • Keep it in sync — a price change on the page must change the markup too. Generating it from the same data avoids drift.

EasySpawn serves your site server-rendered from your own server, so structured data, meta tags and social previews are in the HTML every crawler sees. See how it works or join the waitlist.

Related: SEO Basics for Your App · Social Preview Images · Canonical URLs Explained · Generative Engine Optimization

Keep reading