Seo product price not in html

Moderate effort

Found on 22% of audited stores.

Render your product price in the server-generated HTML so Google and other crawlers can read it directly — without executing JavaScript.

What it is

Every time Google visits your product page, it downloads the raw HTML first. If your price is only inserted by JavaScript after the page loads, that raw HTML contains no price — Google either sees a blank, a placeholder, or nothing at all. "Price not in static HTML" means the dollar amount a shopper sees in their browser is missing from the underlying HTML source that search engines (and other non-JS tools) receive. The fix is to have your server write the actual price directly into the HTML before it is sent to the browser, a technique called server-side rendering (SSR).

Why it matters

Google uses prices in product rich results (the star-rating + price snippets shown directly in search results), and it relies on reading that price from your page's HTML or your structured data. If the price is invisible to the crawler, your products are disqualified from those rich result enhancements — meaning less visual prominence and lower click-through rates in search. Beyond rich results, Google's own documentation confirms that while Googlebot can render JavaScript, there is a delay and crawl-budget cost; JS-rendered prices are indexed later or sometimes not at all, causing price mismatches that erode shopper trust. Missing prices also break price-comparison scrapers, affiliate tools, and shopping feed integrations that depend on static HTML. For competitive product categories, every missed rich result is direct revenue lost to a competitor whose price is correctly surfaced.

How to fix it

  1. Audit the issue: view the page source (Ctrl+U / Cmd+U in your browser) and search for the price string. If it is absent from source but visible on screen, it is JS-only.
  2. Check your theme or page templates to find where the price HTML is generated. Look for template files, Liquid snippets, PHP templates, or a JavaScript component that fetches price data from an API.
  3. Move price rendering to the server layer: the price value must be written into the HTML <span> or <div> during template rendering, before the response is sent to the browser. Use your platform's native price variable (e.g. {{ product.price }} in Liquid, wc_price() in WooCommerce).
  4. Add or update Product structured data (JSON-LD) on the same page so the price also appears in machine-readable schema markup — this is what powers Google rich results.
  5. Verify the fix by reloading the page, viewing source, and confirming the price string appears. Also test with Google's Rich Results Test and the URL Inspection tool in Google Search Console.
  6. If prices are personalised or currency-switched client-side, ensure the default/base price is always in the initial HTML; let JS update it after load without removing the static fallback.

Fix it on your platform

Pick your platform for the exact steps.

How to fix seo product price not in html on Shopify
  1. In your Shopify Admin go to Online Store → Themes → current theme → Edit code.
  2. Open sections/main-product.liquid (or templates/product.liquid on older themes).
  3. Locate the price block. Shopify's Dawn theme uses a snippet: snippets/price.liquid. Ensure the price is output via Liquid, e.g. {{ product.selected_or_first_available_variant.price | money }}.
  4. If your theme uses a JavaScript framework (e.g. a custom React/Vue storefront) that fetches price via the Storefront API, you must move that fetch to a server component or use Hydrogen's server-rendering. For standard Liquid themes this is already server-rendered — confirm no JS is overwriting the element before the initial HTML paint.
  5. For structured data, open or create snippets/structured-data.liquid and add a JSON-LD Product schema block that includes the 'offers' property with 'price' populated by Liquid variables (see code snippet below). Include this snippet in theme.liquid inside <head>.
  6. Preview the page, view source (Cmd+U), and search for the price value to confirm it is present in raw HTML.
Full Shopify guide →Official Shopify docs ↗
How to fix seo product price not in html on Shopify Plus
  1. Follow the same steps as Shopify above. Shopify Plus uses the same Liquid theme system.
  2. If you have a custom Hydrogen (React Server Components) storefront, ensure the ProductPrice component is rendered as a Server Component so the price is included in the server-rendered HTML stream.
  3. Use the Shopify Rich Results app or manually maintain JSON-LD structured data in your theme's snippets for the 'offers' price property.
Full Shopify Plus guide →Official Shopify Plus docs ↗
How to fix seo product price not in html on WooCommerce
  1. WooCommerce renders prices server-side by default via PHP templates. If prices appear blank in source, a plugin (e.g. a price-personalisation or currency-switcher plugin) may be replacing them with JS.
  2. Go to WP Admin → Appearance → Theme File Editor (or use a child theme) and open woocommerce/single-product/price.php. Confirm it uses wc_price( $product->get_price() ) — this is a PHP (server-side) call.
  3. If a plugin is the culprit, check its settings for a 'server-side rendering' or 'initial price in HTML' option, or replace it with one that preserves static HTML prices.
  4. For structured data, install a plugin such as Rank Math SEO or Yoast SEO (with WooCommerce SEO add-on) — these automatically inject Product JSON-LD with the 'offers' price block into server-rendered HTML.
  5. Verify by viewing page source and searching for the numeric price value.
