Structured Data and JSON-LD: The Developer's Guide to Rich Results

Structured data tells Google what your page is about — in a machine-readable format. When Google understands your content, it can display rich results: FAQ dropdowns, breadcrumb trails, pricing cards, recipe cards, HowTo steps. These earn more clicks than plain blue links.

The format: JSON-LD

JSON-LD (JavaScript Object Notation for Linked Data) is Google's preferred format. It's a <script type="application/ld+json"> block in your HTML containing a JSON object that describes the page's content using schema.org vocabulary.

Priority schemas (implement these first)

1. Organization

Who you are. Emit once in the root layout. Includes name, URL, description, and social profiles.

2. BreadcrumbList

Where this page sits in your site hierarchy. Emit on every non-homepage page. Google displays these as clickable breadcrumb trails in search results.

3. FAQPage

Questions and answers visible on the page. Google can display these as expandable FAQ dropdowns directly in search results — massively increasing your SERP real estate.

4. BlogPosting

For blog posts. Includes datePublished, dateModified, author, publisher, wordCount. Google uses these to display article dates and author info.

Advanced schemas (implement when relevant)

• Product + Offer — pricing pages. Enables price display in search results.
• HowTo — step-by-step guides. Can appear as numbered steps in search.
• ItemList — collection/gallery pages. Enables carousel display.
• SoftwareApplication — app homepage. Describes the app category and pricing.
• WebSite + SearchAction — enables the sitelinks search box in branded queries.

Implementation in Next.js

The cleanest pattern: build JSON-LD helper functions in lib/seo/jsonld.ts, then call them in your page components and render via <script type="application/ld+json"> with dangerouslySetInnerHTML.

Validation

1. Rich Results Test — does Google recognize your schema and will it display rich results?
2. Schema.org Validator — is the JSON-LD syntactically valid against the schema.org spec?
3. Google Search Console — after deploy, GSC reports schema errors and enhancement status per page.

Common mistakes

• Schema without visible content. Google requires FAQ answers to be visible on the page, not just in the schema. Hidden content = schema ignored.
• Duplicate Organization schema. Emit it once in the layout, not on every page. Multiple Organization blocks confuse Google.
• Missing required fields. BlogPosting without datePublished, BreadcrumbList without position values — these fail validation silently.
• Testing only in development. Always validate the production URL, not localhost. metadataBase affects how URLs resolve in schema.