Structured Data and
Schema Markup

For Frontend Developers: SSR, CSR, and the AI Search Era

G Sriram

SDE III at HighLevel

React Nexus 2026 — Bengaluru

Scan to follow along

Same Website. Two Search Results.

Why are these different?

acme.com › products › headphones

Acme Pro Wireless Headphones | Acme

Acme Pro wireless headphones with active noise cancellation, 30-hour battery life, and premium sound quality.

acme.com › products › headphones

Acme Pro Wireless Headphones | Acme

★★★★★ 4.6 (1,247)

$199.00 · In stock · Active noise cancellation, 30-hour battery life, premium sound.

The difference: Schema Markup.

What is Schema Markup?

Shared vocabulary from Schema.org — founded by Google, Microsoft, Yahoo, Yandex
Tells engines what your content means, not just what it says
Format: JSON-LD in a <script> tag
No HTML changes (with JSON-LD) — sits separately in a script tag

{
  "@context": "https://schema.org",
  "@type": "Organization",
  "name": "Acme Corp",
  "url": "https://acme.com",
  "logo": "https://acme.com/logo.png",
  "sameAs": [
    "https://twitter.com/acme",
    "https://linkedin.com/company/acme"
  ]
}

@context at the top level, @type on each entity

Back to Our Example

Behind those stars, that price, that "In stock" badge…

Without

acme.com › products › headphones

Acme Pro Wireless Headphones | Acme

Acme Pro wireless headphones with active noise cancellation, 30-hour battery life.

With

acme.com › products › headphones

Acme Pro Wireless Headphones | Acme

★★★★★ 4.6 (1,247)

$199.00 · In stock · Active noise cancellation, 30-hour battery life.

{
  "@context": "https://schema.org/",
  "@type": "Product",
  "name": "Acme Pro Wireless Headphones",
  "image": "https://acme.com/headphones.jpg",
  "aggregateRating": {
    "@type": "AggregateRating",
    "ratingValue": 4.6,
    "reviewCount": 1247
  },
  "offers": {
    "@type": "Offer",
    "price": 199.00,
    "priceCurrency": "USD",
    "availability": "https://schema.org/InStock"
  }
}

aggregateRating → stars + review count

offers → price + availability

Why Now: The AI Search Era

AI search is real. So is the confusion about schema's role in it.

✅ What schema IS for

Rich results — 25+ types

Star ratings, recipe cards, prices, breadcrumbs, videos in search results.

Knowledge Graph entries

Brand info panels — logo, socials, key entity data.

Content classification

Helps engines understand what type of content a page is.

All verified at developers.google.com/search/docs

❌ What schema is NOT for

A ranking factor

"...doesn't affect how the page ranks in Google web search"

— google.com/.../sd-policies

Required for AI Overviews

"no special schema.org structured data that you need to add"

— google.com/.../ai-features

Guaranteed AI search visibility

Google + Bing AI use schema (not required). Perplexity/ChatGPT: silent.

Schema is still worth shipping — for rich results, Knowledge Graph, and structured content. Just not ABSOLUTELY MANDATORY for AI search.

Why does this matter now? AI search is real. Perplexity, ChatGPT Search, Google AI Overviews are changing how people discover content. But there's also a lot of confusion about what schema markup actually does in this new era. Let me give you the short version. What is schema for? Three things, all verifiable from Google's docs. Rich results — twenty-plus types like stars, recipe cards, product snippets. Knowledge Graph entries — the brand info panels you see in Google. And content classification — helping engines understand what your content means. What is schema NOT for? Three things, each one counterintuitive. It's not a ranking factor. Google has said this for years. It's not required for AI Overviews. Google literally says, quote, no special schema.org structured data that you need to add. And the AI search visibility claim you'll see all over SEO blogs? That's not in Google's official documentation. So if you're going to add schema, do it for the verified benefits. Don't oversell it to your team for AI search citations.

