Breadcrumb schema markup tells search engines exactly how a page fits into your site
hierarchy, enabling the breadcrumb rich result in Google Search — where the URL
snippet is replaced by a human-readable trail such as
Home › Blog › How to Bake Sourdough. This generator builds the correct
schema.org BreadcrumbList JSON-LD for any page depth, with a live visual preview
and a one-click copy to clipboard. Everything runs in your browser; nothing is sent
anywhere.
How it works
The tool builds a BreadcrumbList object conforming to the
schema.org specification and
Google’s structured data guidelines.
The output structure is:
{
"@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": "Article title" }
]
}
Each ListItem carries three properties: position (1-based integer),
name (the visible label), and item (the URL of that level). Position
is computed automatically from the order of your rows. The last item’s URL
is optional — it defaults to the current page URL in Google’s parser — but
this tool includes it when you supply one, which is the recommended practice.
Worked example
Say you have a blog post at https://myblog.com/travel/europe/paris-guide.
Your breadcrumb trail has three levels:
| Position | Name | URL |
|---|---|---|
| 1 | Home | https://myblog.com |
| 2 | Travel | https://myblog.com/travel |
| 3 | Europe | https://myblog.com/travel/europe |
| 4 | Paris Guide | https://myblog.com/travel/europe/paris-guide |
Paste this into the <head> of the Paris Guide page and Google will
show Home › Travel › Europe › Paris Guide in search results instead of
the raw URL. Run the page through
Google’s Rich Results Test
to confirm eligibility after deploying.
Formula note
There is no numeric formula — the spec is structural. The only invariant
the generator enforces is that position values are consecutive integers
starting at 1. It also validates that all items except the last have a
non-empty URL (Google requires URLs for all ancestor items), and that any
supplied URL begins with http:// or https:// (relative URLs are not
valid for the item property).
Placement and caching tips
Place the <script type="application/ld+json"> block in the
<head> element of every page that shows the breadcrumb. In
Next.js App Router you can put it in a generateMetadata return value or
directly in a Server Component. In WordPress, paste it into your theme’s
header.php or use a plugin that injects per-page JSON-LD. Breadcrumb
schema is not inherited by child pages — each page needs its own
BreadcrumbList with the correct depth.