Erstellen Sie SEO-freundliche Breadcrumbs mit MenuProcessor/Fluid in TYPO3

Breadcrumbs helfen Benutzern, sich auf Ihrer Website zurechtzufinden und verbessern die SEO-Rankings. Aber viele TYPO3 Websites überspringen sie oder implementieren sie falsch.

Dieser Leitfaden zeigt Ihnen, wie Sie mit dem MenuProcessor und Fluid Vorlagen von TYPO3 ordnungsgemäße Breadcrumbs erstellen. Sie erhalten saubere Auszeichnungen, strukturierte Daten und eine bessere Sichtbarkeit in der Suche.

Was sind Breadcrumbs in TYPO3?

Breadcrumbs sind kleine Navigationshilfen, die den Benutzern zeigen, wo sie sich auf Ihrer Website befinden. In TYPO3 können sie mit Hilfe von MenuProcessor und Fluid-Templates erstellt werden, um sowohl die HTML-Navigationspfade als auch die strukturierten Daten (Schema.org) zu generieren, die Suchmaschinen verstehen.

Warum sind Breadcrumbs wichtig für SEO & UX?

Bessere Benutzererfahrung – Benutzer können leicht zu höheren Seiten zurückkehren, ohne mehrmals auf "Zurück" zu klicken.
SEO-Vorteile – Google ersetzt oft Seiten-URLs in den Suchergebnissen durch Breadcrumb-Pfade, was sie sauberer und klickbarer macht.
Vorteil von strukturierten Daten – JSON-LD Breadcrumbs helfen Suchmaschinen, Ihre Seitenhierarchie zu verstehen, was die Chancen auf Rich Snippets erhöht.
Niedrigere Absprungrate – Besucher sind eher geneigt, andere Seiten zu erkunden.

Was macht Breadcrumbs SEO-freundlich?

Gute Breadcrumbs benötigen drei Dinge:

Semantisches HTML - Verwenden Sie eine ordnungsgemäße Listenmarkierung und Mikrodaten
Strukturierte Daten - JSON-LD-Schema für Suchmaschinen
Saubere URLs - Echte Seitenlinks, kein JavaScript

Die meisten Breadcrumb-Tutorials lassen den Teil mit den strukturierten Daten aus. Suchmaschinen lieben es.

So erstellen Sie SEO-freundliche Breadcrumbs in TYPO3

Hier ist die schrittweise Methode, die Fluid und MenuProcessor kombiniert:

Einrichten des MenuProcessors

Zuerst konfigurieren Sie das Breadcrumb-Menü auf Ihrer Seite TypoScript. Fügen Sie dies zu Ihrem Seitenobjekt hinzu:

page = PAGE
page {
    10 = FLUIDTEMPLATE
    10 {
        dataProcessing {
            20 = TYPO3\CMS\Frontend\DataProcessing\MenuProcessor
            20 {
                menuLevelStart = 0
                menuLevelEnd = 10
                includeSpacer = 1
                as = breadcrumb
                special = rootline
                special.range = 0|-1
            }
        }
    }
}

page = PAGE
page {
    10 = FLUIDTEMPLATE
    10 {
        dataProcessing {
            20 = TYPO3\CMS\Frontend\DataProcessing\MenuProcessor
            20 {
                menuLevelStart = 0
                menuLevelEnd = 10
                includeSpacer = 1
                as = breadcrumb
                special = rootline
                special.range = 0|-1
            }
        }
    }
}

Erklärung der Schlüsseleinstellungen:

special = rootline erstellt den Seitenhierarchiepfad
special.range = 0|-1 beinhaltet die Hauptseite bis zur aktuellen Seite
includeSpacer = 1 beinhaltet Abstandsseiten in der Navigation
as = breadcrumb stellt Daten als {breadcrumb} in Fluid zur Verfügung

Erstellung der Fluid-Vorlage

Bauen Sie nun das Breadcrumb-HTML in Ihrer Fluid-Vorlage:

