Generate breadcrumb

Generate Schema.org BreadcrumbList markup from an ordered navigation path.

freeworks offlinenothing uploaded

ToolBreadcrumb Generator

Input

Output

—

Put this on your own site

The frame below runs the same code as this page, in the reader's own browser. Nothing is sent to us, and nothing is sent to you.

AccentBackground

Pick a dark background and the text and panels follow it, so the frame stays readable on a dark page.

How it works

Labels and URLs become ListItem entries with one-based position, name, and item properties; the final crumb can omit item for the current page. The output describes hierarchy to crawlers.

One-based positions match schema.org examples.
Markup remains separate from visual separators.

Worked example

Product page breadcrumb path

Generate BreadcrumbList JSON-LD for a 3-level product page navigation

Input

											[{"name":"Home","url":"https://shop.example.com"},{"name":"Electronics","url":"https://shop.example.com/electronics"},{"name":"Laptops","url":"https://shop.example.com/electronics/laptops"}]

Output

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

When to use this

Product pages, documentation sites, and SEO audits generate breadcrumb markup.

Edge cases

Gapped positions create ambiguous hierarchy.
Relative URLs can resolve against an unintended base.
The current crumb should not link to another canonical page.

References

Schema.org BreadcrumbList