Schema Markup JSON-LD (Urgent: Needs Solution)

[srs-shihab]

The Schema Markup JSON-LD is currently being placed inside the instead of the . Is this acceptable? If placement inside the is required, how can it be implemented at the page level? N.B.: I’m using Next.js 16.0.7 with the App Router.

[yajatkaul]

Im not sure if i get it correctly but if you are asking where u can put it, then u can put it in either the body or the head according to the docs
https://developers.google.com/search/docs/appearance/structured-data/intro-structured-data?utm_source=chatgpt.com#supported-formats

[srs-shihab]

is your schema generating inside head tag ?

[yajatkaul]

If you use <script type="application/ld+json"> in the page component it ends up in the body and google supports both the head and the body, otherwise if u want to put it in head u could refer https://nextjs.org/docs/app/api-reference/functions/generate-metadata.
But doesn't really matter where u put it i suppose

[srs-shihab]

thanks a lot for your time and answer .

[yajatkaul]

could u please close this discussion now :)

[tamish-max]

Yes — JSON-LD in the <body> is acceptable. Google supports structured data in either head or body, so this is not a Next.js/App Router SEO problem.

In App Router the simplest page-level pattern is:

export default async function ProductPage() {
  const jsonLd = {
    '@context': 'https://schema.org',
    '@type': 'Product',
    name: 'Example product',
  }

  return (
    <>
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{
          __html: JSON.stringify(jsonLd).replace(/</g, '\\u003c'),
        }}
      />
      <ProductView />
    </>
  )
}

That script will usually end up in the rendered body, and that is fine. If the schema needs to vary per page, this approach is usually easier than trying to force it through the metadata API.

[krisdiallo]

On the body vs head question: JSON-LD in works for AI crawlers — they read the raw HTML wherever the schema appears, not just in . So if you can only place it in body, that's fine.

The more important question for App Router: is it server-rendered or client-injected?

If you're placing the JSON-LD via a client component (use client) or a useEffect, it only appears after JavaScript runs. AI crawlers (OAI-SearchBot, PerplexityBot, Claude-SearchBot) don't run JS — so they never see it. That's the #1 defect we found in a 70-brand survey: structured data injected by JS looks perfect in dev tools but is completely absent from what a crawler receives.

The fix for App Router: render the JSON-LD server-side. Put it in a server component (no use client directive) or pass the product data through a server-rendered script tag. The data must be in the HTML before hydration, not injected after.

How to test: view-source on your page (not Inspect — Inspect runs JS). Search for application/ld+json. If it's in the source HTML, AI crawlers can read it. If it's only visible in Inspect, it's JS-injected and invisible to them.

The ready-to-paste component and fix guide: github.com/krisdiallo/ecom-agent/tree/main/products/03-geo-implementation-kit