<f:if condition="{breadcrumb}">
    <nav aria-label="Breadcrumb" class="breadcrumb-nav">
        <ol class="breadcrumb" itemscope itemtype="https://schema.org/BreadcrumbList">
            <f:for each="{breadcrumb}" as="item" iteration="iteration">
                <f:if condition="{iteration.isLast}">
                    <f:then>
                        <li class="breadcrumb-item active" 
                            itemprop="itemListElement" 
                            itemscope 
                            itemtype="https://schema.org/ListItem">
                            <span itemprop="name">{item.title}</span>
                            <meta itemprop="position" content="{iteration.index}" />
                        </li>
                    </f:then>
                    <f:else>
                        <li class="breadcrumb-item" 
                            itemprop="itemListElement" 
                            itemscope 
                            itemtype="https://schema.org/ListItem">
                            <f:link.page pageUid="{item.uid}" itemprop="item">
                                <span itemprop="name">{item.title}</span>
                            </f:link.page>
                            <meta itemprop="position" content="{iteration.index}" />
                        </li>
                    </f:else>
                </f:if>
            </f:for>
        </ol>
    </nav>
</f:if>

<f:if condition="{breadcrumb}">
    <nav aria-label="Breadcrumb" class="breadcrumb-nav">
        <ol class="breadcrumb" itemscope itemtype="https://schema.org/BreadcrumbList">
            <f:for each="{breadcrumb}" as="item" iteration="iteration">
                <f:if condition="{iteration.isLast}">
                    <f:then>
                        <li class="breadcrumb-item active" 
                            itemprop="itemListElement" 
                            itemscope 
                            itemtype="https://schema.org/ListItem">
                            <span itemprop="name">{item.title}</span>
                            <meta itemprop="position" content="{iteration.index}" />
                        </li>
                    </f:then>
                    <f:else>
                        <li class="breadcrumb-item" 
                            itemprop="itemListElement" 
                            itemscope 
                            itemtype="https://schema.org/ListItem">
                            <f:link.page pageUid="{item.uid}" itemprop="item">
                                <span itemprop="name">{item.title}</span>
                            </f:link.page>
                            <meta itemprop="position" content="{iteration.index}" />
                        </li>
                    </f:else>
                </f:if>
            </f:for>
        </ol>
    </nav>
</f:if>

Diese Vorlage behandelt:

Zugänglichkeit - aria-label und semantisches
Element
Microdata - Schema.org BreadcrumbList Markup
Aktuelle Seite - Kein Link auf der aktiven Seite
Positionsdaten - Jeder Artikel erhält eine Positionsnummer

Hinzufügen von JSON-LD Strukturierten Daten

Microdata ist gut, aber JSON-LD ist besser für SEO. Fügen Sie dies zu Ihrer Vorlage hinzu:

<f:if condition="{breadcrumb}">
    <script type="application/ld+json">
    {
        "@context": "https://schema.org",
        "@type": "BreadcrumbList",
        "itemListElement": [
            <f:for each="{breadcrumb}" as="item" iteration="iteration">
            {
                "@type": "ListItem",
                "position": {iteration.index},
                "name": "<f:format.htmlentities>{item.title}</f:format.htmlentities>",
                "item": "<f:uri.page pageUid='{item.uid}' absolute='1' />"
            }<f:if condition="{iteration.isLast}"><f:else>,</f:else></f:if>
            </f:for>
        ]
    }
    </script>
</f:if>

<f:if condition="{breadcrumb}">
    <script type="application/ld+json">
    {
        "@context": "https://schema.org",
        "@type": "BreadcrumbList",
        "itemListElement": [
            <f:for each="{breadcrumb}" as="item" iteration="iteration">
            {
                "@type": "ListItem",
                "position": {iteration.index},
                "name": "<f:format.htmlentities>{item.title}</f:format.htmlentities>",
                "item": "<f:uri.page pageUid='{item.uid}' absolute='1' />"
            }<f:if condition="{iteration.isLast}"><f:else>,</f:else></f:if>
            </f:for>
        ]
    }
    </script>
