Aeo schema client rendered
Moderate effortFound on 5% of audited stores.
Move your JSON-LD structured data from client-side JavaScript injection to server-rendered HTML so that AI crawlers and search engines can read it in the raw page source.
What it is
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.
Why it matters
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.
How to fix it
- Identify where your structured data is currently generated — look for JSON-LD injected via a JavaScript framework, a tag manager, a front-end component, or a third-party script.
- Move the JSON-LD block into the server-side template so it is output inside the raw HTML `<head>` or `<body>` before any JavaScript runs — the full `<script type="application/ld+json">…</script>` block must appear in the page source.
- Ensure all dynamic values (price, availability, review count, etc.) are populated server-side using your platform's template language (Liquid, PHP, Twig, etc.), not via a client-side fetch or DOM manipulation.
- Verify the fix by viewing the page source (Ctrl+U / Cmd+U) and confirming the `<script type="application/ld+json">` block appears in the raw HTML, not only in the browser's DevTools Elements panel.
- Paste the page URL into Google's Rich Results Test to confirm the schema is detected and valid.
- If you use a tag manager (GTM, Segment) to inject schema, replace that tag with a server-side template snippet — tag managers run JavaScript and are invisible to non-JS crawlers.
Fix it on your platform
Pick your platform for the exact steps.
How to fix aeo schema client rendered on Shopify
- In your Shopify admin go to Online Store → Themes → Actions → Edit Code.
- Open the relevant template file: product.liquid (or sections/main-product.liquid in Dawn and most modern themes) for product schema, or the equivalent section for other page types.
- Locate any existing JSON-LD block — if it is added by a JavaScript app or a <script> that builds schema dynamically in the browser, remove or disable it.
- Paste a server-rendered JSON-LD block directly into the template file using Liquid variables (e.g., {{ product.title | json }}, {{ product.price | money_without_currency }}) so the HTML is fully formed before it leaves Shopify's servers.
- Save the file, then view the live page source (Ctrl+U) and confirm the <script type="application/ld+json"> block is present in the raw HTML.
- If you use a schema app (e.g., JSON-LD for SEO, Schema Plus), check its settings — reputable apps write schema server-side via Shopify's ScriptTag API or theme injection; confirm 'server-side rendering' or 'theme injection' is enabled rather than a browser-side script.
How to fix aeo schema client rendered on WooCommerce
- In your WordPress admin go to Appearance → Theme File Editor (or use a child theme via FTP/SFTP).
- If you use an SEO plugin like Rank Math or Yoast SEO, check Settings → Structured Data / Schema — both plugins output schema server-side by default; ensure no conflicting JavaScript schema plugin is also active.
- If you are adding schema manually, open your theme's single-product template (woocommerce/single-product.php or the block template equivalent) and add the JSON-LD <script> block using PHP to echo dynamic values (get_the_title(), get_post_meta(), $product->get_price(), etc.).
- Alternatively, use the wp_head action hook in your child theme's functions.php to output the JSON-LD block server-side for every product page.
- Deactivate any plugin or GTM tag that injects schema via JavaScript, as these will duplicate or override the server-rendered version and may confuse crawlers.
- View the page source on a live product page and confirm the JSON-LD block is present before the closing </head> or in the <body>, with no JavaScript required to render it.
How to fix aeo schema client rendered on BigCommerce
- In your BigCommerce admin go to Storefront → My Themes → Advanced → Edit Theme Files (Stencil CLI is recommended for larger edits).
- Open templates/pages/product.html (or the relevant Handlebars template) and add the JSON-LD <script> block directly, using Handlebars expressions ({{product.name}}, {{product.price.without_tax.formatted}}, etc.) to inject dynamic values server-side.
- If you use the BigCommerce Page Builder or a third-party app for schema, verify in the page source that the schema appears without JavaScript execution — Page Builder widgets are typically client-rendered and are NOT suitable for schema injection.
- Remove or disable any GTM-based or JavaScript-based schema injection to avoid duplication.
- Push your theme changes and view the live page source to confirm the JSON-LD block appears in the raw HTML response.
How to fix aeo schema client rendered on Wix
- In the Wix Editor open your site and go to the page you want to add schema to.
- Click Add → Embed Code → Embed HTML (Custom Code) and place the JSON-LD block in the <head> section — IMPORTANT: use Wix's 'Add Custom Code' feature under Settings → Custom Code, NOT Velo (JavaScript) for schema, as Velo runs client-side.
- In the Wix dashboard go to Settings → Custom Code → click '+ Add Custom Code', paste your complete <script type="application/ld+json">…</script> block, select 'Head' as placement, and set it to load on the relevant pages.
- For dynamic product pages (Wix Stores), use the Wix SEO Wiz or Wix's built-in structured data support — Wix automatically outputs Product schema server-side for Wix Stores items; verify this is enabled under Store → Settings → SEO.
- View the page source to confirm the JSON-LD appears in the raw HTML. Note: Wix's custom code placed in 'Head' IS server-rendered; code injected via Velo's $w() or window events is NOT.
How to fix aeo schema client rendered on Squarespace
- In your Squarespace admin go to Settings → Advanced → Code Injection.
- Paste your complete <script type="application/ld+json">…</script> block into the 'Header' field — this is injected server-side into the <head> of every page.
- For page-specific schema (e.g., individual product pages), use a Code Block injected into that page's content area — note this is also server-rendered HTML, not JavaScript.
- Squarespace Commerce automatically outputs some Product schema server-side; to extend or replace it, use Code Injection rather than any third-party JavaScript snippet.
- View page source to confirm the JSON-LD block appears without needing to run JavaScript.
How to fix aeo schema client rendered on Webflow
- In the Webflow Designer select the page you want to edit and open Page Settings (the gear icon next to the page name in the Pages panel).
- Scroll to 'Custom Code' → 'Head Code' section and paste your complete <script type="application/ld+json">…</script> block there — Webflow renders this server-side in the published HTML.
- For CMS Collection pages (e.g., product detail pages), open the Collection Template's Page Settings and use Webflow CMS field bindings inside the JSON-LD values — you can manually reference field slugs like {{Name}}, {{Price}} using Webflow's Embed element with CMS bindings, which are rendered server-side.
- Do NOT use Webflow Interactions or custom JavaScript to inject schema dynamically — this creates client-rendered schema invisible to AI crawlers.
- Publish the site and view the page source to confirm the JSON-LD block appears in raw HTML.
How to fix aeo schema client rendered on Adobe Commerce (Magento)
- Locate the relevant layout XML file for the page type (e.g., catalog_product_view.xml in your theme's Magento_Catalog/layout/ directory).
- Add a <block> or <referenceContainer> entry that calls a PHP Block class responsible for rendering the JSON-LD <script> tag, using the product's data model ($product->getName(), $product->getFinalPrice(), etc.) to populate values server-side.
- Alternatively, create a .phtml template file in your theme (e.g., Magento_Catalog/templates/product/schema.phtml) that echoes the JSON-LD block using PHP, and reference it from the layout XML.
- If you use an SEO extension (e.g., Mageplaza SEO, Amasty SEO), check its configuration under Stores → Configuration → [Extension Name] → Structured Data and ensure 'Render Method' is set to server-side/PHP, not JavaScript.
- Run bin/magento cache:flush after making template changes, then view the page source to confirm the JSON-LD block is present in the raw HTML response.
How to fix aeo schema client rendered on Headless / Custom (I build in code)
- Ensure your JSON-LD block is rendered by the server framework (Next.js, Nuxt.js, Astro, etc.) during the server-side render (SSR) or static generation (SSG) pass — not in a useEffect, onMounted, or componentDidMount hook, which all run only in the browser.
- In Next.js: use the <Head> component from 'next/head' or the metadata API (App Router) inside your page component, and populate schema values from getServerSideProps or getStaticProps so the data is available at render time.
- In Nuxt.js: use useHead() in your page component and fetch product data server-side via useFetch() or useAsyncData() so schema values are populated during SSR.
- In Astro: place the <script type="application/ld+json"> block directly in the frontmatter/template section of your .astro file — Astro renders this statically by default.
- Confirm by running 'curl -s https://yoursite.com/your-page | grep application/ld+json' — the schema block must appear in the curl output (raw HTML), not only in a browser.
How to fix aeo schema client rendered on Next.js (Headless)
- 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.
- 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.
- 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)`.
- 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.
- 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.
- Validate the rendered markup with Google's Rich Results Test and Schema.org Validator to confirm the structured data is parseable.
Does your site have this issue?
Run a free SEOLZ scan to find aeo schema client rendered — and every other issue — across your whole site in minutes.
Scan my site freeFrequently asked questions
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.
Why does aeo schema client rendered matter?
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.
How do I fix aeo schema client rendered?
Move your JSON-LD structured data from client-side JavaScript injection to server-rendered HTML so that AI crawlers and search engines can read it in the raw page source.
Authoritative references
- Intro to structured data — Google Search Central
- Product structured data — Google Search Central
- Getting started with schema.org — Schema.org
- Rich Results Test — Google Search Central