Хлебные крошки на сайте: что это такое и зачем они нужны

<nav aria-label="breadcrumb">
  <ol>
    <li><a href="/">Главная</a></li>
    <li><a href="/blog/">Блог</a></li>
    <li><a href="/blog/seo/">SEO</a></li>
    <li>Хлебные крошки</li>  <!-- текущая страница — без ссылки -->
  </ol>
</nav>

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    { "@type": "ListItem", "position": 1, "name": "Главная", "item": "https://example.com/" },
    { "@type": "ListItem", "position": 2, "name": "Блог",    "item": "https://example.com/blog/" },
    { "@type": "ListItem", "position": 3, "name": "SEO",     "item": "https://example.com/blog/seo/" },
    { "@type": "ListItem", "position": 4, "name": "Хлебные крошки" }
  ]
}
</script>

/* Горизонтальный список с разделителем › */
.breadcrumb ol { display: flex; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
.breadcrumb li + li::before { content: '›'; padding: 0 8px; color: #9CA3AF; }
.breadcrumb a { color: #2563EB; text-decoration: none; font-size: 14px; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb li:last-child { color: #6B7280; font-size: 14px; pointer-events: none; }
@media (max-width: 640px) { .breadcrumb ol { font-size: 12px; } }