A user visits your site, navigates to the blog, opens an article — and sees only "Home > Article" in the breadcrumbs. The category is lost, navigation is useless, and Google does not display rich snippets. Sound familiar? We solve this comprehensively: we implement breadcrumbs with auto-generation from URL and Schema.org microdata. We have implemented breadcrumbs on over 50 projects — from small sites to large portals on Laravel, React, Vue. We guarantee correct operation on all pages and a boost in CTR in search results.
How breadcrumbs affect SEO
Google uses the BreadcrumbList markup to display a navigation chain in search results. This replaces the long URL, makes the link more understandable, and increases clickability. Additionally, breadcrumbs reduce bounce rate: users see where they are and can quickly navigate to a higher level. Google's structured data documentation emphasizes that markup is required for display in results. Saving on SEO optimization budget is an extra bonus.
Why use Schema.org markup
Without microdata, Google may determine the path on its own, but it often makes mistakes: takes the wrong hierarchy or ignores sections. Manual markup guarantees that the exact chain you designed appears in the results. For Laravel projects, we use the diglactic/laravel-breadcrumbs package — it's compatible with the latest PHP 8.3+ and automatically generates JSON-LD. In React, it's more convenient to embed application/ld+json directly into the component.
Problems we solve
- Duplicate breadcrumbs on the same page. Multiple navigations with identical markup — Google may consider this spam. We implement a single source of truth (one component, one JSON-LD script).
- Long paths. If an article has five levels of nesting, breadcrumbs become useless. We configure truncation: show the first two and the last element, hide the rest with an ellipsis.
- Missing separators. By default, Google accepts any character, but it's better to use
›or/. We add custom separators via CSS::after. - Errors in position. Numbering must start at 1 and be strictly sequential. We automatically compute based on the array.
How we do it: detailed case
Consider a typical Laravel 11 project with a blog and categories. After agreeing on the path map, we implement the diglactic/laravel-breadcrumbs package, describe routes and a template with microdata. The generator and template code are provided below. For React projects (Next.js 14, App Router), we create a server component that fetches the hierarchy from the API and renders <nav> + <script type="application/ld+json">. In Vue 3 (Nuxt 3) — similarly.
Laravel: breadcrumb generator
// config/breadcrumbs.php via diglactic/laravel-breadcrumbs package
use Diglactic\Breadcrumbs\Breadcrumbs;
use Diglactic\Breadcrumbs\Generator as BreadcrumbTrail;
Breadcrumbs::for('home', fn(BreadcrumbTrail $trail) =>
$trail->push('Главная', route('home'))
);
Breadcrumbs::for('blog', fn(BreadcrumbTrail $trail) => $trail
->parent('home')
->push('Блог', route('blog'))
);
Breadcrumbs::for('article', fn(BreadcrumbTrail $trail, Article $article) => $trail
->parent('blog')
->push($article->category->name, route('blog.category', $article->category))
->push($article->title)
);
// In template
{{ Breadcrumbs::render('article', $article) }}
Schema.org markup
// resources/views/components/breadcrumbs.blade.php
@if($breadcrumbs = Breadcrumbs::generate('article', $article))
<nav aria-label="Хлебные крошки">
<ol itemscope itemtype="https://schema.org/BreadcrumbList">
@foreach($breadcrumbs as $item)
<li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
@if($item->url)
<a itemprop="item" href="{{ $item->url }}">
<span itemprop="name">{{ $item->title }}</span>
</a>
@else
<span itemprop="name">{{ $item->title }}</span>
@endif
<meta itemprop="position" content="{{ $loop->iteration }}">
</li>
@endforeach
</ol>
</nav>
@endif
React component
interface Breadcrumb {
label: string;
href?: string;
}
function Breadcrumbs({ items }: { items: Breadcrumb[] }) {
const structuredData = {
'@context': 'https://schema.org',
'@type': 'BreadcrumbList',
itemListElement: items.map((item, index) => ({
'@type': 'ListItem',
position: index + 1,
name: item.label,
...(item.href ? { item: window.location.origin + item.href } : {}),
})),
};
return (
<nav aria-label="Хлебные крошки">
<script
type="application/ld+json"
dangerouslySetInnerHTML={{ __html: JSON.stringify(structuredData) }}
/>
<ol className="breadcrumbs">
{items.map((item, index) => (
<li key={index} className="breadcrumb-item">
{index < items.length - 1 ? (
<>
{item.href ? <a href={item.href}>{item.label}</a> : <span>{item.label}</span>}
<span aria-hidden className="separator">›</span>
</>
) : (
<span aria-current="page">{item.label}</span>
)}
</li>
))}
</ol>
</nav>
);
}
.breadcrumbs {
display: flex;
flex-wrap: wrap;
gap: 0.25rem;
list-style: none;
padding: 0;
font-size: 0.875rem;
color: #6b7280;
}
.breadcrumb-item { display: flex; align-items: center; gap: 0.25rem; }
.breadcrumb-item a { color: inherit; text-decoration: none; }
.breadcrumb-item a:hover { color: #111827; text-decoration: underline; }
[aria-current="page"] { color: #111827; font-weight: 500; }
Full example of breadcrumb structure
In real projects, we always add error handling and data validation. This minimizes the risks of duplication and incorrect numbering.What is included in the work
- Audit of current navigation and path map.
- Design of breadcrumb hierarchy taking into account nesting.
- Implementation of auto-generation or manual route description.
- Component layout with Schema.org microdata.
- Testing JSON-LD validity through the official validator.
- Documentation on adding new pages to the system.
- Consultation on further optimization. Time savings on revisions — up to 30%.
Why auto-generation is faster than manual description
Auto-generation from URL does not require creating configurations for each route — just parse the path into segments. Manual description (via packages) takes 1–2 days for an average project, while auto-generation takes 0.5 day. For complex projects with cross-references, manual description is more reliable. We recommend a hybrid: main path from URL, and manual trails for key pages.
Step-by-step implementation guide
- Audit current navigation — analyze URL structure and sitemap, identify breadcrumb insertion points.
- Design routes — determine the logic for building the hierarchy, configure truncation of long paths.
- Implementation — write the generator (Laravel/React/Vue), layout the component with microdata and CSS styles.
- Testing — verify correctness of position, no duplicates, and valid JSON-LD via the structured data testing tool.
- Deployment and documentation — hand over code, describe the process for adding new pages to breadcrumbs.
Timelines and cost
Implementation time ranges from 0.5 to 2 days depending on the complexity of the hierarchy. The cost is determined individually after analysis. The minimum cost of implementation pays off due to the increase in CTR. Contact us — we will evaluate your project in 1 day.
| Approach | Implementation speed | Customization flexibility | SEO support |
|---|---|---|---|
| Auto-generation from URL | 0.5 day | Low | Medium |
| Manual description (package) | 1–2 days | High | High |
| Stage | Duration |
|---|---|
| Analysis and design | 2–4 hours |
| Generator implementation | 2–6 hours |
| Layout and microdata | 1–2 hours |
| Testing and deployment | 1–2 hours |
Order turnkey breadcrumbs implementation — get a consultation and timeline estimate today. Contact us to discuss your project.