Breadcrumb Builder
Build BreadcrumbList JSON-LD plus the matching visible markup. Three delimiter styles, position validation, and accessibility-aware HTML output.
Why Breadcrumbs Deserve Their Own Tool
Breadcrumbs are a small markup with outsized SEO value. They replace the URL in SERP results with a human-readable trail, which improves CTR on long URLs and category-deep pages. They also help Google understand site hierarchy when sitemap depth is ambiguous. But the JSON-LD has to match the visible markup in both order and labels — a mismatch causes Google to ignore the structured data even when both are technically correct. This tool generates both in one pass, with the schema's `position` numbers auto-aligned to the visible order. Pair with the Canonical Tag Generator and Schema Markup Generator for a complete head.
How the Builder Generates Both Halves
Enter your trail as a series of label-URL pairs, starting at Home and ending at the current page. The tool produces three outputs in lockstep. The JSON-LD block uses BreadcrumbList with explicit `position` integers — required by Google, not optional — and one `ListItem` per row. The visible HTML uses a `<nav aria-label="Breadcrumb">` with an ordered list inside, separators inserted via CSS pseudo-elements rather than text content so they are not read by screen readers. The third output is a copy-paste CSS block that styles separators in your choice of three delimiters: chevron, slash, or arrow. All three update together; you cannot accidentally ship a JSON-LD trail that diverges from what users see.
Frequently Asked Questions
Should the last breadcrumb be a link?+
Convention: no. The visible breadcrumb for the current page is text only, while the JSON-LD ListItem can still include an `item` URL pointing to the same page. The tool follows this convention but lets you override if your design requires a link on the final crumb.
Why does Google require explicit position numbers?+
Without `position`, Google has to infer the order from array index. Explicit numbers are unambiguous and survive serialization changes. The tool always emits them.
Can I use icons instead of separator characters?+
Yes — change the separator value to an empty string and add a background SVG to the CSS, or use a font icon. The accessibility pattern (aria-hidden separators) does not depend on the character used.
Do I need breadcrumbs on the homepage?+
No. The homepage is the root; a breadcrumb showing only 'Home' is redundant. Skip breadcrumbs on the homepage and start them at category or section pages.
Are breadcrumbs worth adding on a flat-structure site?+
Probably not. If your URLs have no meaningful nesting — everything sits one level below the homepage — breadcrumbs add little value and the trail risks looking contrived. Save the markup for sites with at least two levels of real hierarchy, like categories and subcategories.
Are breadcrumbs accessible by default?+
Only if the markup includes `aria-label='Breadcrumb'` on the nav and separators are decorative (CSS pseudo-elements or `aria-hidden='true'`). The tool's output follows both rules. Plain `>` text in markup is read aloud and confuses screen-reader users.
Can I have more than one breadcrumb on a page?+
Technically yes, but only the first BreadcrumbList in markup order is used by Google. If you have multiple navigation trails, mark only the canonical one as a BreadcrumbList and treat the others as regular navigation.
Does the visible markup affect SEO if I skip the schema?+
Visible breadcrumbs help users and may earn some interpretation from Google, but the BreadcrumbList JSON-LD is what powers the SERP-level breadcrumb replacement. Ship both.
Built by Derek Giordano · Part of Ultimate Design Tools
Privacy Policy · Terms of Service