How to add product schema on a custom website

On a custom website there is no platform mechanism at all, so the method depends entirely on how your site is built and hosted. A folder of static HTML files, a static site generator, and a server-rendered framework each put the JSON-LD block in a different place, and a site that renders in the browser needs a different answer from one that renders on the server. The one constraint shaping everything is the HTML production method: the block has to be in the initial HTML response for the page, and where you write it is wherever your setup produces that HTML.

Why a custom website is different

Unlike a self-hosted application with a template layer and a deploy pipeline, a custom site may have no shared template at all. The practical question is not who owns the stack but how each product page's HTML comes into existence. That decides the technique, and the four common cases need four different instructions. Get the case wrong and the markup either never ships or ships only after JavaScript runs, which AI crawlers will not wait for.

Steps

1. Check what the server actually sends. Fetch a product page with curl or view-source and search for application/ld+json. Do not trust the browser DOM. On custom sites, especially ones built with frontend frameworks, the DOM routinely shows markup that was injected after load and was never in the initial response.

2. Add the block where your HTML is produced.

• Static HTML files. If each product is its own HTML file, paste the JSON-LD script block into the head of each product page, with that product's actual values. If the pages share a common header include or snippet, put the block there only if the values can vary per page; a shared include with one product's price on every page is worse than no markup.
• Static site generator (Hugo, Eleventy, Jekyll, and similar). Add the block once to the product layout or partial, with template variables pulling from each page's front matter (name, price, SKU, availability). Every product page then gets correct markup at build time. Rebuild and confirm the generated files contain it.
• Server-rendered framework (Next.js, Nuxt, and similar). Add the block to the product page component's head so it renders into the server response. Verify with curl that the JSON-LD is in the raw HTML, not added during hydration.
• Client-rendered single-page app. If the product content only exists after JavaScript runs, a JSON-LD block in the served HTML has to be generated another way: pre-render the product pages, render them on the server, or generate static product pages for crawlers. Markup injected solely by client-side scripts is invisible to AI crawlers, and this case has to be fixed before any schema work matters.

3. Keep values tied to the page. Whatever the method, every value in the block must match what the page shows: same price, same currency, same stock status. On static sites this means updating the block when you update the page. On generated sites it means the front matter or data source is the single source of truth for both.

4. Validate the served HTML. Test a URL such as https://[yourdomain.com]/products/your-product, replacing yourdomain.com with your actual domain, in Google's Rich Results Test and the Schema Markup Validator. Test a variant page and an out-of-stock product, and re-validate after any rebuild or framework upgrade, since those are the moments the block silently disappears.

What this guide does not cover

This covers getting valid product markup into the initial HTML of a custom-built site, whatever produces that HTML. It does not cover keeping the markup accurate as prices and inventory change (on static sites that is a manual discipline), getting AI crawlers to your pages, or letting an agent complete the checkout, which is the transaction layer and a separate job.