</f:if>

Wichtige Hinweise:

Verwenden Sie absolute='1' für vollständige URLs in JSON-LD
HTML-Entitäten im Titel escapen
Fügen Sie kein Komma nach dem letzten Element hinzu

Grundlegendes CSS Styling

Fügen Sie einige grundlegende Stile hinzu, um Breadcrumbs ansehnlich zu machen:

.breadcrumb-nav {
    margin-bottom: 1rem;
    font-size: 0.875rem;
}

.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
}

.breadcrumb-item {
    display: flex;
    align-items: center;
}

.breadcrumb-item + .breadcrumb-item::before {
    content: "/";
    margin: 0 0.5rem;
    color: #6c757d;
}

.breadcrumb-item.active {
    color: #6c757d;
}

.breadcrumb-item a {
    text-decoration: none;
    color: #007bff;
}

.breadcrumb-item a:hover {
    text-decoration: underline;
}

.breadcrumb-nav {
    margin-bottom: 1rem;
    font-size: 0.875rem;
}

.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
}

.breadcrumb-item {
    display: flex;
    align-items: center;
}

.breadcrumb-item + .breadcrumb-item::before {
    content: "/";
    margin: 0 0.5rem;
    color: #6c757d;
}

.breadcrumb-item.active {
    color: #6c757d;
}

.breadcrumb-item a {
    text-decoration: none;
    color: #007bff;
}

.breadcrumb-item a:hover {
    text-decoration: underline;
}

Erweiterte Konfigurationsoptionen

Root-Seite überspringen

Möchten Sie nicht "Home" in jedem Breadcrumb haben? Ändern Sie den Bereich:

special.range = 1|-1

special.range = 1|-1

Benutzerdefinierte Seitentitel

Verwenden Sie in Breadcrumbs andere Titel als Seitentitel:

20 {
    dataProcessing {
        10 = TYPO3\CMS\Frontend\DataProcessing\DatabaseQueryProcessor
        10 {
            table = pages
            pidInList.field = uid
            selectFields = uid, title, nav_title
            as = pageData
        }
    }
}

Then in Fluid:
<span itemprop="name">
    <f:if condition="{item.nav_title}">
        <f:then>{item.nav_title}</f:then>
        <f:else>{item.title}</f:else>
    </f:if>
</span>

20 {
    dataProcessing {
        10 = TYPO3\CMS\Frontend\DataProcessing\DatabaseQueryProcessor
        10 {
            table = pages
            pidInList.field = uid
            selectFields = uid, title, nav_title
            as = pageData
        }
    }
}

Then in Fluid:
<span itemprop="name">
    <f:if condition="{item.nav_title}">
        <f:then>{item.nav_title}</f:then>
        <f:else>{item.title}</f:else>
    </f:if>
</span>

Bestimmte Seitentypen ausblenden

Schließen Sie bestimmte Seitentypen aus Breadcrumbs aus:

20 {
    excludePages = 199,254
    excludeDoktypes = 199,254
}

20 {
    excludePages = 199,254
    excludeDoktypes = 199,254
}

So testen Sie die Breadcrumbs Ihrer TYPO3-Website

Verwenden Sie diese Tools, um sicherzustellen, dass alles funktioniert:

Google Rich Results Test - Überprüfen Sie strukturierte Daten
Browser DevTools - Untersuchen Sie HTML-Markup
WAVE - Testen Sie die Einhaltung von Barrierefreiheit

Häufige Probleme, auf die Sie achten sollten:

Fehlende Positionsnummern in strukturierten Daten
Defekte Links zu versteckten oder gelöschten Seiten
JavaScript-Fehler durch fehlerhaftes JSON-LD

Leistungsüberlegungen

MenuProcessor speichert Menüdaten automatisch im Cache. Aber Sie können weiter optimieren:

