Seo product content client rendered

Larger project

Found on 26% of audited stores.

Server-render your product descriptions in the initial HTML so that all crawlers — including Google, AI search bots, and social media scrapers — can read your content without executing JavaScript.

What it is

Modern ecommerce themes often load product descriptions, reviews, and images dynamically using JavaScript — meaning the page's raw HTML (the first file the server sends) arrives nearly empty, and your actual content only appears after a browser runs the JS code. This pattern is called "client-side rendering." Server-side rendering (SSR) is the opposite: the server sends back a fully built HTML page with all your content already written into it. When a crawler or bot visits your page, it reads that raw HTML file. If your content isn't there, the bot sees a blank product page — even if a human visitor with a browser sees everything perfectly.

Why it matters

Google's own documentation states it can take days or weeks before it revisits a page to render JavaScript — meaning your product descriptions may be invisible to Google's index for extended periods, costing you ranking and organic traffic. AI-powered search tools like ChatGPT Search (GPTBot), Claude (ClaudeBot), and Perplexity (PerplexityBot) fetch only raw HTML and never execute JavaScript at all, so a client-rendered product is completely invisible to these fast-growing traffic sources. Shoppers arriving from AI-generated answers or rich snippets convert at extremely high rates; losing that channel directly costs revenue. Social media preview cards (Open Graph) also rely on raw HTML, so your products will show blank or broken previews when shared on Facebook, Pinterest, or X, reducing click-through from social traffic too.

How to fix it

  1. Audit your raw HTML: use 'curl -A "Googlebot" https://yourstore.com/products/example' or the URL Inspection tool in Google Search Console to see what a crawler actually receives — if your description is missing, you have a client-rendering problem.
  2. Choose a rendering strategy: full Server-Side Rendering (SSR) is ideal; Static Site Generation (SSG/pre-rendering) works equally well for product pages that don't change by the second; a Prerender.io-style middleware service is a viable workaround for existing setups you cannot refactor.
  3. Ensure the product description text, price, availability, and any structured data (Product JSON-LD) are all written into the initial HTML response — not injected by JavaScript after load.
  4. Add a Product JSON-LD block to the <head> of each product page that includes at minimum: name, description, image, sku, offers (price, priceCurrency, availability), and brand — also embedded in the initial HTML, not injected by JS.
  5. Re-validate with Google Search Console's URL Inspection tool ('Test Live URL' → 'View Tested Page' → 'HTML' tab) to confirm the description and JSON-LD appear in the raw HTML before any JavaScript runs.
  6. Monitor Google Search Console's Index Coverage and Rich Results Test over the following weeks to confirm product pages are being indexed with descriptions and structured data.

Fix it on your platform

Pick your platform for the exact steps.

How to fix seo product content client rendered on Shopify
  1. Shopify's Liquid templating engine is server-rendered by default — if your product descriptions are missing from raw HTML, a third-party app or custom JavaScript in your theme is the culprit.
  2. Go to Online Store → Themes → Actions → Edit Code. Open templates/product.liquid (or sections/product-template.liquid / sections/main-product.liquid depending on your theme).
  3. Locate where the description is output. It should read {{ product.description }} inside the Liquid file — NOT loaded via a fetch() call in a .js file. If it is loaded via JS, move the output back to the Liquid template.
  4. To add Product JSON-LD, open or create snippets/product-jsonld.liquid, paste the JSON-LD snippet (see code_snippets below), and include it in your product template with {% render 'product-jsonld', product: product %}. This renders the JSON-LD on the server inside the <head>.
  5. Never place structured data inside a script tag that is itself injected by JavaScript — it must be a static Liquid-rendered <script type='application/ld+json'> block.
  6. Use the Shopify Theme Inspector Chrome extension or Google Search Console's URL Inspection → View Tested Page → HTML tab to confirm the description and JSON-LD appear before JS runs.
