🍞Breadcrumb Navigation for SEO

Breadcrumbs are a secondary navigation element showing the user's location in the site hierarchy: Home > Category > Subcategory > Current Page. They serve four SEO purposes: they clarify site structure for Googlebot, enable breadcrumb display in SERPs, reduce bounce rates, and support internal linking.

Breadcrumbs in Search Results

When you have BreadcrumbList schema on a page, Google may display the breadcrumb path instead of the raw URL below your title in search results. "example.com › blog › seo › breadcrumbs-guide" reads more professionally and often improves CTR compared to a long URL.

BreadcrumbList Schema Implementation

{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "name": "Home",
      "item": "https://example.com"
    },
    {
      "@type": "ListItem",
      "position": 2,
      "name": "SEO Wiki",
      "item": "https://example.com/wiki"
    },
    {
      "@type": "ListItem",
      "position": 3,
      "name": "Breadcrumb Navigation for SEO",
      "item": "https://example.com/wiki/breadcrumb-navigation"
    }
  ]
}

HTML Breadcrumb Best Practices

• Use <nav aria-label="Breadcrumb"> for accessibility.
• Wrap in an <ol> (ordered list) — breadcrumbs have a specific order.
• Every breadcrumb item should be a real link (except the current page).
• The current page should have aria-current="page" attribute.
• Match your BreadcrumbList schema exactly to the visible HTML breadcrumbs.

<nav aria-label="Breadcrumb">
  <ol>
    <li><a href="/">Home</a></li>
    <li><a href="/wiki">SEO Wiki</a></li>
    <li aria-current="page">Breadcrumb Navigation</li>
  </ol>
</nav>