Generate breadcrumb JSON-LD from the page's own links
Building JSON-LD from the same data as the visible page keeps the two in sync. On a real site, do this on the server or at build time so every crawler sees it.
Structured data is a JSON-LD block that describes the page's content in schema.org vocabulary (a product with a price, a recipe with a cooking time), so search engines can understand it exactly and may show rich results like stars and prices.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 6 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Write a JSON-LD Recipe for "Egg-free pancakes" by Asha, ready in 20 minutes (cook time 10 minutes), making 8 pancakes, with three ingredients.
Write a function toJsonLd(data) that returns a string safe to put inside a <script type="application/ld+json">. Test it with { name: "</script>hi" } and log whether the result contains </script.
Explain it without notes
What is structured data, and why is JSON-LD the recommended format?
What are rich results, and does valid markup guarantee them?
Why must structured data match the visible page?
How do you safely embed user-provided text in a JSON-LD block?
Preview
Console
Nothing logged yet.Expected console output
1 Home https://bagbazaar.example/
2 School https://bagbazaar.example/school
3 Bags https://bagbazaar.example/school/bags
JSON-LD blocks in the head: 1