Comment créer un fil d'Ariane automatique depuis l'URL dans Webflow ?

Apprenez à générer automatiquement un fil d'Ariane depuis l'URL dans Webflow avec données structurées JSON-LD.

Dans ce tutoriel, Sandro cofondateur de l'agence Webflow Gemeos vous montre comment générer automatiquement un fil d'Ariane depuis l'URL dans Webflow, avec données structurées JSON-LD pour le SEO.

Exemple

Fil d'Ariane généré depuis l'URL actuelle

URL	Fil d'Ariane généré	JSON-LD
gemeos.wf/academie/mon-article	Accueil / Académie / Mon Article	Oui, automatique
gemeos.wf/blog/post	Accueil / Blog / Post	Oui, automatique
gemeos.wf/services	Accueil / Services	Oui, automatique

1. Créez le conteneur dans Webflow

Créez un Div avec l'ID breadcrumb à l'endroit où vous voulez afficher le fil d'Ariane. Mettez-le en display: none par défaut : le script le rendra visible et injectera le contenu.

2. Personnalisez les labels

Le tableau labels traduit les slugs URL en labels lisibles. Ajoutez vos propres correspondances : 'nos-offres': 'Nos offres'.

3. Ajoutez le script dans Footer code

(function() {
  var container = document.getElementById('breadcrumb');
  if (!container) return;

  var labels = {
    'academie': 'Académie',
    'blog': 'Blog',
    'services': 'Services',
    'realisations': 'Réalisations',
    'contact': 'Contact',
  };

  var parts = window.location.pathname.split('/').filter(Boolean);
  var html = 'Accueil';

  var path = '';
  parts.forEach(function(part, i) {
    path += '/' + part;
    var label = labels[part] || part.replace(/-/g, ' ').replace(/\b\w/g, function(c) { return c.toUpperCase(); });
    html += '/';
    if (i === parts.length - 1) {
      html += '' + label + '';
    } else {
      html += '' + label + '';
    }
  });

  container.innerHTML = html;
  container.style.display = 'flex';
  container.style.alignItems = 'center';
  container.style.fontSize = '13px';
  container.style.flexWrap = 'wrap';
  container.style.gap = '0';
})();

4. Ajoutez les données structurées JSON-LD

Ce second script génère automatiquement le schema BreadcrumbList pour Google. Ajoutez-le juste après le premier dans le Footer code.

// JSON-LD pour le fil d'Ariane (SEO)
(function() {
  var parts = window.location.pathname.split('/').filter(Boolean);
  var items = [{ '@type': 'ListItem', position: 1, name: 'Accueil', item: window.location.origin }];
  var path = window.location.origin;
  parts.forEach(function(part, i) {
    path += '/' + part;
    items.push({ '@type': 'ListItem', position: i + 2,
      name: part.replace(/-/g, ' '), item: path });
  });
  var script = document.createElement('script');
  script.type = 'application/ld+json';
  script.textContent = JSON.stringify({ '@context': 'https://schema.org',
    '@type': 'BreadcrumbList', itemListElement: items });
  document.head.appendChild(script);
})();

bon à savoir

Le fil d'Ariane avec données structurées peut apparaître dans les résultats Google à la place de l'URL : 'Gemeos > Académie > Mon article'. C'est un signal de structure fort pour le SEO et ça améliore le CTR dans les SERPs. Vérifiez le rendu avec le Rich Results Test de Google après publication.

Conclusion

Un fil d'Ariane automatique évite de le gérer manuellement page par page. Cas d'usage :

Sites avec beaucoup de pages imbriquées (blog, académie, docs)
E-commerce avec catégories et sous-catégories
Sites multilingues avec structure d'URL cohérente

bon à savoir

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

4.9/5 • 97 avis

Lorem ipsum dolor sit amet consectetur.

Lorem ipsum dolor sit amet consectetur. Aliquam orci sagittis dignissim sapien praesent donec.

on en discute