Structured Data Guide

Structured data is a standard way to describe your page to search engines: Schema.org vocabulary written as application/ld+jsonin the head. Add the right schema and Google can show rich results: star ratings, FAQs, breadcrumbs, event dates, sitelinks search, and more. This guide gives you copy-paste JSON-LD for every common schema, in both React + Vite and Next.js.

Paste into your AI chat

Copy the entire guide as markdown to use as context in Cursor, Claude, ChatGPT, or any AI tool.

Why structured data matters

It turns a plain blue link into a richer, more clickable result.

+

Rich results

Ratings, FAQs, breadcrumbs and event dates can appear directly in search.

+

Entity understanding

Google connects your org, people, and products into its knowledge graph.

+

Higher click-through

Richer listings stand out and earn more clicks for the same rank.

+

AI & answer engines

Clean, machine-readable facts help LLMs summarise you accurately.

Which schema for which site

Start with Organization + WebSite everywhere, then add per-page schemas that match your content.

SchemaUse it when…
OrganizationAlways, on the homepage or About page.
WebSiteAlways, global, powers the sitelinks search box.
BreadcrumbListOn every inner page (not the homepage).
FAQPageA visible FAQ / accordion of questions exists.
LocalBusinessThe business has a physical address.
ArticleBlog posts, news, or long-form content.
EventPublicly bookable events or speaking engagements.
VideoObjectA page embeds video content.
SoftwareApplicationA web app or SaaS product landing page.
CourseA learning platform lists 3+ courses.
ProfilePagePersonal portfolio or author bio pages.
ProductA pricing page with clear tiers to display.

Platform Implementation Patterns

How to inject JSON-LD in the two common stacks: React + Vite via react-helmet-async, and Next.js App Router via server-rendered script tags.

Organization

Homepage (or About page). Every project should have this: it helps Google uniquely identify the org.

WebSite

Homepage (global, applied on every page via layout). Powers the Google sitelinks search box.

BreadcrumbList

All inner pages (not homepage). Shows the navigation path in search results.

FAQPage

Any page with an FAQ section. Since 2023 FAQ rich results only show for authoritative gov/health sites, but the markup still helps Google understand the page, at zero cost.

LocalBusiness

Homepage or location pages for businesses with a physical address (dental practices, clinics, sports clubs, legal firms). Not for purely online businesses.

Article

Blog posts, news articles, content pages. Use on any project with a blog or content section.

Event

Pages showcasing events, conferences, or speaking engagements. Events must be bookable to the general public.

VideoObject

Pages with embedded video: demo pages, video platforms, podcast episodes with video.

SoftwareApplication

Product/landing pages for web apps and SaaS tools: any product with a dedicated landing page.

Course List

Educational platforms listing multiple courses: LMS product pages, course catalogues.

ProfilePage

Personal portfolio homepages and author bio pages.

Product (Digital/SaaS)

Pricing pages and product landing pages. For SaaS, SoftwareApplication is usually more appropriate. Use Product when you have clear pricing tiers to display.

Using @graph for Multiple Schemas

When a page needs several schema types, bundle them into a single JSON-LD block with @graph: cleaner than multiple script tags and avoids redundancy.

Testing and Validation

Validate before you ship, then monitor after deployment. Errors prevent rich results; warnings are recommendations.

Testing & validation tools

Validate before you ship, monitor after deployment.

ToolWherePurpose
Rich Results Testsearch.google.com/test/rich-resultsIs a page eligible for rich results?
Schema Markup Validatorvalidator.schema.orgValidate any Schema.org markup
Google Search Consolesearch.google.com/search-consoleMonitor rich results over time
URL Inspection Tool(within Search Console)See how Google renders a specific URL

Want the full guide as context for your AI coding assistant?