Full Shopify guide →Official Shopify docs ↗
How to fix seo product content client rendered on WooCommerce
  1. WooCommerce renders product pages via PHP (server-side) by default. If your description is missing from raw HTML, a page builder (Elementor, Divi, WPBakery) with AJAX-loading or a headless/React front-end is causing the issue.
  2. For standard themes: verify the short description and full description are output inside single.php or woocommerce/templates/single-product/description.php — not loaded via AJAX.
  3. If using Elementor or another builder, ensure the Product Description widget is placed statically, not inside a lazy-loaded section (disable 'Load More' AJAX on that container).
  4. For Product JSON-LD: WooCommerce outputs its own basic JSON-LD. Enhance it with the free Rank Math or Yoast SEO plugin — both inject server-rendered Product schema including description, price, and availability into the <head> via PHP, not JavaScript.
  5. In Rank Math: Settings → Titles & Meta → WooCommerce → enable 'Product Schema'. In Yoast: Yoast SEO → Search Appearance → WooCommerce (requires Yoast WooCommerce SEO add-on).
  6. Verify with: curl -s https://yourstore.com/product/example | grep -i 'description' — your product description text must appear in the output.
Full WooCommerce guide →Official WooCommerce docs ↗
How to fix seo product content client rendered on BigCommerce
  1. BigCommerce's Stencil themes use Handlebars.js server-side templating — product descriptions render server-side by default.
  2. In the BigCommerce Control Panel, go to Storefront → My Themes → Advanced → Edit Theme Files. Navigate to templates/pages/product.html.
  3. Find {{{product.description}}} — the triple-brace syntax outputs raw HTML server-side. If this is missing or replaced by a custom JS fetch, restore it.
  4. For Product JSON-LD, locate or create templates/components/schema/product.html. BigCommerce Stencil automatically outputs basic Product schema. Enhance it by editing that file directly to add the description field: add '"description": "{{product.description}}"' inside the JSON-LD object.
  5. If you are using a headless BigCommerce setup (React/Next.js storefront), you must implement SSR or SSG via Next.js getServerSideProps or getStaticProps to pre-render product data into the HTML.
  6. Preview changes with Stencil CLI locally, then apply to the live theme. Validate with Google Rich Results Test or the URL Inspection tool.
Full BigCommerce guide →Official BigCommerce docs ↗
How to fix seo product content client rendered on Wix
  1. Wix renders product pages server-side for its native Wix Stores product pages — these are generally crawlable without action.
  2. If you have a custom Wix Velo (formerly Corvid) setup that fetches and displays product data using $w.onReady() and dynamic imports, Google may miss the content during fast crawls.
  3. In Wix Studio / Editor: go to your Product Page template. Ensure the Product Description element is added from the Wix Stores widgets panel (not a plain text box populated by Velo fetch). The native widget is server-rendered.
  4. For structured data: Wix automatically generates Product JSON-LD for Wix Stores product pages. Verify it is present using Google Search Console → URL Inspection on a product URL.
  5. If you need to add or enrich JSON-LD, use Wix's SEO Settings panel: go to the product page in the Editor, open Page Settings → SEO, and add custom structured data in the 'Additional Tags' (structured data) field — Wix injects this server-side.
  6. Do NOT add JSON-LD via a Velo $w script that runs client-side — it will not be seen by crawlers.
Full Wix guide →Official Wix docs ↗
How to fix seo product content client rendered on Squarespace
  1. Squarespace renders product pages server-side; descriptions entered in the Product editor are included in the initial HTML.
  2. Go to Pages → [Your Shop] → click a product → Edit. Enter your full product description in the Description field. Squarespace outputs this server-side automatically.
  3. For JSON-LD: Squarespace automatically adds Product structured data to store product pages. To verify: Pages → [Product Page] → SEO tab — check the preview. Use Google Rich Results Test with your product URL to confirm.
  4. If you are using Code Injection (Settings → Advanced → Code Injection) to load descriptions via JavaScript, move the content into the native Squarespace Description field instead — JS-injected content is not server-rendered.
  5. To add enriched JSON-LD (e.g., adding a description field Squarespace omits), go to the product page → Edit → Settings → Advanced → Page Header Code Injection and paste a complete <script type='application/ld+json'> block. Squarespace injects this in the server-rendered HTML.
  6. Validate at search.google.com/test/rich-results using your live product URL.
