Lesson 50 of 55 · HTML
SEO Advanced – Breadcrumbs with `nav[aria-label="breadcrumb"]` and JSON‑LD
Duration: 9 min
Advanced SEO – Breadcrumbs
Breadcrumbs help users and search engines understand a page’s location in the site hierarchy.
HTML markup
<nav aria-label='breadcrumb'>
<ol>
<li><a href='/'>Home</a></li>
<li><a href='/portfolio'>Portfolio</a></li>
<li aria-current='page'>Project X</li>
</ol>
</nav>
CSS styling (optional)
nav[aria-label='breadcrumb'] ol {
display: flex;
flex-wrap: wrap;
list-style: none;
gap: 0.5rem;
}
nav[aria-label='breadcrumb'] li::after {
content: '›';
margin-left: 0.5rem;
}
nav[aria-label='breadcrumb'] li[aria-current='page']::after {
content: '';
}
JSON‑LD markup (structured data)
<script type='application/ld+json'>
{
"@context": "https://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [
{
"@type": "ListItem",
"position": 1,
"name": "Home",
"item": "https://example.com/"
},
{
"@type": "ListItem",
"position": 2,
"name": "Portfolio",
"item": "https://example.com/portfolio"
},
{
"@type": "ListItem",
"position": 3,
"name": "Project X",
"item": "https://example.com/portfolio/project-x"
}
]
}
</script>
Benefits
- Improves search result snippets – Google may display breadcrumb trails.
- Enhances internal navigation for screen‑reader users when paired with
aria-label='breadcrumb'. - Provides a clear hierarchical structure for crawlers.
Quick checklist for breadcrumbs
<nav aria-label='breadcrumb'>present with an ordered list? ✅- Last
<li>hasaria-current='page'? ✅ - JSON‑LD
BreadcrumbListmarkup included and valid? ✅ - Tested with Google Rich Results Test? ✅
- CSS styling does not break the list on small screens? ✅
Tip: Keep the breadcrumb URLs canonical (no URL parameters) to avoid duplicate‑content issues.