PHPhulp.nl PHPhulp.nl
35k+ leden Over PHPhulp Offerte opdracht Contact

Juiste structuur voor breadcrumbs

Door Bas IJzelendoorn op 26-08-2013 13:46 gewijzigd op 26-08-2013 13:48
2.474 views
Ben druk bezig met een website te bouwen tot mij iets te binnen schoot. Breadcrumbs, niet alleen handig voor zoekoptimalisatie, maar ook voor gebruikers steeds belangrijker. Ondenkbaar in veel gevallen om weg te laten omdat het trapsgewijs weergeeft waar je je bevindt op een website.

Maar wat is nu de beste HTML(5) weergave hiervoor. Ik kon niet zo snel antwoordt vinden op het internet op mijn vraag (misschien verkeerd gezocht).

Als ik bijvoorbeeld de volgende breadcrumbs heb:

Home > categorie 1 > pagina

Dan zou het op de simpelste manier zijn:

<div id="breadcrumbs">
	<a href="index.php">Home</a> > 
	<a href="categorie1.php">Categorie 1</a> > 
	<a href="huidigepagina.php">Pagina</a>
</div>


De code die ik altijd gebruik en op veel andere website's ook wordt toegepast (waaronder PHPhulp) is:

<ul id="breadcrumbs">
	<li><a href="index.php">Home</a> ></li> 
	<li><a href="categorie1.php">Categorie 1</a> ></li> 
	<li><a href="huidigepagina.php">Pagina</a></li>
</ul>


Maar als ik heel logisch probeer te denken zit je net als dat je in een diepergaande navigatie, met een steeds dieper niveau:

- Home
--> categorie 1
--> --> (huidige) pagina 


<ul id="breadcrumbs">
	<li><a href="index.php">Home</a> >
		<ul>
			<li><a href="categorie1.php">Categorie 1</a> >
				<ul>
					<li><a href="huidigepagina.php">Pagina</a></li>
				</ul>
			</li>
		</ul>
	</li>
</ul>


Nu maakt dit voor de gebruiker helemaal niets uit. Maar maakt dit uit voor een zoekmachine? En wat is de juiste manier (is die er überhaupt)?
Bas IJzelendoorn
26-08-2013 13:59
Dus dat zou betekenen dat optie 1 beter is dan de tweede of de derde zolang de url logisch is. Dus:

home
home/categorie1
home/categorie1/pagina
Kris Peeters
26-08-2013 14:05 gewijzigd op 26-08-2013 14:07
Bas IJzelendoorn op 26/08/2013 13:46:14

Maar als ik heel logisch probeer te denken zit je net als dat je in een diepergaande navigatie, met een steeds dieper niveau:


Ja, okay ...
Maar een breadcrumb is nu net de weg die gevolgd wordt binnen een hierarchische boomstructuur.
Dat is 1 weg, waarbij 1 plaats meer naar rechts (in de breadcrumb) overeen komt met 1 niveau dieper in de boomstructuur.
Ik zie geen reden waarom je die weg zelf ook zou nesten.

---
Edit:
Die optie met de <ul>, niet genest, lijkt me wel interessant.
Het valt ook goed te stylen met css.
bv. :last-child kan van pas komen

Ward van der Put
26-08-2013 14:07
Ja inderdaad, alleen noemt het voorbeeld van Google ook een hiërarchische directorystructuur en mag je aannemen dat deze het SEO-effect van het kruimelpad versterkt:


  <a href="http://www.example.com/jurken">Jurken</a> › 
  <a href="http://www.example.com/jurken/lang">Lange jurken</a> › 
  <a href="http://www.example.com/jurken/lang/groen">Lange groene jurken</a>


Ik gebruik zelf wel eens het rel-attribuut en ook dat lijkt enig effect te hebben.
Bas IJzelendoorn
26-08-2013 14:11
Dan snap ik hem helemaal :)

Thnx!
Wouter J
26-08-2013 14:36 gewijzigd op 26-08-2013 14:37
Ik zou het zien als een ordered list. Het is een lijst van pagina's, waarbij de volgorde belangrijk is:


<ol>
  <li><a href="index.php">Home</a></li>
  <li><a href="categorie1.php">Categorie 1</a></li>
  <li><a href="huidigepagina.php">Pagina</a></li>
</ol>


Vervolgens kun je deze CSS gebruiken en je hebt een keurig breadcrumpje.

Als je het wilt gebruiken in combinatie met microdata (wat ik zeker aanraad), dan is dit helaas niet mogelijk. Dan moet je iets als dit doen:

<ul itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
  <li><a itemprop="url" href="index.php"><span itemprop="title">Home</span></a>
    <ul itemscope itemtype="http://data-vocabulary.org/Breadcrumb">>
      <li><a itemprop="url" href="categorie1.php"><span itemprop="title">Categorie 1</span></a>
        <ul itemscope itemtype="http://data-vocabulary.org/Breadcrumb">>
          <li><a itemprop="url" href="huidigepagina.php"><span itemprop="title">Pagina</span></a>
        </ul>
      </li>
    </ul>
  </li>
</ul>

Nou, dat is gewoonweg lelijk naar mijn mening. Maar aangezien dit wel bevoordelijk is voor je SEO en dat toch 1 van de grootste redenen is van breadcrumb zou ik dit wel gaan gebruiken, mits het automatisch gerendert wordt.
</ul>
Kris Peeters
26-08-2013 15:29
Niet dat het zal gebeuren, omdat wij een mening hebben ...

Maar zouden jullie het interessant/relevant vinden mocht men een <breadcrumb> element maken?
Wouter J
26-08-2013 15:36
nee
Ward van der Put
26-08-2013 15:47
Kris Peeters op 26/08/2013 15:29:08

Niet dat het zal gebeuren, omdat wij een mening hebben ...

Maar zouden jullie het interessant/relevant vinden mocht men een <breadcrumb> element maken?
Nee, om uiteenlopende redenen.

We hebben al <nav> in HTML5 voor navigatie en <menu> voor menu's die géén navigatie faciliteren. Dat onderscheid is lastig maar voldoet.

Bij "breadcrumbs" of een "kruimelpad" denken we in de eerste plaats aan presentatie. Dat is daarom het domein van CSS, niet van HTML5. Bovendien kun je bestaande HTML-elementen nu ook al stileren tot een kruimelpad.

Verder heb je nog een techneuterig argument: we hebben al het directorypad en breadcrumbs zijn een vergelijkbare presentatie van een informatieruimte. Vandaar overigens dat ik het voorbeeld van Google wel aardig vind, want het suggereert dat er meerdere wegen/paden naar Rome leiden ;)

Reageren

Inloggen om te reageren