Breadcrumb Schema and HTML Generator
Create BreadcrumbList structured data and accessible breadcrumb HTML (nav, ol, aria-current) from a list of page names and URLs. Copy-ready 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": "Blog",
"item": "https://example.com/blog/"
},
{
"@type": "ListItem",
"position": 3,
"name": "Cold Brew Guide",
"item": "https://example.com/blog/cold-brew"
}
]
}
</script><nav aria-label="Breadcrumb">
<ol>
<li><a href="https://example.com/">Home</a></li>
<li><a href="https://example.com/blog/">Blog</a></li>
<li aria-current="page">Cold Brew Guide</li>
</ol>
</nav>What is Breadcrumb Generator?
This generator turns a list of breadcrumb items (name + URL, from the home page down to the current page) into two outputs: schema.org BreadcrumbList JSON-LD for search engines and accessible HTML markup for visitors.
How to use Breadcrumb Generator
- Edit the items: one row per level with its name and absolute URL.
- Add or remove rows; the last row is the current page and may have no URL.
- Set the aria-label of the navigation element in your site's language.
- Copy the JSON-LD block and the HTML into your page.
Example
Home → Blog → Cold Brew Guide
<nav aria-label="Breadcrumb">
<ol>
<li><a href="https://example.com/">Home</a></li>
<li><a href="https://example.com/blog/">Blog</a></li>
<li aria-current="page">Cold Brew Guide</li>
</ol>
</nav> When to use Breadcrumb Generator
Use it for pages that show a breadcrumb trail, especially in deep site structures like shops or documentation. The structured data should match the breadcrumb visible on the page. Style the separators with CSS rather than adding characters to the markup.
How Breadcrumb Generator works
Each non-empty row becomes a ListItem with a 1-based position, name and item URL (omitted when empty). The HTML is a <nav aria-label> containing an ordered list; earlier items are links and the last item gets aria-current="page", following the WAI-ARIA breadcrumb pattern. Names and URLs are HTML-escaped; relative URLs trigger a warning because structured data should use absolute URLs.
Common Use Cases
- Add breadcrumb rich results to category and product pages.
- Create accessible breadcrumb HTML for a documentation site.
- Replace a breadcrumb that uses plain text separators with semantic markup.
- Generate markup for a static site without a breadcrumb plugin.
FAQs
Does the last item need a URL?
No. Google allows the current page to omit item; it is included here if you enter one.
Does breadcrumb markup guarantee a breadcrumb in search results?
No. It helps search engines understand the site structure and makes the result eligible for a breadcrumb-style path, but Google decides what to display.
Can a page have several breadcrumb trails?
Yes, add one BreadcrumbList per trail if the page is reachable through several paths.