Breadcrumbs are often used on one of my favourite foods – Chicken Schnitzel. They wrap around a tender chicken breast and are full of flavour. When the Chicken is cooked it is quite simply delicious. Im not writing about cooking with breadcrumbs today.
I’m writing about website design and the use of Breadcrumbs on your website.
Breadcrumbs have been used by website developers for years to convey structure and help a user place themselves on the website.
This is really helpful when you have more than a few pages in a site because you need to inform your users where they are to ensure they are comfortable navigating around your website.
Have you ever wondered if breadcrumbs would help your SEO efforts?
Are breadcrumbs useful for SEO?
The simple answer is yes. Google has, over the years, endorsed the use of Breadcrumbs on websites. This is because they are a helpful device for a website with any structure to it. They are particularly helpful when it comes to a large website.
So what is a breadcrumb?
A breadcrumb is a UI tool used to show the path people take when they navigate around your website. On this website, when you are on a product page you can see the breadcrumb navigation clearly. This shows which product and category you are in whilst shopping. Users get used to breadcrumbs being in the top of your page. Place your breadcrumb navigation at the top of page and get the maximum benefit of your breadcrumbs.
What is a good Structure for your site?
Good question. The answers is it comes down to what content is on your site. If your site is focused on blog posts, use tags and categories for your site structure. You will see this on large news sites and many of them work in this way.
If you have an ecommerce site or a B2B site use nested pages with cornerstone articles. Nesting pages and setting parent pages is an essential first step to structure your site for breadcrumb usage. If you have a team page under your about page, you would make sure it is nested under the about page in WordPress. This would result in a breadcrumb path of Home >> About >> Our Team.
Page nesting makes it very clear to your users where they are in an effective and direct way. This is exactly what the breadcrumb is designed to do. It also lets Google know where the page is and gives Google a good understand of your site structure.
What tools are available to make breadcrumbs in WordPress?
The two most popular are Yoast SEO and Breadcrumb NavXT. We use YoastSEO on every website we create using WordPress because of the advantages it gives us as an SEO tool. As a result it is what we also use in our Breadcrumb Module.
It has enough configuration to get the job done for us and on top of that it takes care of the technical markup around a breadcrumb that makes it operate well.
NavXT is also a great tool as it is open source and makes use of the micro formats that should be used on a breadcrumb.
Its hard to split these two plugins apart on the quality of the breadcrumb output code.
For me, the best features of NavXT is that it has hooks and action filters to extend If you have a particularly complex site structure or are using custom post types heavily in your website this could be an invaluable tool to help manage your breadcrumb output.
On the other hand, if Yoast SEO is already installed and our site structure is simple enough it is a very easy to use tool. It also has extension hooks and filters available but they are not as extensive as NavXT but will resolve 95% of any breadcrumb solution required.
Why did we make the Breadcrumb Module for Divi?
The Breadcrumb Module for Divi has been created to make it easy to have a global position for your breadcrumb module. With lots of features based around the UI / UX it is focused on delivering a great user experience for your Divi website. When you use Divi, YoastSEO and WordPress it will save you lots of time and effort in implementing your breadcrumbs.
Take a look at the Yoast website and review the breadcrumb features. The team at Yoast are experts in the area especially when it comes to WordPress.
Looking for some uI inspiration take a look at smashing magazine and ui-patterns.com.