Schema Markup in HTML & React: A Developer’s Guide to JSON-LD
Structured data — commonly called Schema Markup — is one of the few SEO techniques that gives search engines an almost literal, machine-readable description of your content. Instead of a crawler guessing that a block of text is a recipe, a product, or an FAQ, Schema Markup tells it directly, using a shared vocabulary defined at Schema.org. The payoff is rich results: star ratings, FAQ dropdowns, and breadcrumb trails right inside the search results page.
What Schema Markup Actually Is
Schema Markup is structured data written in a standardized vocabulary (Schema.org) and a standardized format — most commonly JSON-LD today, though microdata and RDFa also exist. It sits alongside your regular HTML and describes the content's meaning explicitly, rather than relying on the crawler to infer it from context.
JSON-LD is the format Google explicitly recommends, mainly because it's cleanly separated from your visible markup — you can add or update it without touching your page's actual HTML structure.
Why JSON-LD Over Microdata
- It lives in a single
<script type="application/ld+json">block, usually in the<head>, instead of scattered across dozens of HTML attributes - It's easier to generate dynamically from a CMS or a component's data, since it's just a JSON object
- It doesn't require modifying your existing visible markup or CSS classes
- It's less error-prone, since there's no risk of breaking visible layout while adding structured data
Adding Schema to Plain HTML
For a static HTML page, JSON-LD is just a script tag with a JSON object inside it. A basic Article schema looks like this:
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Article",
"headline": "Your Article Title",
"datePublished": "2026-08-21",
"author": { "@type": "Person", "name": "Author Name" }
}
</script>
Every field maps to a real property defined at Schema.org — you're not inventing a format, you're filling in a known one that search engines already understand.
Adding Schema in React
In a React app, the same JSON-LD object is typically injected using dangerouslySetInnerHTML inside a component, since React doesn't parse raw script content as JSX:
function ArticleSchema({ title, date, author }) {
const schema = {
"@context": "https://schema.org",
"@type": "Article",
headline: title,
datePublished: date,
author: { "@type": "Person", name: author }
};
return (
<script type="application/ld+json"
dangerouslySetInnerHTML={{ __html: JSON.stringify(schema) }}
/>
);
}
If you're using Next.js, the same pattern works inside <Head> (Pages Router) or directly in a Server Component (App Router), and because the values come from real props, the schema stays in sync automatically as content changes — no manual duplication required.
Common Schema Types Worth Knowing
- Article / BlogPosting — for blog posts and news content
- Product — for e-commerce listings, including price and availability
- FAQPage — powers the expandable FAQ dropdowns in search results
- BreadcrumbList — shows a breadcrumb trail in the search result instead of a raw URL
- LocalBusiness — address, hours, and contact info for local SEO
- Organization — company details, logo, and social profiles
- Review / AggregateRating — powers star ratings in search results
Validating Your Schema
Never ship structured data without testing it — a single typo in a property name silently breaks the entire block.
- Google's Rich Results Test — checks whether your markup is eligible for specific rich result types
- Schema.org Validator — validates against the full Schema.org vocabulary, beyond just what Google currently supports
- Browser DevTools — you can always inspect the raw
<script>tag to confirm the exact JSON being sent
Common Mistakes
- Marking up content that isn't actually visible on the page — Google's guidelines require the structured data to reflect real, visible content
- Using the wrong
@typefor the content — e.g., tagging a blog post as aProduct - Leaving required properties out of a type, which disqualifies the page from that rich result entirely
- Forgetting to update the schema when the underlying content changes, leading to stale or inconsistent data
Conclusion
Schema Markup doesn't directly boost your rankings the way backlinks or content quality do, but it dramatically improves how your listing looks and performs in search results — and a better-looking result earns more clicks even at the same ranking position. For any modern site, whether it's static HTML or a React/Next.js application, adding structured data is a small, well-defined task with an outsized payoff.
Our team of SEO strategists and web developers writes practical, data-driven guides based on real client campaigns and hands-on technical work.