Breadcrumb Schema Generator
Generate BreadcrumbList JSON-LD to display breadcrumb navigation in Google Search
Configure Schema
Article: Blog posts, news articles, guides
Generated Schema
// Fill in the form to generate schema markup
Other Schema Generators
About Breadcrumb Schema Generator
Breadcrumb schema markup replaces the raw URL displayed under your search result title with a clean, human-readable breadcrumb trail — showing your site's navigation hierarchy instead of a long URL string. This small visual change makes search results look more professional, helps users understand where a page sits in your site structure before clicking, and can improve click-through rates by making results more scannable and trustworthy.
Breadcrumb rich results appear in standard Google Search results as a series of linked categories separated by arrows — for example, "Home › Tools › SEO Tools › Schema Generator". This navigation context helps users self-qualify whether a result is relevant to their search intent, reducing bounce rates from users who click the wrong result and filtering in users who are specifically looking for content at that level of your site hierarchy.
Breadcrumb schema is one of the simplest structured data types to implement and is applicable to virtually every page on every website — making it one of the highest coverage-to-effort ratio schema investments you can make. Our breadcrumb schema generator creates valid BreadcrumbList JSON-LD for any navigation path with as many levels as your site hierarchy requires.
How Breadcrumb Schema Affects Search Results
Before breadcrumb schema, Google displayed raw URLs under search result titles — often long, parameter-heavy strings that were difficult to read and provided little navigation context. Breadcrumb schema enables Google to replace these URLs with clean category paths that communicate page hierarchy at a glance.
The BreadcrumbList schema uses a simple structure — an ordered list of ListItem objects, each with a position number, name (the breadcrumb label), and item (the URL). Position 1 is always the homepage, and subsequent positions represent each level of navigation down to the current page. The final breadcrumb (the current page) can optionally omit the item URL since users are already on that page.
Breadcrumb schema also helps Google understand your site architecture — which pages are parents of other pages, how content is categorized, and what the navigational relationships between pages are. This structural understanding can improve how Google crawls your site and which pages it considers most authoritative for different topics.
Key Considerations
Correct Position Ordering
Position values must be sequential integers starting at 1 (homepage). Each subsequent breadcrumb level increments by 1. Out-of-order positions or gaps in the sequence will cause schema validation errors. The final position should be the current page — and can include or omit the item URL.
Absolute URLs in Item
The item property in each ListItem must be an absolute URL — not a relative path. Use the full URL including protocol and domain (https://www.example.com/category). Relative URLs like /category are not valid in BreadcrumbList schema and will fail validation.
Match Visible Breadcrumbs
Your breadcrumb schema should match the visible breadcrumb navigation on your page. Google may ignore breadcrumb schema that doesn't correspond to actual navigation elements users can see. Ensure your breadcrumb UI and schema are generated from the same data source to stay synchronized.
One Schema Per Page
Use a single BreadcrumbList schema per page containing all breadcrumb levels. Don't use multiple separate BreadcrumbList schemas on the same page — this can confuse search engines about the correct hierarchy. All breadcrumb levels from homepage to current page should be in one schema object.
Common BreadcrumbList Issues
Structure Errors
- •Position numbers not starting at 1 or not sequential
- •Missing item URL for non-final breadcrumb levels
- •Relative URLs instead of absolute URLs in item property
- •Multiple BreadcrumbList schemas on same page
Content Mismatch
- •Breadcrumb schema not matching visible breadcrumb navigation
- •Schema labels not matching the text shown in breadcrumb UI
- •Schema URLs not matching the actual navigation links
- •Breadcrumb depth in schema deeper than actual site structure
Hierarchy Issues
- •Homepage not included as position 1 in breadcrumb
- •Skipping navigation levels in the breadcrumb hierarchy
- •Using the same URL for multiple breadcrumb levels
- •Current page URL missing from final breadcrumb position
Implementation Guide
Complete BreadcrumbList JSON-LD
Valid breadcrumb schema for a multi-level page hierarchy:
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [
{
"@type": "ListItem",
"position": 1,
"name": "Home",
"item": "https://www.example.com"
},
{
"@type": "ListItem",
"position": 2,
"name": "Tools",
"item": "https://www.example.com/tools"
},
{
"@type": "ListItem",
"position": 3,
"name": "SEO Tools",
"item": "https://www.example.com/tools/seo"
},
{
"@type": "ListItem",
"position": 4,
"name": "Schema Generator",
"item": "https://www.example.com/tools/seo/schema-generator"
}
]
}
</script>Dynamic Breadcrumb Schema in Next.js
Generate breadcrumb schema from your page's navigation path:
// components/BreadcrumbSchema.tsx
interface BreadcrumbItem {
name: string;
url: string;
}
export function BreadcrumbSchema({ items }: { items: BreadcrumbItem[] }) {
const schema = {
"@context": "https://schema.org",
"@type": "BreadcrumbList",
itemListElement: items.map((item, index) => ({
"@type": "ListItem",
position: index + 1,
name: item.name,
item: item.url,
})),
};
return (
<script
type="application/ld+json"
dangerouslySetInnerHTML={{ __html: JSON.stringify(schema) }}
/>
);
}
// Usage in page.tsx:
const breadcrumbs = [
{ name: "Home", url: "https://pacgie.com" },
{ name: "Tools", url: "https://pacgie.com/tools" },
{ name: "Schema Generator", url: "https://pacgie.com/schema-generator" },
];
export default function Page() {
return (
<>
<BreadcrumbSchema items={breadcrumbs} />
<nav aria-label="Breadcrumb">
<ol>
{breadcrumbs.map((item, i) => (
<li key={i}><a href={item.url}>{item.name}</a></li>
))}
</ol>
</nav>
</>
);
}Breadcrumb Schema for Dynamic Routes
Auto-generate breadcrumbs from Next.js URL segments:
// lib/breadcrumbs.ts
export function generateBreadcrumbs(pathname: string, baseUrl: string) {
const segments = pathname.split("/").filter(Boolean);
const breadcrumbs = [{ name: "Home", url: baseUrl }];
let currentPath = baseUrl;
for (const segment of segments) {
currentPath = `${currentPath}/${segment}`;
breadcrumbs.push({
name: segment
.split("-")
.map((w) => w.charAt(0).toUpperCase() + w.slice(1))
.join(" "),
url: currentPath,
});
}
return breadcrumbs;
}
// Usage:
// pathname: /schema-generator/faq-schema
// Generates:
// Home → Schema Generator → Faq SchemaCommon Use Cases
- Every page on a multi-level website for consistent breadcrumb display
- E-commerce category and product pages showing product hierarchy
- Blog posts showing publication category hierarchy
- Documentation sites with nested topic structures
- Tool sub-pages showing tool category hierarchy
Pro Tip
Implement breadcrumb schema on every page of your site — not just deep pages. Even homepage-adjacent pages benefit from breadcrumb schema as it provides structure signals to Google. Use a shared BreadcrumbSchema component in Next.js and pass the appropriate breadcrumb path for each page, keeping it synchronized with your visible breadcrumb UI.