20 {
    cache {
        key = breadcrumb_{page:uid}
        lifetime = 86400
        tags = pages
    }
}

20 {
    cache {
        key = breadcrumb_{page:uid}
        lifetime = 86400
        tags = pages
    }
}

Dies speichert Brotkrumen für 24 Stunden im Cache und löscht sie, wenn sich die Seiten ändern.

Fehlerbehebung bei häufigen Problemen

Breadcrumbs werden nicht angezeigt?

Überprüfen Sie, ob Seiten in der Navigation versteckt sind
Überprüfen Sie die Konfiguration des MenuProcessors
Suchen Sie nach Fehlern in der Fluid-Vorlage

Fehlende strukturierte Daten?

Überprüfen Sie die JSON-Syntax
Überprüfen Sie die Generierung absoluter URLs
Testen Sie mit Googles Tool

Falsche Seitenhierarchie?

Überprüfen Sie die Struktur des Seitenbaums
Überprüfen Sie die spezielle Konfiguration der Rootline
Stellen Sie sicher, dass Seitenverknüpfungen keine Pfade unterbrechen

Validierung Ihrer Breadcrumbs für TYPO3-Seiten

Google Rich Results Test – Hier prüfen
Schema.org Validator – Schema testen
Zugänglichkeitsprüfung – Verwenden Sie WAVE oder Lighthouse.

Abschluss

Sie haben jetzt SEO-freundliche Breadcrumbs, die mit dem Caching von TYPO3 funktionieren und reichhaltige Suchdaten liefern. Die Kombination aus korrekter HTML-Markierung, Mikrodaten und JSON-LD bietet Ihnen die beste Chance auf verbesserte Suchergebnisse.

Der Schlüssel liegt in der Einfachheit. Überkonstruieren Sie Breadcrumbs nicht. Konzentrieren Sie sich auf klare Navigation und saubere Markierung.

Erstellen Sie SEO-freundliche Breadcrumbs mit MenuProcessor/Fluid in TYPO3

Was sind Breadcrumbs in TYPO3?

Warum sind Breadcrumbs wichtig für SEO & UX?

Was macht Breadcrumbs SEO-freundlich?

So erstellen Sie SEO-freundliche Breadcrumbs in TYPO3

Einrichten des MenuProcessors

Erstellung der Fluid-Vorlage

Hinzufügen von JSON-LD Strukturierten Daten

Grundlegendes CSS Styling

Erweiterte Konfigurationsoptionen

Root-Seite überspringen

Benutzerdefinierte Seitentitel

Bestimmte Seitentypen ausblenden

So testen Sie die Breadcrumbs Ihrer TYPO3-Website

Leistungsüberlegungen

Fehlerbehebung bei häufigen Problemen

Validierung Ihrer Breadcrumbs für TYPO3-Seiten

Abschluss

Post a Comment

Got answer to the question you were looking for?

Erstellen Sie SEO-freundliche Breadcrumbs mit MenuProcessor/Fluid in TYPO3

Was sind Breadcrumbs in TYPO3?

Warum sind Breadcrumbs wichtig für SEO & UX?

Was macht Breadcrumbs SEO-freundlich?

So erstellen Sie SEO-freundliche Breadcrumbs in TYPO3

Einrichten des MenuProcessors

Erstellung der Fluid-Vorlage

Hinzufügen von JSON-LD Strukturierten Daten

Grundlegendes CSS Styling

Erweiterte Konfigurationsoptionen

Root-Seite überspringen

Benutzerdefinierte Seitentitel

Bestimmte Seitentypen ausblenden

So testen Sie die Breadcrumbs Ihrer TYPO3-Website

Leistungsüberlegungen

Fehlerbehebung bei häufigen Problemen

Validierung Ihrer Breadcrumbs für TYPO3-Seiten

Abschluss

Post a Comment

Related Tutorials

Got answer to the question you were looking for?