Virusscanner tips?
Juiste structuur voor breadcrumbs
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:
Code (php)
1
2
3
4
5
2
3
4
5
<div id="breadcrumbs">
<a href="index.php">Home</a> >
<a href="categorie1.php">Categorie 1</a> >
<a href="huidigepagina.php">Pagina</a>
</div>
<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:
Code (php)
1
2
3
4
5
2
3
4
5
<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>
<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
Code (php)
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
<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>
<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)?
Gewijzigd op 26/08/2013 13:48:37 door Bas IJzelendoorn
https://support.google.com/webmasters/answer/185417?hl=nl
Een geneste hiërarchie is, ook volgens Google, hier niet voor nodig: je toont namelijk geen lijsten binnen lijsten, maar één pad met meerdere 1 op 1 samenhangende elementen.
home
home/categorie1
home/categorie1/pagina
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
Gewijzigd op 26/08/2013 14:07:21 door Kris Peeters
Code (php)
1
2
3
2
3
<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>
<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.
Thnx!
Code (php)
1
2
3
4
5
2
3
4
5
<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>
<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:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
<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>
<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>
Gewijzigd op 26/08/2013 14:37:02 door Wouter J
Maar zouden jullie het interessant/relevant vinden mocht men een <breadcrumb> element maken?
Kris Peeters op 26/08/2013 15:29:08:
Nee, om uiteenlopende redenen.Niet dat het zal gebeuren, omdat wij een mening hebben ...
Maar zouden jullie het interessant/relevant vinden mocht men een <breadcrumb> element maken?
Maar zouden jullie het interessant/relevant vinden mocht men een <breadcrumb> element maken?
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 ;)