HTML BreadcrumbList Structured Data in JSON-LD

When you publish a webpage, people are not the only ones reading it. Browsers, search engines, and sharing apps also look for clues about its meaning. This lesson explains how breadcrumblist structured data in json-ld fits into that picture.

The Idea in Plain English

This example describes a real BreadcrumbList using the Schema.org vocabulary. Structured data supplements visible HTML; it must not invent prices, authors, dates or reviews that the page does not actually provide.

You can test this using a small local HTML file. Change one part at a time and check the result in the browser before adding more code.

A Working Example

Read the sample once before copying it. Notice the element names and attribute values, then compare them with the explanation below.

<script type="application/ld+json">
{
    "@context": "https://schema.org",
    "@type": "BreadcrumbList",
    "itemListElement": [
        {
            "@type": "ListItem",
            "position": 1,
            "name": "Home",
            "item": "https://example.com/"
        },
        {
            "@type": "ListItem",
            "position": 2,
            "name": "Tutorials",
            "item": "https://example.com/tutorials/"
        }
    ]
}
</script>

What Each Part Does

• The script element can load code or hold data; the type attribute tells the browser how to treat its contents.
• type chooses the relevant kind of script, input, media or embedded object.

The JSON-LD identifies one BreadcrumbList object. Search services decide independently whether they can use that data or display a special result.

Try It Yourself

Replace the sample fields with accurate information from a real page; then validate the final JSON-LD.

Common Beginner Mistakes

• Publishing structured data that is invisible, misleading or inconsistent with the page.
• Copying the code without checking whether its linked files or endpoints exist; sample addresses and file paths need real resources.
• Choosing a tag only because its default appearance looks right, without checking whether it describes the content correctly.

Key Takeaways

• This example describes a real BreadcrumbList using the Schema.org vocabulary. Structured data supplements visible HTML; it must not invent prices, authors, dates or reviews that the page does not actually provide.
• The JSON-LD identifies one BreadcrumbList object. Search services decide independently whether they can use that data or display a special result.
• Test the markup in a browser, and check accessibility and real-world behavior where relevant.