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
| URL | Fil d'Ariane généré | JSON-LD |
|---|---|---|
| www.gemeosagency.com/fr/academie/mon-article | Accueil / Académie / Mon Article | Oui, automatique |
| www.gemeosagency.com/fr/blog/post | Accueil / Blog / Post | Oui, automatique |
| www.gemeosagency.com/fr/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 = '<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


