Implementing a breadcrumb navigation with schema markup
Senior SEO-specialist
Breadcrumbs provide a better user experience and help search engines understand the hierarchy of your website. By enriching them with structured data (schema markup) you also increase the chance of rich snippets in search results. In this article: how to implement breadcrumbs correctly – both visually and technically – including JSON-LD markup.
Breadcrumbs are navigation trails that show the user where they are within the structure of a site.
Example:
kotlin
Home > SEO > Structured data > Breadcrumbs implementeren
They improve:
- UX (fast navigation)
- Internal link structure (additional internal links)
- SEO (context and hierarchy)
2. Visual implementation (HTML/CSS).
You ideally place breadcrumbs at the top of a page, below the H1, with structured HTML.
HTML example:
html
<nav aria-label="Breadcrumb">
<ol>
<li><a href="https://jouwdomein.nl">Home</a></li>
<li><a href="https://jouwdomein.nl/seo/">SEO</a></li>
<li>Breadcrumb navigatie</li>
</ol>
</nav>
Add CSS for visual formatting (e.g., arrows, spacing).
3. Adding structured data via JSON-LD
Structured data is needed to make breadcrumbs visible in search results.
JSON-LD example:
html
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [
{
"@type": "ListItem",
"position": 1,
"name": "Home",
"item": "https://jouwdomein.nl"
},
{
"@type": "ListItem",
"position": 2,
"name": "SEO",
"item": "https://jouwdomein.nl/seo/"
},
{
"@type": "ListItem",
"position": 3,
"name": "Breadcrumb navigatie",
"item": "https://jouwdomein.nl/seo/breadcrumb-navigatie/"
}
]
}
</script>
Place this script in the or at the bottom of the of the page.
Aan de slag met SEO? Neem gerust contact op.
4. Implementation in WordPress
Are you using WordPress? Then there are three ways to set breadcrumb + schema automatically:
Option 1: Yoast SEO
- Activate below: SEO > Search View > Breadcrumbs
Add the PHP code in your theme:
php
<?php
if (function_exists('yoast_breadcrumb')) {
yoast_breadcrumb('<p id="breadcrumbs">', '</p>');
}
?>
Option 2: Rank Math
- Enable Breadcrumbs under Rank Math > General > Breadcrumbs
- Automatically JSON-LD integrated
Option 3: Manual
- Use own HTML + custom schema markup as above
5. Testing and validation
Check that Google correctly recognizes your breadcrumbs.
Tools:
- Rich Results Test
- Schema Markup Validator
Check:
- No errors or warnings
- Correct positions and URLs
- Structure matches visual navigation
6. Best practices
| Guideline | Explanation |
| Breadcrumbs show where it is relevant | Think blogs, categories, services, longform content |
| Use full hierarchy | No ‘shortcut breadcrumbs,’ always show full path |
| Match visually with JSON-LD | Google also expects breadcrumbs to appear on the page |
| Update on site restructuring | Also adjust the markup if the URL structure changes |
In conclusion
Breadcrumbs with schema markup improve your internal link structure, SEO and user experience. With a few lines of HTML and JSON-LD you make them usable and visible in search results. Simple, effective, and indispensable for any well-structured site.
