- Breadcrumbs — what it means
- Breadcrumbs are a navigation feature considered essential for SEO. Webflow gives you three ways to build them, and they deliver their SEO value once you also add structured data that tells Google “this part is a breadcrumb”.
Note: the steps and screens in this article are as of 2022. Names and placement may have changed in Webflow’s current UI.
Here are the answers to that question.
There are three ways to add breadcrumbs in Webflow.
- Adding them with the CMS
- Adding them with custom code
- Using the CMS and custom code together [most recommended]
I will take them in order.
If you have not signed up for Webflow yet, start here ↓
How to add breadcrumbs with the Webflow CMS
This builds breadcrumbs using the method written up on Webflow’s official pages.
Webflow’s official write-up is here.
The steps are as follows.
- [Step 1] Clone it from the showcase
- [Step 2] Swap the CMS parts for your own CMS
[Step 1] Clone a breadcrumb from Webflow’s showcase
From the showcase linked at the end of Webflow’s official page,
open the site, copy the breadcrumb section and paste it into your own site.
[Step 2] Swap the CMS parts for your own CMS
Change the parts shown in purple.
Replace the links and the text with your own CMS bindings.
Pros and cons
The pro is that it is easy. The con is that it does nothing for SEO.
The reason is that it is not structured.
Structured data is the feature that tells Google “this part is a breadcrumb”.
If you want structured breadcrumbs, use custom code.
How to build breadcrumbs with Webflow custom code
This builds breadcrumbs using custom code.
If you are not using the CMS, add your breadcrumbs this way.
The steps are as follows.
- [Step 1] Paste the breadcrumb code into Webflow
- [Step 2] Edit the copied breadcrumb
- [Step 3] Style the custom code
[Step 1] Paste the breadcrumb code into Webflow
Copy the breadcrumb code from Saruwakakun’s blog (Japanese) and
paste it into Webflow’s custom code.
The code shown there is already structured, so pasting it is all it takes to finish the structured data.
[Step 2] Edit the breadcrumb code inside Webflow’s custom code.
To make styling easier, delete the text color and the margin from the CSS you copied.
Then fill the URL and the name into the relevant places in the code.
Note: if you cannot use emoji fonts, copy the code from the “without FontAwesome” section of that article instead.
[Step 3] Style the custom code
Put a Div block above the custom code you added to Webflow and restyle the breadcrumbs however you like.
Note: only the link text color has to be edited from “ALL LINK” or inside the custom code.
Pros and cons
The pro is that you get structured data, and skipping the CMS keeps the running cost lower.
The con is that you have to write it into every page by hand.
How to generate breadcrumbs automatically with the Webflow CMS and custom code [most recommended]
This is the method of using the CMS inside the custom code.
Build it once and every page is generated at once, with structured data too.
The steps are as follows.
- [Step 1] Paste the breadcrumb code into Webflow
- [Step 2] Edit the copied breadcrumb
- [Step 3] Display the name and URL inside the breadcrumb using the CMS
- [Step 4] Restyle the breadcrumbs
I will take them in order.
Note: it is almost identical to the method for adding breadcrumbs with Webflow custom code.
[Step 1] Paste the breadcrumb code into Webflow
Copy the breadcrumb code from Saruwakakun’s blog (Japanese).
The code shown there is already structured, so pasting it into the custom code is all it takes to finish the structured data.
[Step 2] Edit the copied breadcrumb
Delete the text color and the margin from the CSS you copied.
Note: if you cannot use emoji fonts, copy the code from the “without FontAwesome” section of that article instead.
[Step 3] Display the name and URL inside the breadcrumb using the CMS
When you enter the URL and the name, you use the CMS.
There is a “+Add Field” control at the top right of the custom-code panel, so pick the field you need from there. The ones you will mostly use are “Name” and “Slug”.
✓ Note
As in the image above, write the rest of the URL before the “Slug” field.
[Step 4] Restyle the breadcrumbs
Put a Div block above the custom code you added to Webflow and style the breadcrumbs.
Only the link text color should be edited from “ALL LINK” or inside the custom code.
Checking whether the breadcrumbs you built in Webflow are structured
Use Google’s testing tool to confirm that the breadcrumb structuring succeeded.
- Publish the site in Webflow and copy the URL. ↓ Test it with Google’s testing tool
That is all there is to it. If the structuring worked, the breadcrumbs are detected.
It shows “unnamed item”
It gets detected as “unnamed item”, but that is reportedly nothing to worry about, so you can leave it alone.
Summary: for breadcrumbs in Webflow, use custom code plus the CMS
That covers how to add custom code in Webflow.
Now that the CMS can be used inside custom code, the range of what you can express has widened further.
Breadcrumbs are an essential feature for SEO as well, so do add them.
This blog covers plenty of other ways to use Webflow.
We also take on Webflow production work, so please take a look.
If you have not signed up for Webflow yet, start here ↓
FAQ
What are the ways to build breadcrumbs in Webflow?
There are three: using the CMS, using custom code, and using the CMS and custom code together. The best is the CMS plus custom code — build it once and every page is generated at once, with structured data too.
Do breadcrumbs built with the Webflow CMS alone help SEO?
No. The reason is that they are not structured. Structured data is the feature that tells Google “this part is a breadcrumb”, so use custom code if you want structured breadcrumbs.
How do I check whether my Webflow breadcrumbs are structured?
Publish the site in Webflow, copy the URL, and test it with Google’s testing tool. If the structuring worked, the breadcrumbs are detected. An “unnamed item” result is nothing to worry about, so you can leave it alone.
What are the pros and cons of building breadcrumbs with custom code alone?
The pros are that you get structured data and that the running cost is lower because you skip the CMS. The con is that you have to write it into every page by hand. If you are not using the CMS, this is the route to take.
How do I restyle breadcrumbs in Webflow?
Put a Div block above the custom code and restyle the breadcrumbs however you like. Only the link text color has to be edited from “ALL LINK” or inside the custom code.
