Fil d'Ariane

Fil d'Ariane : «Breadcrumb»

Un fil d'Ariane sur une page indique la position de la page dans la hiérarchie du site. Elle peut aider les utilisateurs à comprendre et à explorer un site plus efficacement.

Pour optimiser le référencement, il faut ajouter un script JSON+ld dans le <HEAD> et utiliser les conventions de balisage de type micro données de schema.org
L'élément de division est personnalisable via la variable css locale --divider

Pour plus d'informations voir le guide du développeur de Google. Les données sont englobées dans une balise <nav> et les liens dans une liste ordonnée <ol> 

<head>
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "BreadcrumbList",
    "itemListElement": [{
	    "@type": "ListItem",
	    "position": 1,
	    "name": "Accueil",
	    "item": "https://jdelauney.github.io/sass-swing/"
    },{
	    "@type": "ListItem",
	    "position": 2,
	    "name": "Documentation",
	    "item": "https://jdelauney.github.io/sass-swing/documentation"
    },{
	    "@type": "ListItem",
	    "position": 3,
	    "name": "Fil d'ariane"
    }]
  }
  </script>
</head>
<nav class="breadcrumb-nav" aria-label="Fil d'Ariane">
	<ol itemscope itemtype="https://schema.org/BreadcrumbList">
		<li itemprop="itemListElement" itemscope
		    itemtype="https://schema.org/ListItem">
			<a itemprop="item" href="https://jdelauney.github.io/sass-swing/">
				<span itemprop="name">Accueil</span>
			</a>
			<meta itemprop="position" content="1" />
		</li>
		<li itemprop="itemListElement" itemscope
		    itemtype="https://schema.org/ListItem">
			<a itemprop="item" href="https://jdelauney.github.io/sass-swing/documentation/">
				<span itemprop="name">Documentation</span>
			</a>
			<meta itemprop="position" content="2" />
		</li>
		<li itemprop="itemListElement" itemscope
		    itemtype="https://schema.org/ListItem" aria-current="page">
			<span itemprop="name">FIl d'ariane</span>
			<meta itemprop="position" content="3" />
		</li>
	</ol>
</nav>

<nav class="breadcrumb-nav" aria-label="Fil d'Ariane" style="--divider:'/';">
	<ol itemscope itemtype="https://schema.org/BreadcrumbList">
		<li itemprop="itemListElement" itemscope
		    itemtype="https://schema.org/ListItem">
			<a itemprop="item" href="https://jdelauney.github.io/sass-swing/">
				<span itemprop="name">Accueil</span>
			</a>
			<meta itemprop="position" content="1" />
		</li>
		<li itemprop="itemListElement" itemscope
		    itemtype="https://schema.org/ListItem">
			<a itemprop="item" href="https://jdelauney.github.io/sass-swing/documentation/">
				<span itemprop="name">Documentation</span>
			</a>
			<meta itemprop="position" content="2" />
		</li>
		<li itemprop="itemListElement" itemscope
		    itemtype="https://schema.org/ListItem" aria-current="page">
			<span itemprop="name">FIl d'ariane</span>
			<meta itemprop="position" content="3" />
		</li>
	</ol>
</nav>

<nav class="breadcrumb-nav" aria-label="Fil d'Ariane" style="--divider:url(&#34;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='currentColor'/%3E%3C/svg%3E&#34;);">
	<ol itemscope itemtype="https://schema.org/BreadcrumbList">
		<li itemprop="itemListElement" itemscope
		    itemtype="https://schema.org/ListItem">
			<a itemprop="item" href="https://jdelauney.github.io/sass-swing/">
				<span itemprop="name">Accueil</span>
			</a>
			<meta itemprop="position" content="1" />
		</li>
		<li itemprop="itemListElement" itemscope
		    itemtype="https://schema.org/ListItem">
			<a itemprop="item" href="https://jdelauney.github.io/sass-swing/documentation/">
				<span itemprop="name">Documentation</span>
			</a>
			<meta itemprop="position" content="2" />
		</li>
		<li itemprop="itemListElement" itemscope
		    itemtype="https://schema.org/ListItem" aria-current="page">
			<span itemprop="name">FIl d'ariane</span>
			<meta itemprop="position" content="3" />
		</li>
	</ol>
</nav>