DM2: Page-level SEO: intent, titles, structure and structured data
Structured data with JSON-LD
🎯You'll be able to
Describe a product with schema.org structured data in JSON-LD, keep it in step with the page, and check it.
🏠The everyday picture
A parcel has a printed label with the address, weight and contents in fixed boxes, so a sorting machine can read it without opening the box. Structured data is that label for a web page.
📘What it really is
-
Structured data describes what a page is about in a fixed vocabulary (schema.org): a Product, its price, availability, brand, reviews; an Organization; a Breadcrumb list; an FAQ; an Article.
-
JSON-LD is the recommended format: a script block in the page:
<script type="application/ld+json">
{"@context": "https://schema.org", "@type": "Product", "name": "Clay tawa, 10 inch", "sku": "tawa",
"image": "https://www.mittimart.example/img/products/tawa.svg",
"offers": {"@type": "Offer", "price": "720.00", "priceCurrency": "INR", "availability": "https://schema.org/InStock"}}
</script>
- Rich results: search engines may show price, availability or ratings in the listing. Eligibility isn't a promise of display.
-
It must match the visible page: the same name, the same price, the same availability. Marking up things visitors can't see, or fake reviews, breaks the guidelines and can lead to the markup being ignored or a manual action.
-
Check it: valid JSON (one missing comma breaks it), the right types and properties; Google's Rich Results Test and the Schema Markup Validator check public pages.
-
Generate it from the same data as the page (a product list or database), so the price can't drift.
📝A worked example
Input: the starter kulhad page's JSON-LD says "price": "520.00", while the page shows ₹480; the other product pages have none.
Steps:
- Write one Product block for each product page from the product's data: name equal to the page's
h1, price as shown,INR, and availability. - Check each block parses as JSON (for example with
JSON.parsein the browser console). - Run
npm run test:seo.
Expected output: test 8 passes: six product pages, each with one Product block whose name and price match the page.
🌍Where it's used
- Shops mark up products, prices and stock for rich results.
- Recipe and event sites use Recipe and Event types.
- Local businesses describe their address and opening hours with LocalBusiness.
📝Case scenario
A pharmacy chain's structured data was written by hand once and not updated after that. Prices in search listings were weeks old, customers complained at the counter, and the chain withdrew the markup. It came back when the JSON-LD was generated from the same price feed as the pages.
🖱️Try it
View the source of a product page on a large shop and find its JSON-LD. List the @type and three properties. Success: you can point to
the price in the markup and the same price on the page.
⚠️Common mistakes
- Markup that doesn't match the page. Sign: an old price or a rating nobody can see. Fix: generate it from the page's own data.
- Broken JSON. Sign: a missing comma or quote. Fix: parse it before publishing.
- Expecting rich results to appear because markup exists. Sign: "We added schema, where are the stars?" Fix: markup makes a page eligible; display isn't promised.
🛠️For your project
Project 3's test 8 checks the JSON-LD on each product page: valid, Product, the name matching the h1, and the price and currency
matching the page.
✅Quick check
Which format is recommended for structured data?
Show the answer
JSON-LD, in a <script type="application/ld+json"> block.
What must the price in a Product's structured data match?
Show the answer
The price visitors see on the page.