Schema markup only counts
if crawlers can see it.

Which rendering strategy delivers it most reliably?

Who Can See What

Crawler	CSR / SPA	SSR / SSG / RSC	Executes JS?
Googlebot	Eventually (queued)	Immediately	Yes, documented
Bingbot	Eventually	Immediately	Yes (Edge engine)
GPTBot · OAI-SearchBot	Not documented	Immediately	Not documented
PerplexityBot	Not documented	Immediately	Not documented

Googlebot rendering: crawl → render → index. "Rendering happens when resources allow."

✅ Google + Bing only?

CSR can work. SSR is safer.

⚠ Need AI / non-JS crawlers?

Server-render — the only reliable path

Here's what's actually documented. Googlebot renders JavaScript using headless Chromium — but through a queued process. Crawl, then render when resources allow, then index. So your CSR app gets indexed eventually, just not on first pass. Bingbot is evergreen — uses the latest Microsoft Edge engine. They also render JavaScript. GPTBot — OpenAI's crawler — their official docs don't specify JavaScript rendering at all. Same for Perplexity. They publish user-agent strings and IP ranges, but they don't document JS support. Industry testing consistently suggests they don't execute JS, but officially it's not documented either way. For server-rendered output, everybody sees the schema immediately. No ambiguity. So the question becomes: which crawlers are you optimizing for?

Your Options, Ranked by Reliability

Option 1 — Server-rendered (best)

// Server Component (Next.js App Router)
export default async function Page() {
  const product = await getProduct()

  const jsonLd = {
    '@context': 'https://schema.org',
    '@type': 'Product',
    name: product.name,
  }

  const html = JSON.stringify(jsonLd).replace(/</g, '\\u003c')

  return (
    <script
      type="application/ld+json"
      dangerouslySetInnerHTML={{ __html: html }}
    />
  )
}

Reaches: Every crawler immediately

Option 2 — JS-injected (CSR-compatible)

'use client'
import { Helmet } from 'react-helmet-async'
import { useEffect, useState } from 'react'

export default function ProductSchema() {
  const [product, setProduct] = useState(null)

  useEffect(() => {
    fetch('/api/product')
      .then(r => r.json())
      .then(setProduct)
  }, [])

  if (!product) return null

  return (
    <Helmet>
      <script type="application/ld+json">
        {JSON.stringify({
          '@context': 'https://schema.org',
          '@type': 'Product',
          name: product.name,
        })}
      </script>
    </Helmet>
  )
}

Reaches: Googlebot, Bingbot · GPTBot, PerplexityBot: not documented

Google docs: "Google Search can understand and process structured data that's available in the DOM when it renders the page."

Here's the thing most React developers don't know. You have options. Option one, the best one: server-render your schema. Drop a native script tag inside a Server Component in Next.js App Router. The Next.js docs explicitly recommend this pattern. Every crawler sees it immediately. Two important details: use a native script tag, not the next/script component — that's for executable JavaScript. And replace less-than signs with the unicode equivalent to prevent XSS, because JSON.stringify doesn't sanitize. Option two — the one nobody talks about: Google explicitly documents how to inject JSON-LD via JavaScript on the client. They have a fetch-based code example on their docs page. Their quote: "Google Search can understand and process structured data that's available in the DOM when it renders the page." So if you're stuck in a CSR codebase you can't easily migrate, JS injection is a documented option. Caveats: Google warns it's less reliable for fast-changing data, and GPTBot and Perplexity probably won't see it. But for Google and Bing, it works.

Rendering Pitfalls

Even with the right rendering strategy, these embedding mistakes still ship in production.