Full WooCommerce guide →Official WooCommerce docs ↗
How to fix seo product price not in html on BigCommerce
  1. In BigCommerce Admin go to Storefront → My Themes → Edit Theme Files (Stencil themes).
  2. Open templates/components/products/price.html (Stencil). Prices are rendered via Handlebars server-side using {{product.price.without_tax.formatted}} or similar. Confirm these expressions are present and not commented out.
  3. If you have a headless BigCommerce storefront (e.g. Next.js), move price fetching from a client component to a Server Component or use getServerSideProps / generateMetadata to embed the price in the initial HTML.
  4. For JSON-LD structured data, BigCommerce Stencil themes include a schema partial at templates/components/schema.html — ensure the 'offers' → 'price' field is populated with the Handlebars price variable.
  5. Preview via 'View Page Source' and confirm the price string is present.
Full BigCommerce guide →Official BigCommerce docs ↗
How to fix seo product price not in html on Wix
  1. Wix eCommerce product pages render prices server-side by default. If a price is missing from HTML, it is likely because a custom Velo (Wix Code) script is hiding and then replacing the price element.
  2. Open the Wix Editor → click the product price element → check Connected Data and ensure it is bound to the product price field from the Wix Stores dataset (not fetched in $w.onReady via a client-side API call).
  3. For Wix Studio (Velo) custom pages: ensure the price is set on the element during the server-side rendering phase using the beforeRender hook where available, or pre-populate the element value before page load rather than after.
  4. For structured data on Wix: go to Settings → SEO → Structured Data Markup; Wix Stores automatically injects Product schema with price for standard product pages. For custom pages, use the Structured Data Markup tool to add JSON-LD manually.
  5. Use Google's Rich Results Test with your live product URL to confirm the price is parsed correctly.
Full Wix guide →Official Wix docs ↗
How to fix seo product price not in html on Wix eCommerce
  1. Standard Wix eCommerce product pages output price in server HTML automatically. Verify by right-clicking the live product page → View Page Source and searching for the price value.
  2. If missing, check for any Velo scripts ($w.onReady) that call wixStores.getProduct() and overwrite the displayed price — replace with a data-binding approach so the price is in the initial render.
  3. Confirm the built-in Wix Product structured data (visible in Rich Results Test) includes the 'offers' price field.
Full Wix eCommerce guide →Official Wix eCommerce docs ↗
How to fix seo product price not in html on Squarespace
  1. Squarespace Commerce product pages are server-rendered and prices are output in static HTML by default. If the price is missing from source, a custom code block or third-party script is likely replacing it.
  2. Go to Pages → your product page → Edit. Remove or inspect any Custom Code blocks (Insert Point → Code Block) that manipulate the price element via JavaScript.
  3. For structured data, Squarespace automatically generates JSON-LD Product markup including price for Commerce product pages. Confirm by using Google's Rich Results Test on a live product URL.
  4. If you have injected custom code via Settings → Advanced → Code Injection, review that code to ensure it does not defer or replace price rendering.
Full Squarespace guide →Official Squarespace docs ↗
How to fix seo product price not in html on Squarespace Commerce
  1. Same as Squarespace above — Commerce product pages inherit server-rendered prices from the Squarespace product data model.
  2. Ensure the product has a price set in the Commerce → Products → [product] → Pricing field. A $0.00 or blank price in the database will result in no visible price in HTML.
  3. Validate with Google Rich Results Test.
Full Squarespace Commerce guide →Official Squarespace Commerce docs ↗
How to fix seo product price not in html on Webflow
  1. In Webflow Designer, open the Product Template page (eCommerce → Product Template).
  2. Ensure a Product Price element (Insert → eCommerce → Product Price) is placed on the canvas and bound to the product's Price field — Webflow outputs this as static HTML at publish time.
  3. Do NOT replace the native Price element with a plain text element whose content is set via custom JavaScript — this would make it JS-only.
  4. For JSON-LD structured data, Webflow does not auto-generate Product schema. Add it via Project Settings → Custom Code → Head Code or via a Page Settings → Custom Code block. Use a Webflow CMS-bound embed with dynamic fields if prices vary (see code snippet below).
  5. After publishing, view page source and confirm the price string is present in the HTML.
