{"slug": "make-your-saas-price-machine-readable-so-ai-assistants-can-actually-quote-it", "title": "Make Your SaaS Price Machine-Readable (So AI Assistants Can Actually Quote It)", "summary": "A developer argues that SaaS pricing must be machine-readable in plain HTML for AI assistants to quote it, providing a self-audit command and a JSON-LD template. The post identifies common failures like missing currency codes or client-side rendering that hides prices from crawlers, and offers a server-rendering fix for Next.js.", "body_md": "When someone asks an AI assistant \"what is a cheap tool for X under $20 a month,\" the assistant can only put your product in that answer if it can read your price as plain, parseable text. Not as a number painted into a hero image. Not as a value that only exists after three React renders and an API call. Not behind a \"Contact us\" button.\n\nThis is a narrower problem than it sounds, and it is very fixable. Below is the version I wish someone had handed me: the exact failure modes, a self-audit you can run in one line, and a complete, valid JSON-LD block you can paste and adapt.\n\nAn extractor (a crawler, an LLM fetching your page, an AI search bot) sees roughly what `curl`\n\nsees, plus a best-effort attempt at running your JavaScript. If your price is not in the HTML it receives, and not in your structured data, then as far as that extractor is concerned, your price does not exist. It will reach for a competitor whose price it can read.\n\nSo the whole job is: get a real, qualified price into text the machine receives on first load.\n\nHere is the difference that matters, side by side. First, an `Offer`\n\nan extractor can use:\n\n```\n{\n \"@type\": \"Offer\",\n \"price\": \"12.00\",\n \"priceCurrency\": \"USD\"\n}\n```\n\nAnd here are three `Offer`\n\nshapes that look fine to a human but break machine reading:\n\n```\n// 1. Missing priceCurrency: \"12\" of what? Unusable.\n{ \"@type\": \"Offer\", \"price\": \"12.00\" }\n\n// 2. priceRange on an Offer: invalid here, it belongs on LocalBusiness.\n{ \"@type\": \"Offer\", \"priceRange\": \"$12-$49\", \"priceCurrency\": \"USD\" }\n\n// 3. No numeric price at all, just prose.\n{ \"@type\": \"Offer\", \"description\": \"Contact sales for pricing\" }\n```\n\nThe valid one has two things every parser needs: a numeric `price`\n\nand an ISO `priceCurrency`\n\n. Everything else in this post is in service of producing that.\n\nBefore changing anything, look at your page the way a crawler does. The fastest check is one line:\n\n```\ncurl -s https://yourdomain.com/pricing | grep -iE '\\$[0-9]|per month|priceCurrency'\n```\n\nThis fetches the raw HTML (no JavaScript executed, which is the worst-case an extractor might face) and greps for the three signals that matter: a dollar amount, a billing period phrase, and the structured-data currency field.\n\nWhat the output tells you:\n\n`$`\n\nmatch but no `priceCurrency`\n\n:Run it against a couple of competitors too. It is a quick way to see who is legible to AI and who is not.\n\nIf you want to be stricter, fetch with a bot-like user agent and inspect the body:\n\n```\ncurl -s -A 'Mozilla/5.0 (compatible; ExtractorBot/1.0)' \\\n https://yourdomain.com/pricing | grep -ic 'priceCurrency'\n```\n\nA count of `0`\n\nmeans no machine-readable currency anywhere in the served HTML.\n\nThe single highest-leverage fix. If your pricing page is a client component that fetches plans from an API and renders them after hydration, the first HTML payload contains no prices. Extractors that do not run your JS (many do not, and even those that do may time out) see an empty shell.\n\nYou do not have to server-render the entire interactive pricing table with its toggles and tooltips. You need at least one real, representative price in the initial HTML. A common, pragmatic pattern: render a static default tier server-side, then let the client enhance it.\n\nIn a Next.js App Router server component, this is the default behavior as long as you do not push the data fetch into a `'use client'`\n\nboundary:\n\n``` js\n// app/pricing/page.tsx (Server Component, no \"use client\")\nimport { getPlans } from '@/lib/plans';\n\nexport default async function PricingPage() {\n const plans = await getPlans();\n const starter = plans.find((p) => p.id === 'starter');\n\n return (\n
\n

Pricing

\n
\n

{starter.name}

\n {/* amount and period live in ONE text node, see Step 3 */}\n

{`$${starter.price} per month`}

\n
\n {/* client-enhanced interactive table can hydrate below */}\n
\n );\n}\n```\n\nThe key is that `getPlans()`\n\nruns on the server, so `$12 per month`\n\nis in the HTML `curl`\n\nreceives. Re-run the Step 1 audit after this change and you should see the line appear.\n\nIf you are on a fully static site, the same rule holds: the price must be in the built HTML, not injected by a script tag after load.\n\nThis one is sneaky because it looks correct in the browser. Designers love to stack the number and the cadence:\n\n```\n\n
\n $12\n /month\n
\n```\n\nVisually that is `$12/month`\n\n. But CSS is what places those spans next to each other. An extractor that flattens the DOM to text, or a screen reader, may read `$12`\n\nand `month`\n\nas two disconnected pieces, or drop the relationship entirely. The same failure happens with flex gaps and absolute positioning doing the spacing.\n\nBake the relationship into a single text node:\n\n```\n
$12 per month
\n```\n\nIf you must style the number differently from the period, keep them in the same node and style with a wrapping span that does not break the text flow, or accept that the whole string `$12 per month`\n\nis what gets read. The rule: a parser stripping all CSS should still read \"twelve dollars per month\" as one continuous phrase. \"per month\" and \"/month\" both work; what fails is having the amount in one element and the period in a visually-separated sibling with no textual glue.\n\nVisible text gets you most of the way. Structured data makes the price unambiguous and removes any guesswork about currency, billing, and what the price even refers to. For a software product, the correct top-level type is `SoftwareApplication`\n\n.\n\nHere is a complete, minimal block you can adapt. Drop it in a `