breadcrumb-implementation

name	breadcrumb-implementation
description	Use when implementing site breadcrumbs. Breadcrumbs improve UX, SEO, and SERP appearance.

Breadcrumb Implementation

Breadcrumbs in UI + BreadcrumbList schema. Earns SERP breadcrumb trail (replaces URL in SERP), improving CTR.

UI breadcrumb implementation

<nav aria-label='breadcrumb'>
  <ol>
    <li><a href='/'>Home</a></li>
    <li><a href='/grading'>Grading</a></li>
    <li aria-current='page'>PSA vs BGS</li>
  </ol>
</nav>

Style with separators (›, /, ·) and ALL CAPS small caps.

BreadcrumbList schema

<script type='application/ld+json'>
{
  '@context': 'https://schema.org',
  '@type': 'BreadcrumbList',
  'itemListElement': [{
    '@type': 'ListItem',
    'position': 1,
    'name': 'Home',
    'item': 'https://cardprepai.com'
  }, {
    '@type': 'ListItem',
    'position': 2,
    'name': 'Grading',
    'item': 'https://cardprepai.com/grading'
  }, {
    '@type': 'ListItem',
    'position': 3,
    'name': 'PSA vs BGS'
  }]
}
</script>

When breadcrumbs matter

1. Sites with 3+ levels of hierarchy
2. Product catalogs
3. Knowledge bases
4. Documentation sites
5. Multi-tier service pages

Simple sites (1-2 levels) don't need breadcrumbs.

Where this fits in the X3 empire

Used in CardPrepAI methodology and knowledge sections.