Full Squarespace guide →Official Squarespace docs ↗
How to fix seo product content client rendered on Webflow
  1. Webflow CMS renders Collection pages (including ecommerce product pages) server-side using its CMS bindings — descriptions bound to a CMS field are in the initial HTML.
  2. In the Webflow Designer, open your Product Template page. Select the text block showing the product description and confirm it is bound to the Product Description CMS field (purple 'Connected' indicator). If it is not bound (plain static text or set via custom JS), bind it to the CMS field.
  3. For Product JSON-LD: Webflow does not auto-generate Product schema. Add it manually by placing an Embed element inside the <head> using Page Settings → Custom Code → Head Code. Use the Webflow CMS field reference syntax (e.g., {{wf {"path":"description"} }}) to dynamically insert values server-side. See code snippet below.
  4. Alternatively, use the Relume or Slater integration, or a Webflow App like 'Schema App' or 'NoCodeMonkey Structured Data' which inject server-rendered JSON-LD.
  5. Publish the site and validate with Google Search Console URL Inspection → View Tested Page → HTML tab — description text and JSON-LD must appear in the raw HTML output.
  6. Do NOT add JSON-LD via a <script> that uses fetch() or document.querySelector() to read product data — this runs client-side and is invisible to crawlers.
Full Webflow guide →Official Webflow docs ↗
How to fix seo product content client rendered on Adobe Commerce (Magento)
  1. Adobe Commerce (Magento 2) renders product pages server-side via PHP/PHTML by default. If descriptions are missing from raw HTML, a PWA Studio (Venia) or custom React/Vue headless front-end is the cause.
  2. For standard Luma/Blank themes: the product description is rendered in app/design/frontend/[Vendor]/[Theme]/Magento_Catalog/templates/product/view/description.phtml. Confirm {{ product.getDescription() }} output exists in the server response.
  3. For PWA Studio (Venia): switch from client-side fetching to SSR or implement full-page caching with pre-rendered HTML. Adobe recommends using Fastly or Varnish with ESI (Edge Side Includes) to cache server-rendered product HTML.
  4. For Product JSON-LD: install a schema markup extension such as 'MagePlaza SEO' or 'Amasty SEO' — both inject Product schema via PHP into the page <head> server-side. Alternatively, add a custom PHTML block in the head.additional block of your layout XML that outputs the JSON-LD using PHP-rendered product data.
  5. In layout XML (catalog_product_view.xml): add a block of type Magento\Framework\View\Element\Template pointing to a .phtml file that echoes a complete JSON-LD script tag populated with $product->getName(), $product->getDescription(), etc.
  6. Verify with: curl -A 'Googlebot' https://yourstore.com/product-url.html | grep 'application/ld+json' — the JSON-LD must appear in the curl output.
Full Adobe Commerce (Magento) guide →Official Adobe Commerce (Magento) docs ↗
How to fix seo product content client rendered on Next.js
  1. If your storefront is built on Next.js (headless Shopify, headless BigCommerce, custom), use getStaticProps (SSG) for product pages that don't change in real-time, or getServerSideProps (SSR) for pages requiring live inventory/pricing.
  2. In your [product].js or [handle].js page file, fetch product data inside getStaticProps or getServerSideProps and pass it as props — Next.js will render this into the HTML before it reaches the browser.
  3. In the page component, render <p>{product.description}</p> directly from props (not from a client-side useEffect fetch) so the description is in the server-rendered HTML.
  4. Add Product JSON-LD using Next.js's <Head> component or the next-seo library's ProductJsonLd component — both render into the <head> server-side.
  5. For App Router (Next.js 13+): use async Server Components — fetch product data directly in the component body (no useEffect), which renders on the server. Use the metadata API for structured data if needed.
  6. Validate with 'curl https://yourstore.com/products/example | grep description' — both the text and JSON-LD must appear in the plain HTML output.