Full Webflow guide →Official Webflow docs ↗
How to fix seo product price not in html on Webflow Commerce
  1. Same as Webflow above. Use the native eCommerce Product Price component in the Product Template so Webflow's publish pipeline writes the price into static HTML.
  2. Verify structured data with Google's Rich Results Test after publishing.
Full Webflow Commerce guide →Official Webflow Commerce docs ↗
How to fix seo product price not in html on Adobe Commerce (Magento)
  1. Magento renders prices via PHP .phtml templates. The core template is vendor/magento/module-catalog/view/frontend/templates/product/price/ (or your theme override in app/design/frontend/<Vendor>/<Theme>/Magento_Catalog/templates/product/price/).
  2. Confirm the price block uses the PHP price renderer (\Magento\Framework\Pricing\Render) rather than being fetched via an AJAX/JS call after load.
  3. If Full Page Cache (FPC) with Varnish is enabled and prices are personalised (e.g. B2B tier pricing), Magento uses 'price box' placeholder + JS to inject prices for cache-hit pages. For SEO, configure the default/guest price to be present in the initial HTML by setting the price render to output for non-logged-in users statically.
  4. For structured data, install an SEO extension (e.g. Mageplaza SEO, Amasty SEO Toolkit) that injects Product JSON-LD with 'offers' price into the server-rendered <head>, or add it manually to your product.phtml template.
  5. Verify with: curl -A 'Googlebot' https://yourstore.com/product-url | grep -o '[0-9]\.[0-9]' to check the raw response contains the price.
Full Adobe Commerce (Magento) guide →Official Adobe Commerce (Magento) docs ↗
How to fix seo product price not in html on Magento Open Source
  1. Follow the same steps as Adobe Commerce (Magento) above — the template and rendering pipeline are identical.
  2. Use app/design/frontend/<Vendor>/<Theme>/Magento_Catalog/templates/product/price/final_price.phtml to override price rendering if needed.
  3. Add JSON-LD Product schema with price via a layout XML update (catalog_product_view.xml) that adds a new block rendering the JSON-LD partial.
Full Magento Open Source guide →Official Magento Open Source docs ↗
How to fix seo product price not in html on PrestaShop
  1. PrestaShop renders prices via Smarty templates. Open themes/<your-theme>/templates/catalog/product.tpl and locate the price display block.
  2. Ensure the price is output using the native Smarty variable {$product.price} (or {$product.regular_price}) directly in the template — not loaded via an AJAX call.
  3. For JSON-LD structured data, PrestaShop 1.7+ includes a structured data hook. Go to Modules → Module Manager → search for 'ps_structureddata' — enable it. This module outputs Product schema including price in server HTML.
  4. View page source after clearing cache (Advanced Parameters → Performance → Clear Cache) and confirm price is present.
Full PrestaShop guide →Official PrestaShop docs ↗
How to fix seo product price not in html on OpenCart
  1. OpenCart renders prices via PHP template files. Open catalog/view/theme/<your-theme>/template/product/product.twig (OpenCart 3+) and confirm the price is output via {{ price }} — a server-side PHP variable.
  2. If a 3rd-party extension replaced the price with a JS-rendered element, revert to the core template or configure the extension to output the price server-side.
  3. For JSON-LD, install an SEO extension from the OpenCart Marketplace that adds Product structured data (e.g. OpenCart SEO Extension by OpenCart.com) and outputs price in the 'offers' property.
  4. Verify by viewing page source.
Full OpenCart guide →Official OpenCart docs ↗
How to fix seo product price not in html on Headless / Custom (I build in code)
  1. If using Next.js: move price fetching into getServerSideProps (Pages Router) or a Server Component (App Router) so the price is serialised into the initial HTML payload.
  2. If using Nuxt.js: use asyncData or useFetch in a server context so the price is part of the SSR output.
  3. If using Astro: fetch price data at build time or request time in the frontmatter (---) section, then output it in the template markup — Astro ships zero JS by default so this is naturally static.
  4. In all cases, also inject a JSON-LD <script type='application/ld+json'> Product schema block into <head> during server rendering with the 'offers' → 'price' field populated.
  5. Verify with: curl https://yourstore.com/product-url | grep '<price-string>' to confirm the value is in the raw HTTP response.
