How to fix aeo schema client rendered on Next.js (Headless)

Steps for Next.js (Headless)

1. Locate every place JSON-LD is currently injected client-side (e.g. inside a useEffect, a dangerouslySetInnerHTML block mounted in a Client Component, or a third-party tag-manager call) and delete those injections.
2. For the App Router: open (or create) the relevant page or layout file (e.g. app/products/[slug]/page.tsx). Add a server-side `generateMetadata` export if you need <meta> tags, then drop a native Next.js `<Script>` (or a plain `<script>`) tag with `type='application/ld+json'` directly in the JSX return — no 'use client' directive on this file.
3. For the Pages Router: open the page file (e.g. pages/products/[slug].tsx). Inside `getStaticProps` or `getServerSideProps`, fetch the product data and pass it as props. In the component, render a `<script type='application/ld+json'>` tag inside `<Head>` from 'next/head', using `dangerouslySetInnerHTML` with `JSON.stringify(jsonLd)`.
4. Build the JSON-LD object on the server using the props/data already fetched for the page — never reconstruct it in a useEffect or onClick handler.
5. Run `next build && next start`, then use 'View Page Source' (not DevTools Elements) to confirm the <script type='application/ld+json'> block appears in the raw HTML before any JS executes.
6. Validate the rendered markup with Google's Rich Results Test and Schema.org Validator to confirm the structured data is parseable.

What is aeo schema client rendered?

Structured data (also called schema markup) is a block of code — usually written in JSON-LD format inside a `<script type="application/ld+json">` tag — that tells search engines and AI systems exactly what your page is about: the product name, price, reviews, breadcrumbs, and more. "Client-rendered" means this code is injected into the page by JavaScript after the browser loads, rather than being baked into the HTML that the server sends. The problem is that many crawlers — especially AI-powered ones like GPTBot (ChatGPT), ClaudeBot (Anthropic), and PerplexityBot — fetch your raw HTML and never run JavaScript, so they never see the schema at all.

AI answer engines (ChatGPT, Perplexity, Claude, Google's AI Overviews) increasingly pull structured product data directly from your page to populate citations, shopping answers, and summaries. If your schema only exists after JavaScript runs, these crawlers see a blank — meaning your products are invisible to AI-driven discovery, costing you valuable citation traffic. Traditional search engines like Google also prefer server-rendered schema; client-rendered schema is never guaranteed to be indexed, putting your rich results (star ratings, price drops, availability badges) at risk and reducing your click-through rates from organic search.

See the complete Aeo schema client rendered guide for every platform and the full background.