Wat is een broodkruimelpad op een website? Markup- en schemabuilder | We.Inc
Wat broodkruimelnavigatie is, het toegankelijke HTML-patroon met aria-current, de BreadcrumbList-regels van Google en een builder die beide voor u schrijft.
Een broodkruimelpad (breadcrumb) is het korte spoor van links bovenaan een pagina, zoals Home > Schoenen > Hardloopschoenen, dat laat zien waar de pagina in de site staat. Bezoekers gebruiken het om een niveau terug te gaan. Met BreadcrumbList structured data helpt het Google ook de hiërarchie van uw site te begrijpen.
De drie soorten broodkruimelpaden
Type
Voorbeeld
Het meest geschikt voor
Locatie (hiërarchie)
Home > Schoenen > Hardloopschoenen
Winkels, blogs en de meeste sites
Kenmerk
Schoenen > Maat 9 > Blauw
Gekozen filters tonen op een productlijst
Pad (geschiedenis)
De pagina's waar deze bezoeker doorheen klikte
Zelden nuttig; de terugknop van de browser doet dit al
De naam komt van het sprookje met het spoor van broodkruimels. Op een website is het een secundair menu, dus het vervangt nooit de hoofdnavigatie. Hieronder vindt u het toegankelijke HTML-patroon van het W3C, de structured data die Google leest en een builder die beide schrijft op basis van uw eigen pad.
Typ uw pad in de builder, één niveau per regel, van de homepage tot de huidige pagina.
Zet na elke naam het volledige adres, gescheiden door een verticale streep. De laatste regel mag het weglaten.
Kopieer de HTML naar uw paginatemplate en de JSON-LD naar de head van de pagina.
Test de pagina met de Rich Results Test van Google voordat u het over de hele site uitrolt.
Toon het pad van de plek van de pagina in de site, niet de route die een bezoeker nam.
Maak van elke kruimel een link, behalve de huidige pagina, die aria-current="page" krijgt.
Houd het zichtbare broodkruimelpad en de structured data gelijk, zodat de markup beschrijft wat mensen echt zien.
Teken de scheidingstekens met CSS, zoals het W3C-voorbeeld doet, zodat schermlezers geen rij pijltjes voorlezen.
Laat het pad op kleine schermen over twee regels doorlopen in plaats van zijwaarts te scrollen.
Veelgestelde vragen
Helpen broodkruimelpaden bij SEO?
De documentatie van Google over breadcrumbs zegt dat Google breadcrumb-markup in de body van een pagina gebruikt om de informatie erop te categoriseren. Ze geven crawlers ook meer interne links omhoog in de hiërarchie. Op zichzelf zijn ze geen snelkoppeling naar een hogere ranking.
Wat eist Google in BreadcrumbList?
Een itemListElement-array met minstens twee ListItem-elementen. Elk heeft een name nodig, een position die begint bij 1, en een item met de URL van de pagina. De laatste kruimel mag item weglaten; Google gebruikt dan de URL van de pagina waarop hij staat.
Moet het broodkruimelpad de huidige pagina bevatten?
Het W3C-patroon neemt hem op als laatste link, gemarkeerd met aria-current ingesteld op page. Veel sites tonen hem in plaats daarvan als gewone tekst. Beide zijn prima, zolang gebruikers van schermlezers kunnen zien welk onderdeel het huidige is.
Welk element moet een broodkruimelpad omsluiten?
Een nav-element met een label zoals aria-label="Breadcrumb", met daarin een geordende lijst. Het W3C-voorbeeld gebruikt precies dat, omdat de volgorde van de links betekenis heeft.
Kan een pagina meer dan één broodkruimelpad hebben?
Ja. De pagina van Google toont een voorbeeld met twee BreadcrumbList-items voor een pagina die via twee categorieën bereikbaar is. Toon beide paden ook aan bezoekers, zodat de markup overeenkomt met de pagina.
Toegankelijke markup voor broodkruimelpaden
Het patroon uit de WAI-ARIA Authoring Practices heeft drie eisen: zet het pad in een navigatie-landmark, geef dat landmark een label met aria-label of aria-labelledby, en zet aria-current op page bij de link naar de huidige pagina. MDN beschrijft de waarde page van aria-current als de link naar het huidige document in een broodkruimelpad.
Het W3C-voorbeeld structureert de links als geordende lijst en tekent de scheidingstekens met CSS-randen, zodat hulptechnologie alleen de paginanamen voorleest.
Structured data die overeenkomt
Schema.org legt uit dat de eigenschap position wordt gebruikt om de volgorde van de items te reconstrueren, met lagere getallen eerst. Begin bij 1 voor de top van het pad, meestal uw homepage of een hoofdcategorie.
JSON-LD, een blok structured data in een script-tag, is het makkelijkste formaat om toe te voegen omdat het los staat van uw zichtbare HTML. De builder hieronder schrijft het op basis van dezelfde lijst die het zichtbare pad aanstuurt.
Opmaak van scheidingstekens
Deze CSS tekent een kleine chevron vóór elke kruimel behalve de eerste, zodat de scheidingstekens nooit in de tekst staan die een schermlezer voorleest.
Broodkruimelpad met CSS-scheidingstekens
Pas de namen aan om het te proberen. De chevrons komen uit de ::before-regel, niet uit tekens in de HTML.
Broodkruimelpad-builder
Uw pad, één niveau per regel: Naam | volledig adres
Voorbeeld
HTML
JSON-LD structured data
Kopiëren
Gekopieerd
Google vraagt om minstens twee items in een BreadcrumbList. Voeg nog een niveau toe.
Regel {n} heeft geen adres. Alleen het laatste item mag het weglaten.
Gemaakt in uw browser op basis van wat u typt. Er wordt niets geüpload.