Implementierung einer Breadcrumb-Navigation mit Schema Markup
Senior SEO-specialist
Brotkrümel bieten ein besseres Benutzererlebnis und helfen Suchmaschinen, die Hierarchie Ihrer Website zu verstehen. Indem Sie sie mit strukturierten Daten (Schema Markup) anreichern, erhöhen Sie auch die Chancen auf Rich Snippets in den Suchergebnissen. In diesem Artikel: Wie Sie Breadcrumbs richtig implementieren – sowohl visuell als auch technisch – einschließlich JSON-LD Markup.
1. Was sind Semmelbrösel?
Breadcrumbs sind Navigationspfade, die dem Benutzer zeigen, wo er sich innerhalb der Struktur einer Website befindet.
Beispiel:
kotlin
Home > SEO > Structured data > Breadcrumbs implementeren
Sie verbessern sich:
- UX (schnelle Navigation)
- Interne Linkstruktur (zusätzliche interne Links)
- SEO (Kontext und Hierarchie)
2. Visuelle Umsetzung (HTML/CSS)
Idealerweise platzieren Sie die Breadcrumbs oben auf einer Seite, unterhalb von H1, mit strukturiertem HTML.
HTML-Beispiel:
html
<nav aria-label="Breadcrumb">
<ol>
<li><a href="https://jouwdomein.nl">Home</a></li>
<li><a href="https://jouwdomein.nl/seo/">SEO</a></li>
<li>Breadcrumb navigatie</li>
</ol>
</nav>
Fügen Sie CSS für die visuelle Formatierung hinzu (z.B. Pfeile, Abstände).
3. Hinzufügen strukturierter Daten über JSON-LD
Strukturierte Daten werden benötigt, um Breadcrumbs in den Suchergebnissen sichtbar zu machen.
JSON-LD Beispiel:
html
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [
{
"@type": "ListItem",
"position": 1,
"name": "Home",
"item": "https://jouwdomein.nl"
},
{
"@type": "ListItem",
"position": 2,
"name": "SEO",
"item": "https://jouwdomein.nl/seo/"
},
{
"@type": "ListItem",
"position": 3,
"name": "Breadcrumb navigatie",
"item": "https://jouwdomein.nl/seo/breadcrumb-navigatie/"
}
]
}
</script>
Platzieren Sie dieses Skript in der oder am unteren Rand der der Seite.
Aan de slag met SEO? Neem gerust contact op.
4. Implementierung in WordPress
Verwenden Sie WordPress? Dann gibt es drei Möglichkeiten, Breadcrumb + Schema automatisch einzustellen:
Option 1: Yoast SEO
- Aktivieren Sie unten: SEO > Suche Ansicht > Brotkrümel
Fügen Sie den PHP-Code in Ihr Thema ein:
php
<?php
if (function_exists('yoast_breadcrumb')) {
yoast_breadcrumb('<p id="breadcrumbs">', '</p>');
}
?>
Option 2: Rangliste Mathematik
- Aktivieren Sie Breadcrumbs unter Rank Math > Allgemein > Breadcrumbs
- Automatisch integriertes JSON-LD
Option 3: Manuell
- Eigenes HTML + benutzerdefiniertes Schema-Markup wie oben verwenden
5. Prüfung und Validierung
Prüfen Sie, ob Google Ihre Breadcrumbs richtig erkennt.
Werkzeuge:
- Ergebnisreicher Test
- Schema Markup Validator
Prüfen Sie:
- Keine Fehler oder Warnungen
- Korrekte Positionen und URLs
- Struktur passt zur visuellen Navigation
6. Bewährte Praktiken
| Richtlinie | Anmerkungen |
| Anzeige von Breadcrumbs, wo es relevant ist | Denken Sie an Blogs, Kategorien, Dienstleistungen, Longform-Inhalte |
| Vollständige Hierarchie verwenden | Keine ‚Shortcut-Breadcrumbs‘, immer den vollständigen Pfad anzeigen |
| Visuell mit JSON-LD abgleichen | Google erwartet, dass auch Breadcrumbs auf der Seite erscheinen |
| Update zur Umstrukturierung der Website | Passen Sie das Markup auch an, wenn sich die URL-Struktur ändert |
Zusammenfassend
Brotkrumen mit Schema-Markup verbessern Ihre interne Linkstruktur, SEO und Benutzerfreundlichkeit. Mit ein paar Zeilen HTML und JSON-LD machen Sie sie nutzbar und in den Suchergebnissen sichtbar. Einfach, effektiv und unverzichtbar für jede gut strukturierte Website.
