How to Create and Implement Breadcrumb Schema in a Website
Breadcrumb schema helps search engines understand the hierarchical structure of a website and how individual pages relate to each other. When implemented correctly, Google can display breadcrumb paths in search results instead of long URLs, making listings clearer and easier for users to understand.
This guide explains what Breadcrumb schema is, when it should be used, and how to create and implement it step by step using JSON-LD and HTML-based markup, with clean, schema-valid examples you can apply directly to a website.
What Is a Breadcrumb Schema?
Breadcrumb schema (BreadcrumbList) is structured data that represents a navigation trail showing a page’s position within a website’s hierarchy.
A breadcrumb trail typically looks like this:

This trail helps:
- Users understand where they are on a site
- Users navigate back to higher-level pages
- Search engines understand site structure and content relationships
When breadcrumb schema is present, Google may replace the URL in search results with a breadcrumb path, improving clarity and click confidence.
Where Breadcrumb Schema Appears in Google Search
Breadcrumbs can appear:
- On desktop search results
- Across all regions and languages where Google Search is available
Instead of displaying a long URL, Google may show a structured breadcrumb trail that reflects the page’s context.
When Should You Use Breadcrumb Schema?
Breadcrumb schema should be used on any website with a clear hierarchical structure.
Common use cases include:
- Blogs with categories and subcategories
- Service-based websites
- E-commerce category and product pages
- Educational websites
- Large content-driven platforms
Breadcrumb schema is not limited to visible breadcrumbs, but the structured data must reflect a logical and user-friendly path.
Breadcrumb Schema vs URL Structure
Breadcrumb schema does not need to mirror the exact URL structure.
For example:
URL : example.com/services/seo/technical-audit
Breadcrumb trail
Home › SEO Services › Technical Audit
Google recommends representing a typical user navigation path, not a technical folder structure.
How Breadcrumb Schema Works
Breadcrumb schema uses the BreadcrumbList type, which contains multiple ListItem objects.
Each ListItem defines:
- The position in the trail
- The label shown to users
- The URL of that level (optional for the last item)
A valid breadcrumb trail must contain at least two ListItems.
Core Components of Breadcrumb Schema
BreadcrumbList
This is the container that holds the entire breadcrumb trail.
Key responsibility:
- Defines the ordered list of breadcrumb items
ListItem
Each breadcrumb step is defined using a ListItem.
Every ListItem must include:
- position : order in the breadcrumb trail
- name : label shown to users
- item : URL of the page (not required for the last breadcrumb)
How to Create Breadcrumb Schema Using JSON-LD
JSON-LD is the preferred format because it separates structured data from page layout and is easier to manage.
Example: Single Breadcrumb Trail (JSON-LD) :
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [
{
"@type": "ListItem",
"position": 1,
"name": "Home",
"item": "https://www.codestratz.com/"
},
{
"@type": "ListItem",
"position": 2,
"name": "Digital Marketing Services",
"item": "https://www.codestratz.com/digital-marketing-services/"
},
{
"@type": "ListItem",
"position": 3,
"name": "Digital Advertising",
"item": "https://www.codestratz.com/digital-marketing-services/digital-advertising/"
},
{
"@type": "ListItem",
"position": 4,
"name": "Account-Based Marketing",
"item": "https://www.codestratz.com/digital-marketing-services/digital-advertising/account-based-marketing/"
}
]
}
</script>
Why the Last Item Has No URL
For the final breadcrumb:
- The item property is optional
- Google automatically uses the current page URL
- This avoids redundancy and keeps markup clean
How to Create Breadcrumb Schema Using HTML Markup
Breadcrumbs can also be implemented using HTML-based structured data (such as Microdata or RDFa). This method embeds schema attributes directly into the page markup.
This approach works but is harder to maintain compared to JSON-LD.
Example: Breadcrumb Schema Using HTML Microdata
<nav itemscope itemtype="https://schema.org/BreadcrumbList">
<span itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
<a itemprop="item" href="https://www.codestratz.com/">
<span itemprop="name">Home</span>
</a>
<meta itemprop="position" content="1">
</span>
<span itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
<a itemprop="item" href="https://www.codestratz.com/digital-marketing-services/">
<span itemprop="name">Digital Marketing Services</span>
</a>
<meta itemprop="position" content="2">
</span>
<span itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
<a itemprop="item" href="https://www.codestratz.com/digital-marketing-services/digital-advertising/">
<span itemprop="name">Digital Advertising</span>
</a>
<meta itemprop="position" content="3">
</span>
<span itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
<span itemprop="name">Account-Based Marketing</span>
<meta itemprop="position" content="4">
</span>
</nav>
Multiple Breadcrumb Trails for One Page
Some pages can be reached through different navigation paths. In such cases, multiple breadcrumb trails can be defined.
Example use cases:
- Blog posts under multiple categories
- Products listed in more than one collection
- Content accessible through topic-based and role-based navigation
Example: Multiple Breadcrumb Trails (JSON-LD)
<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": "Marketing Resources",
"item": "https://example.com/marketing-resources"
},
{
"@type": "ListItem",
"position": 3,
"name": "SEO Guides",
"item": "https://example.com/marketing-resources/seo-guides"
},
{
"@type": "ListItem",
"position": 4,
"name": "Breadcrumb Markup"
}
]
},
{
"@context": "https://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [
{
"@type": "ListItem",
"position": 1,
"name": "Home",
"item": "https://example.com/"
},
{
"@type": "ListItem",
"position": 2,
"name": "Developer Docs",
"item": "https://example.com/developer-docs"
},
{
"@type": "ListItem",
"position": 3,
"name": "Structured Data",
"item": "https://example.com/developer-docs/structured-data"
},
{
"@type": "ListItem",
"position": 4,
"name": "Breadcrumb Markup"
}
]
}
]
</script>
Google selects the most relevant breadcrumb path depending on the search query context.
Where to Place Breadcrumb Schema Code
Breadcrumb schema can be placed:
- Inside the <head> section
- Before the closing </body> tag
Both locations are valid as long as the markup is accessible to Googlebot.
How to Validate Breadcrumb Schema
Validation ensures Google can read and process your breadcrumb markup correctly.
Recommended Tools
- Google Rich Results Test
- Google Search Console URL Inspection
What to Check
- At least two ListItems are present
- Positions are sequential
- Names match visible breadcrumb labels
- URLs are crawlable
Fix critical errors first. Warnings should be reviewed but do not block eligibility.
Common Breadcrumb Schema Mistakes
- Using breadcrumbs that don’t reflect user navigation
- Skipping position values or duplicating them
- Adding breadcrumb schema to pages without hierarchy
- Using hidden or misleading breadcrumb labels
- Mixing outdated data-vocabulary markup (no longer supported)
These issues can prevent breadcrumb enhancement in search results.
Best Practices for Breadcrumb Schema
- Keep breadcrumb names short and readable
- Reflect logical site hierarchy, not technical folders
- Maintain consistency between visible breadcrumbs and schema
- Use JSON-LD wherever possible
- Apply breadcrumbs across all eligible pages, not selectively
Conclusion
Breadcrumb schema helps search engines understand a website’s structure and improves how pages are presented in search results. When implemented correctly, it enhances clarity without changing the user experience.
By defining logical breadcrumb trails, using clean structured data, and validating the markup properly, Breadcrumb schema becomes a powerful support element for both usability and search visibility.
Facebook
Twitter
Instagram
YouTube