SEO / GEO

0 views

4 min

How to Create an Automatic Breadcrumb Trail from the URL in Webflow

Learn how to automatically generate breadcrumbs from the URL in Webflow with JSON-LD structured data.

In this tutorial, Sandro, cofounder of the Gemeos Webflow agency, shows you how to automatically generate breadcrumbs from the URL in Webflow, with JSON-LD structured data for SEO.

Example

Breadcrumb generated from the current URL

URL	Generated breadcrumb	JSON-LD
gemeos.wf/academie/mon-article	Home / Academy / My Article	Yes, automatic
gemeos.wf/blog/post	Home / Blog / Post	Yes, automatic
gemeos.wf/services	Home / Services	Yes, automatic

1. Create the container in Webflow

Create a Div with the ID breadcrumb where you want the breadcrumb to appear. Set it to display: none by default: the script will make it visible and inject the content.

2. Customize the labels

The labels object translates URL slugs into readable labels. Add your own mappings: 'nos-offres': 'Our offers'.

3. Add the script in Footer code

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

  var labels = {
    'academie': 'Academy',
    'blog': 'Blog',
    'services': 'Services',
    'realisations': 'Case Studies',
    'contact': 'Contact',
  };

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

  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. Add the JSON-LD structured data

This second script automatically generates the BreadcrumbList schema for Google. Add it right after the first one in Footer code.

// JSON-LD for breadcrumbs (SEO)
(function() {
  var parts = window.location.pathname.split('/').filter(Boolean);
  var items = [{ '@type': 'ListItem', position: 1, name: 'Home', 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);
})();

good to know

Breadcrumbs with structured data can appear in Google results instead of the URL: 'Gemeos > Academy > My article'. That's a strong structure signal for SEO, and it can improve CTR in the SERPs. Check the output with Google's Rich Results Test after publishing.

Conclusion

An automatic breadcrumb saves you from managing it manually page by page. Use cases:

Sites with lots of nested pages (blog, academy, docs)
E-commerce with categories and subcategories
Multilingual sites with a consistent URL structure

Good to know

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.

Learn more

4.9/5 • 97 reviews

Lorem ipsum dolor sit amet consectetur.

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

Let's discuss