Aller au contenu

SEO / GEO4 min lecture

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

URLFil d'Ariane généréJSON-LD
www.gemeosagency.com/fr/academie/mon-articleAccueil / Académie / Mon ArticleOui, automatique
www.gemeosagency.com/fr/blog/postAccueil / Blog / PostOui, automatique
www.gemeosagency.com/fr/servicesAccueil / ServicesOui, 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'.

(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 = '<a href="/" style="color:#6b7280;text-decoration:none;">Accueil</a>';

  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 += '<a href="' + path + '" style="color:#6b7280;text-decoration:none;">' + label + '</a>';
    }
  });

  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);
})();

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

Publié le 20 mai 2026

Sandro DA SILVA

Growth Marketer, expert Webflow et touche à tout. Sandro s'occupe des opérations commerciale, veille au bon déroulement des projets et s’occupe des problématiques liées au marketing (SEO, Tracking, Copywriting, etc)

Vous allez notre collaboration, c’est garanti

Prêt à faire décoller votre activité ?

demander un devis

Let’s f*****G GO !!