Remember the fairy tale, where Hansel and Gretel drop breadcrumbs in the forest so they’ll find their way back home? Well, breadcrumbs in website design get their name directly from this childhood tale. You’ll find out why here.
In this blog, we’ll explore what breadcrumb navigation is, when you should use breadcrumbs and whether breadcrumbs are good for user experience. You’ll also find out whether breadcrumbs help with SEO and how to implement them.
Breadcrumbs in website design are a form of navigation that reveals where the user is in the website’s architecture. They show users the path they’ve taken to get to the page they are on and allow users to get to higher levels of the website. They are usually displayed as a horizontal list at the top of the page and separated by arrows, slashes or the greater than symbol, although designs can and do vary. For example, Home / Women / Clothing / Skirts. This shows that the user is currently exploring the Skirts page of the website but they can use the other links in the breadcrumb trail to navigate up to Clothing or Women or the Home page.
It’s important to note that breadcrumbs don’t always necessarily reflect how the user got to the page they are on. They may have followed a direct link to this page and not navigated the website, but they may still see the same breadcrumb menu.
There are 3 different types of breadcrumb navigation:
These reveal where the user is in the website’s hierarchy. They’re used to provide navigation to websites with more than two levels of hierarchy.
These are often used in eCommerce websites and reveal all the products with the same categories or descriptions.
These show how the user has arrived at the page with the steps they’ve taken. However, this breadcrumb is not particularly useful as it’s not listed as an entire path but is implemented as a back button. It serves the same purpose as the back button in the browser.
Breadcrumbs are useful for websites with complex structures and multiple levels. They’re particularly useful for eCommerce websites and large content websites with blogs and other resources.
But breadcrumbs aren’t necessary for every type of website. If you have a small website with only a few top-level pages, you don’t need to use them. This is because the navigation isn’t complicated enough to need it.
One of the major benefits of using breadcrumbs in your website is that they help with SEO rankings. They can drastically improve the internal linking structure of your website. Google likes to see internal links as it can understand how each page links to one another. Breadcrumbs even have a chance of featuring in the rich snippets part of Google, providing users with the exact path to the relevant page. This leads to higher visibility and improved click through rates (CTR) to your website, enhancing SEO even further.
Breadcrumb links often use keyphrases in the descriptive anchor text which is also good for SEO purposes.
Breadcrumbs also reduce bounce rates, again helping with SEO. Users can backtrack easily to previous pages, helping them to stay on the website for longer.
Breadcrumbs are good for user experience. They simplify the navigation by reducing the number of clicks the user needs to get to higher level pages. They encourage users to explore more pages on your website and stay there longer.
Breadcrumbs offer a second navigation route on your website, in conjunction with the main navigation. They’re convenient for users to use and help them understand where they are on your website.
Implementing breadcrumbs on your website involves 4 steps:
Decide on the hierarchy and structure of the breadcrumb. It should accurately reflect the path a user would take to reach the page. You need to think about which symbols to use (>,/,”) to separate the paths and be sure you use the same symbol consistently throughout your website.
Create the breadcrumb trail in HTML and style them using CSS. This makes them more visually appealing.
Use schema.org markup. This helps Google to find and display the breadcrumb.
Test the breadcrumb to ensure it works correctly and is recognised by Google.
Check that the breadcrumb accurately reflects the website’s hierarchy or path.
This confuses the user as they’re unsure what attribute a product actually falls into. It also creates a long breadcrumb trail. Make sure you stick to using one major product category to avoid this happening.
You have to optimise the tap target for the size of a thumb when designing for a mobile. It’s very difficult to hit the right link on a mobile if it hasn’t been optimised.
To provide a clear starting point, always include the link to your Home page.
They’re not distinct or are difficult to read. CSS helps to fix this.
If you don’t use schema markup, Google can’t understand and display the breadcrumb.
Limit the number of levels in the trail and use truncation when needed to keep it concise.
Repeating items is a common error. Make sure each item in the trail is unique and reflects the website hierarchy accurately.
What is a breadcrumb in a website?
Breadcrumbs are a navigation system that shows the user’s location on a website. The term arose from the Hansel and Gretel fairytale where the children drop breadcrumbs to help them remember their way home.
What websites should use breadcrumbs?
Only websites with a complicated structure or lots of content and pages e.g. eCommerce websites, need to use breadcrumbs.
Are breadcrumbs good for user experience (UX)?
Breadcrumbs are good for user experience as they make it easier to navigate the website and enhances their experience.
Do breadcrumbs help with SEO?
Yes, breadcrumbs help significantly with SEO.
Do you need to know how to code to design and implement breadcrumbs?
Implementing breadcrumbs does require some experience coding with HTML, CSS and Javascript and you are best enlisting the help of a website developer like WEBPRO Creative to ensure the work is done correctly.
Business growth doesn’t have to only come from generating new customers. It’s possible to grow your business by engaging with clients who have already bought into your product or service. But how do you get it right?
READ MORE