The mistake	Why it breaks (per docs)
Using `next/script` for JSON-LD Common reflex in Next.js apps	Next.js docs: `next/script` is for executable JS. JSON-LD needs a native `<script>` tag.
Unsanitized JSON-LD output XSS vector hiding in plain sight	`JSON.stringify` doesn't sanitize. Escape `<` to `\u003c` at minimum, or use `serialize-javascript` for full coverage.
SSG with dynamic data Prices, inventory, event dates	Schema frozen at build time drifts from visible content. Google flags mismatches as misleading.
Schema that reads cookies / storage User-specific or A/B-variant content	Google: "WRS does not retain state across page loads." Cookies, localStorage, session cleared between renders.

✅ The fix

Keep schema in Server Components · fetch data server-side · escape < to \u003c · revalidate often if using SSG

Sources: nextjs.org/docs/app/guides/json-ld · google.com/search/docs/.../generate-structured-data-with-javascript · google.com/search/docs/.../fix-search-javascript

You've picked the right rendering strategy — server-render. Great. There are still four mistakes that ship in production all the time. One: using next/script for JSON-LD. Common reflex if you're trained on Next.js patterns. But next/script is built for executable JavaScript — it loads, runs, manages dependencies. JSON-LD is just data. You want a native script tag. Next.js docs are explicit about this. Two: not escaping less-than signs when you JSON.stringify your schema. JSON.stringify does not sanitize HTML. If your schema content contains a less-than sign — say, in a description with comparison operators — you've shipped an XSS vector. Next.js docs recommend replacing less-than with backslash-u-003c. Three: SSG with dynamic data. If you use Gatsby, Astro, or Next.js static export to bake your pages at build time, your schema is frozen. Prices change, inventory runs out, event dates pass — but your schema still says what it said at build time. Google treats this mismatch as misleading content and can issue a manual action. Four: schema that reads cookies, localStorage, or session storage. User-specific schema, A/B test variants, anything personalized. Google's Web Rendering Service explicitly does not retain state across page loads. So your schema reads an empty cookie, renders wrong, and gets indexed wrong. The pattern: keep schema in Server Components, fetch data server-side, escape your output, and revalidate frequently if you use SSG.

Takeaways

Schema makes pages eligible for rich results and Knowledge Graph

Verified by Google. The AI search angle is mostly hype.
Not a ranking factor · not required for AI Overviews

Google says this explicitly. Don't oversell it.
Pick rendering based on which crawlers you need

Google & Bing: CSR can work (JS injection is documented), but SSR is safer. Everything else: server-render.
Validate before shipping

Google Rich Results Test · Schema Markup Validator · Search Console · @gsriram24/structured-data-validator for CI.

schema.org
developers.google.com/search/docs
nextjs.org/docs/app/guides/json-ld
search.google.com/test/rich-results

									npm: @gsriram24/structured-data-validator
								

Slides, links & socials

Questions?

Three takeaways. One: schema markup verifiably enables Google's rich result features — stars, recipe cards, Knowledge Graph entries. The AI search angle? Google says it's not required for AI Overviews. Don't oversell it to your team or stakeholders. Two: schema is not a ranking factor. Be honest about this when people ask. It enables features, not rankings. Three: for Google and Bing, CSR can work — even via JavaScript injection, which Google explicitly documents — but server-rendering is safer. For everything else — GPTBot, Perplexity, smaller crawlers — server-render. If you're starting fresh, default to Server Components in Next.js App Router. If you're stuck in CSR, use the JS injection pattern. Resources on screen. QR code links to my socials and slides. Thank you, and I'm happy to take questions.

Structured Data andSchema Markup

Same Website. Two Search Results.

What is Schema Markup?

Back to Our Example

Why Now: The AI Search Era

Schema markup only countsif crawlers can see it.

Who Can See What

Your Options, Ranked by Reliability

Rendering Pitfalls

Takeaways

Schema makes pages eligible for rich results and Knowledge Graph

Not a ranking factor · not required for AI Overviews

Pick rendering based on which crawlers you need

Validate before shipping

Structured Data and
Schema Markup

Schema markup only counts
if crawlers can see it.