Full Headless / Custom (I build in code) guide →Official Headless / Custom (I build in code) docs ↗
How to fix seo product price not in html on Next.js (Headless)
  1. Locate your product page component — typically `app/products/[slug]/page.tsx` (App Router) or `pages/products/[slug].tsx` (Pages Router). Confirm that the price is currently fetched only on the client (e.g. inside a `useEffect` or a client component), making it invisible to crawlers.
  2. Move the price fetch to the server: in the App Router use an `async` Server Component and `fetch`/your commerce SDK directly in the component body; in the Pages Router use `getStaticProps` or `getServerSideProps` and pass `price` as a prop.
  3. Render the price value in JSX inside a semantic element (e.g. `<span>` with an appropriate `aria-label`) so it appears in the initial HTML payload — not injected after hydration.
  4. Add a `Product` JSON-LD block (using Next.js `<Script type='application/ld+json'>` in the App Router, or a `<script>` tag via `next/head` in the Pages Router) that includes `offers.price` and `offers.priceCurrency` so structured-data parsers also pick up the price.
  5. Run `curl -s 'https://your-domain/products/your-slug' | grep -i 'price'` or use Google's Rich Results Test to verify the price appears in raw HTML before any JS executes.
  6. If the price can change frequently, prefer `getServerSideProps` (Pages) or a short `revalidate` in `fetch()` (App Router) so the server-rendered price stays fresh.
Full Next.js (Headless) guide →Official Next.js (Headless) docs ↗
How to fix seo product price not in html on Gatsby
  1. In gatsby-node.js (or the File System Route API file src/pages/products/{Product.slug}.jsx), ensure each product page is created at BUILD TIME via createPages or the FSR API, pulling price data from your commerce API/CMS so it is available as page context or as a GraphQL node.
  2. In your product page template (e.g. src/templates/product.jsx or src/pages/products/{Product.slug}.jsx), export a GraphQL page query (or use pageContext) that includes the price fields — amount, currencyCode, compareAtPrice — so Gatsby injects them as props.data or props.pageContext at SSG time.
  3. Replace any client-side-only price rendering (useEffect, useState, dynamic fetch after hydration) with direct use of the price value coming from props.data / props.pageContext, so the price is present in the static HTML Gatsby outputs.
  4. Render the price inside semantic HTML — a <span> or <p> with a machine-readable itemprop='price' attribute — so both crawlers and screen-readers can consume it without JS.
  5. Add JSON-LD Product structured data via Gatsby Head API (exported Head function) or react-helmet, including 'offers.price' and 'offers.priceCurrency', so Google's Rich Results can also pick up the price.
  6. Run gatsby build && gatsby serve and inspect the page source (Ctrl+U / View Source, NOT DevTools Elements) to confirm the price string appears in the raw HTML before any JS executes.
Full Gatsby guide →Official Gatsby docs ↗

Does your site have this issue?

Run a free SEOLZ scan to find seo product price not in html — and every other issue — across your whole site in minutes.

Scan my site free

Frequently asked questions

What is Seo product price not in html?

Every time Google visits your product page, it downloads the raw HTML first. If your price is only inserted by JavaScript after the page loads, that raw HTML contains no price — Google either sees a blank, a placeholder, or nothing at all. "Price not in static HTML" means the dollar amount a shopper sees in their browser is missing from the underlying HTML source that search engines (and other non-JS tools) receive. The fix is to have your server write the actual price directly into the HTML before it is sent to the browser, a technique called server-side rendering (SSR).

Why does seo product price not in html matter?

Google uses prices in product rich results (the star-rating + price snippets shown directly in search results), and it relies on reading that price from your page's HTML or your structured data. If the price is invisible to the crawler, your products are disqualified from those rich result enhancements — meaning less visual prominence and lower click-through rates in search. Beyond rich results, Google's own documentation confirms that while Googlebot can render JavaScript, there is a delay and crawl-budget cost; JS-rendered prices are indexed later or sometimes not at all, causing price mismatches that erode shopper trust. Missing prices also break price-comparison scrapers, affiliate tools, and shopping feed integrations that depend on static HTML. For competitive product categories, every missed rich result is direct revenue lost to a competitor whose price is correctly surfaced.

How do I fix seo product price not in html?

Render your product price in the server-generated HTML so Google and other crawlers can read it directly — without executing JavaScript.

Related SEO issues