Breadcrumbs und Schema Markups, der SEO-Boost für deine Website
Breadcrumbs und Schema Markups: So verbesserst du SEO und Navigation deiner Website
Breadcrumbs und Schema Markups sind unverzichtbare Tools, wenn es darum geht, deine Website sowohl benutzerfreundlich als auch SEO-optimiert zu gestalten. Sie helfen Nutzern, sich auf deiner Seite besser zurechtzufinden, und verbessern gleichzeitig die Darstellung deiner Website in den Suchergebnissen durch sogenannte Rich Snippets.
Was du in diesem Beitrag lernst
- Wie Breadcrumbs und Schema Markups funktionieren
- Praktische Codebeispiele zur direkten Implementierung
- Anleitungen für Webflow, WordPress und Wix
- Tools, mit denen du deine Implementierung testen kannst
Was sind Breadcrumbs und warum sind sie wichtig?
Breadcrumbs, auch als Brotkrümel-Navigation bekannt, zeigen Nutzern, wo sie sich auf deiner Website befinden und wie sie zurück zur Startseite oder zu übergeordneten Kategorien navigieren können. Sie verbessern nicht nur die Benutzererfahrung, sondern bieten auch erhebliche Vorteile für die Suchmaschinenoptimierung.
Die Vorteile von Breadcrumbs
- Sie machen deine Website übersichtlicher und benutzerfreundlicher.
- Sie erleichtern es Google, die Struktur deiner Website zu verstehen.
- Sie können in den Suchergebnissen anstelle der URL als Navigation angezeigt werden.
Beispiel für eine Breadcrumb-Navigation: Startseite > Blog > Artikelname
Wie Breadcrumbs mit Schema Markup kombiniert werden
Schema Markup ist ein Code, der den Breadcrumbs hinzugefügt wird, damit Suchmaschinen wie Google die hierarchische Struktur deiner Website verstehen können. Mit Schema Markup kannst du festlegen, wie deine Seiten miteinander verbunden sind und in welcher Reihenfolge sie erscheinen sollen.
Beispiel: JSON-LD für Breadcrumbs
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [
{
"@type": "ListItem",
"position": 1,
"name": "Home",
"item": "https://example.com"
},
{
"@type": "ListItem",
"position": 2,
"name": "Blog",
"item": "https://example.com/blog"
},
{
"@type": "ListItem",
"position": 3,
"name": "Artikelname",
"item": "https://example.com/blog/artikelname"
}
]
}
</script>
Die wichtigsten Felder im Schema Markup
@context: Gibt an, dass Schema.org verwendet wird.@type: Definiert die Art der Daten (hier BreadcrumbList).itemListElement: Listet alle Stufen der Navigation auf.position: Gibt die Reihenfolge der Breadcrumbs an.name: Der angezeigte Text des Breadcrumbs.item: Die URL, die mit dem Breadcrumb verlinkt ist.
Verschiedene Markups, die du nutzen kannst
Neben Breadcrumbs gibt es viele weitere Markups, die dir helfen können, deine SEO zu verbessern. Hier sind einige Beispiele:
Produkt-Markup
Nutze dieses Markup, um Informationen über ein Produkt in den Suchergebnissen anzuzeigen.
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Product",
"name": "Beispielprodukt",
"image": "https://example.com/produktbild.jpg",
"description": "Eine kurze Beschreibung des Produkts.",
"brand": {
"@type": "Brand",
"name": "Beispielmarke"
},
"offers": {
"@type": "Offer",
"price": "29.99",
"priceCurrency": "EUR",
"availability": "https://schema.org/InStock",
"url": "https://example.com/beispielprodukt"
}
}
</script>
Artikel-Markup
Dieses Markup eignet sich hervorragend für Blogbeiträge und Nachrichtenartikel.
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Article",
"headline": "Beispielartikel",
"author": {
"@type": "Person",
"name": "Max Mustermann"
},
"publisher": {
"@type": "Organization",
"name": "Beispielverlag",
"logo": {
"@type": "ImageObject",
"url": "https://example.com/logo.png"
}
},
"datePublished": "2024-11-27",
"mainEntityOfPage": {
"@type": "WebPage",
"@id": "https://example.com/beispielartikel"
}
}
</script>
Wie du deine Schema Markups testest
Bevor du diese Code kopierst und einfach einfügst, solltest du sie immer als erstes überprüfen. Auf den folgenden zwei Seiten kannst du genau überprüfen ob sich keine Fehler versteckt haben.
Google Rich Results Test
Mit diesem Tool kannst du überprüfen, ob dein Markup für Rich Snippets geeignet ist und ob du alles richtig eingegeben hast.
- Gehe auf https://search.google.com/test/rich-results?hl=de.
- Füge die URL deiner Seite oder deinen Markup-Code ein.
- Klicke auf Testen und prüfe, ob Fehler angezeigt werden.
Schema Markup Validator
Der Schema Markup Validator zeigt dir detaillierte Fehlerberichte an, dort kannst deinen Code überprüfen.
- Besuche https://validator.schema.org/?hl=de.
- Kopiere deine URL oder den Code und füge ihn ein.
- Lies die Ergebnisse durch und behebe eventuelle Fehler.
Wie du Breadcrumbs in Webflow, WordPress und Wix hinzufügst
Webflow
- Gehe in den Page Settings der jeweiligen Seite.
- Füge den JSON-LD-Code in den Bereich Custom Code (Before </head>) ein.
- Veröffentliche die Seite, um die Änderungen live zu schalten.
WordPress
- Mit Yoast SEO:
- Aktiviere Breadcrumbs in den SEO-Einstellungen des Plugins.
- Füge den Shortcode [wpseo_breadcrumb] in dein Theme ein.
- Manuelle Methode:
- Öffne die Datei
header.phpoderfunctions.phpdeines Themes. - Füge den JSON-LD-Code im
<head>-Bereich ein. - Head/Footer Plugin
- Öffne die Datei
Wix
- Öffne die SEO-Einstellungen im Wix Editor.
- Füge den JSON-LD-Code in den Bereich Benutzerdefinierter Code ein.
- Veröffentliche die Änderungen und teste die Implementierung.
Fazit
Breadcrumbs und Schema Markups sind einfache, aber äußerst wirkungsvolle Möglichkeiten, deine Website zu verbessern. Sie machen deine Inhalte für Nutzer und Suchmaschinen verständlicher, steigern die Sichtbarkeit in den Suchergebnissen und erhöhen die Klickrate. Mit den hier gezeigten Beispielen und Anleitungen kannst du direkt loslegen und deine Website auf das nächste Level bringen. Vergiss nicht, deine Implementierung mit den genannten Tools zu testen, um sicherzustellen, dass alles reibungslos funktioniert.
Disclaimer: Alle Angaben und Codes sind nach besten Gewissen zusammengestellt, für die vollständige Richtigkeit gibt es keine Garantie.