Breadcrumbs in Webflow: Structured Data for SEO

Breadcrumbs

Breadcrumbs are considered essential for SEO. They deliver their SEO value when marked up with structured data that tells Google 'this part is a breadcrumb.'

There are three ways to add breadcrumbs in Webflow:

• Via the CMS
• Via custom code
• Via CMS + custom code [most recommended]

Let's take them in order.
Not signed up for Webflow yet? Start here↓

Breadcrumbs via the CMS

This follows the method on Webflow's official pages.
Webflow's official write-up is here.

• [Step 1] Clone from the showcase
• [Step 2] Swap in your own CMS
  

[Step 1] Clone a breadcrumb from Webflow's showcase

Open the showcase site linked at the end of Webflow's official page, copy the breadcrumb portion, and paste it into your site.

[Step 2] Swap in your own CMS

Change the purple parts — replace links and text with your own CMS bindings.

Pros and cons

Pro: it's easy. Con: it does nothing for SEO — because it isn't structured. Structured data is what tells Google "this part is a breadcrumb." For structured breadcrumbs, use custom code.

Breadcrumbs via custom code

For sites not using the CMS, add breadcrumbs this way.

• [Step 1] Paste breadcrumb code into Webflow
• [Step 2] Edit the copied code
• [Step 3] Style it
  

[Step 1] Paste the code

Copy a structured breadcrumb snippet (HTML/CSS with BreadcrumbList markup) into Webflow's custom code. Using an already-structured snippet means pasting completes the structured data.

[Step 2] Edit the code

For easier styling, delete the text color and margin from the copied CSS, then fill in your URLs and names in the marked places.

[Step 3] Style it

Wrap the custom code in a Div block and style to taste.
Note: Link colors are editable only via All Links or within the custom code.

Pros and cons

Pro: structured data, and no CMS keeps costs down.
Con: every page needs manual entry.

Auto-generated breadcrumbs via CMS + custom code [most recommended]

Use the CMS inside the custom code. Build it once and every page generates at once, structured data included.

• [Step 1] Paste breadcrumb code into Webflow
• [Step 2] Edit the copied code
• [Step 3] Fill names and URLs from the CMS
• [Step 4] Style it

Taken in order — it is almost identical to the custom-code method above.

[Step 1] Paste breadcrumb code into Webflow

Copy the breadcrumb code from Saruwakakun's blog (Japanese). The snippet is already structured, so pasting it into the custom code completes the structured data.

[Step 2] Edit the copied code

Delete the text color and the margin from the copied CSS.

Note: If emoji fonts are unavailable, copy from the "without FontAwesome" variant in that article instead.

[Step 3] Fill names and URLs from the CMS

When entering URLs and names, use the CMS: the "+Add Field" control at top right of the custom-code editor inserts fields — mainly Name and Slug.

✓ Note

As in the image, write the URL path preceding the Slug before the Slug field itself.

[Step 4] Style it

Wrap in a Div block and style; link colors via All Links or within the code.

Verifying the structured data

Check your breadcrumbs with Google's Rich Results Test:

• Publish the site and copy the URL
  ↓
  Run it through the Rich Results Test

If structuring succeeded, breadcrumbs are detected.

"Unnamed item" appears

You may see "unnamed item" — reportedly harmless, safe to ignore.

Summary: custom code + CMS is the way

With the CMS usable inside custom code, expressiveness widened considerably. Breadcrumbs are essential for SEO — add them.

This blog covers plenty more Webflow how-tos, and we take on Webflow production work — get in touch if interested.

Not signed up for Webflow yet? Start here↓

‍