How to fix seo product price not in html on Gatsby

Steps for 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.

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).

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.

See the complete Seo product price not in html guide for every platform and the full background.