Full Next.js guide →Official Next.js docs ↗
How to fix seo product content client rendered on Custom React / Next.js
  1. Render product pages with SSR or SSG (Next.js getServerSideProps / getStaticProps / RSC), not client-only fetching in useEffect.
  2. Emit the Product JSON-LD (including a description) in the server HTML.
  3. Verify the description is in the raw response via `curl` or View Source.
Full Custom React / Next.js guide →Official Custom React / Next.js docs ↗
How to fix seo product content client rendered on Any (prerender fallback)
  1. If you can't move to SSR quickly, add a prerender/dynamic-rendering layer (e.g. Prerender.io) that serves rendered HTML to bots.
  2. Ensure it serves the same content to AI crawlers (GPTBot, ClaudeBot, PerplexityBot), not just Googlebot.
Full Any (prerender fallback) guide →Official Any (prerender fallback) docs ↗
How to fix seo product content client rendered on Next.js (Headless)
  1. Locate your product page component. In the App Router it lives at app/products/[slug]/page.tsx; in the Pages Router it lives at pages/products/[slug].tsx. Confirm the product description is currently fetched client-side (inside a useEffect, SWR call, or similar).
  2. App Router: Convert the page to an async React Server Component (RSC) and fetch product data directly inside the component body using your commerce API/SDK. Remove any 'use client' directive from the page file itself. Pages Router: Replace any client-side fetch with getStaticProps (preferred for SSG) or getServerSideProps (for SSR), returning the product description as a prop.
  3. Render the description directly in the JSX returned by the server component / page — e.g. <div dangerouslySetInnerHTML={{ __html: product.descriptionHtml }} /> or a plain <p>{product.description}</p>. This guarantees the text is present in the initial HTML payload served to crawlers.
  4. If rich/HTML descriptions are used, sanitize the markup server-side with a library such as `isomorphic-dompurify` before passing it to dangerouslySetInnerHTML, keeping XSS risk zero.
  5. Add structured data (JSON-LD) for the product in the same server component using a <script type='application/ld+json'> tag so AI and social scrapers also get machine-readable content.
  6. Verify the fix: run `curl -s https://your-domain.com/products/your-slug | grep -i 'description'` — the description text must appear in the raw HTML response, not be empty.
Full Next.js (Headless) guide →Official Next.js (Headless) docs ↗

Does your site have this issue?

Run a free SEOLZ scan to find seo product content client rendered — and every other issue — across your whole site in minutes.

Scan my site free

Frequently asked questions

What is Seo product content client rendered?

Modern ecommerce themes often load product descriptions, reviews, and images dynamically using JavaScript — meaning the page's raw HTML (the first file the server sends) arrives nearly empty, and your actual content only appears after a browser runs the JS code. This pattern is called "client-side rendering." Server-side rendering (SSR) is the opposite: the server sends back a fully built HTML page with all your content already written into it. When a crawler or bot visits your page, it reads that raw HTML file. If your content isn't there, the bot sees a blank product page — even if a human visitor with a browser sees everything perfectly.

Why does seo product content client rendered matter?

Google's own documentation states it can take days or weeks before it revisits a page to render JavaScript — meaning your product descriptions may be invisible to Google's index for extended periods, costing you ranking and organic traffic. AI-powered search tools like ChatGPT Search (GPTBot), Claude (ClaudeBot), and Perplexity (PerplexityBot) fetch only raw HTML and never execute JavaScript at all, so a client-rendered product is completely invisible to these fast-growing traffic sources. Shoppers arriving from AI-generated answers or rich snippets convert at extremely high rates; losing that channel directly costs revenue. Social media preview cards (Open Graph) also rely on raw HTML, so your products will show blank or broken previews when shared on Facebook, Pinterest, or X, reducing click-through from social traffic too.

How do I fix seo product content client rendered?

Server-render your product descriptions in the initial HTML so that all crawlers — including Google, AI search bots, and social media scrapers — can read your content without executing JavaScript.

Related SEO issues