How to fix seo product price not in html on Next.js (Headless)

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

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.