In website design, breadcrumbs are a digital navigation trail that helps website users see where they have been within the site and how to get back there again. The term was inspired by the Brothers Grimm fairy tale Hansel and Gretel, in which the children left a trail of breadcrumbs through the forest to help them find their way home.
A breadcrumb trail can be a horizontal menu at the top of the page which shows the pathway to Home. For example, if you were purchasing clothes online, you might have a breadcrumb trail that looks like this:
Home / Clothing / Boys’ Clothing / Sleepwear / Onesies
Each link in the breadcrumb trail is clickable. Therefore, if you want to look for men’s or girls’ clothing instead, you can go directly to the top-level Clothing page from the breadcrumb trail, rather than having to hit the back button repeatedly or use the search function. Or, if you wanted to look for boys’ jeans, you could click the Boys’ Clothing link to navigate to the jeans section from there.
Types of Breadcrumbs
There are three main types of breadcrumbs that are typically used in website design. These are:
- Location-based Breadcrumbs: These show users their location within the site's hierarchy. This is helpful on websites with multiple layers of content, such as e-commerce sites or larger informational sites.
- Attribute-based Breadcrumbs: These are often used on e-commerce websites to help users keep track of the various categories or attributes of the product they’re looking at, such as colour, size, or brand.
- Path-based Breadcrumbs: These display the user's navigation path from the homepage to the current page. They are dynamically generated based on the route taken by the user.
Trails
Breadcrumb trails make for a smoother and more organic browsing experience for your customers. Therefore, they are more likely to stay longer on your site, increasing the chances that they may buy something and improving your SEO (search engine optimisation).
If customers stay on your site longer, it decreases your bounce rate. A high bounce rate has a negative effect on your website’s search engine rankings. On the other hand, a low bounce rate tells Google that customers enjoy using your site and have probably found what they were looking for, which makes Google more likely to suggest it to other people searching for the same products.
Breadcrumbs can also help to improve how Google directs people to your site. When Google sees breadcrumb markup in the code of your web page, it can tell more accurately which page on your site is most appropriate to recommend.
Genesis
Genesis is a powerful WordPress theme framework developed by StudioPress that provides a secure and search-engine-optimized foundation for your WordPress website. Genesis has built-in support for breadcrumbs, which can be an effective tool for improving your site's usability and SEO.
To enable breadcrumbs on Genesis, you simply have to navigate to the Genesis settings in your WordPress dashboard. You'll find a section there for breadcrumbs where you can choose to enable or disable them for various parts of your website, including blog posts, pages, categories, tags, and more.
Breadcrumbs in Genesis are dynamic, meaning they'll change based on the user's navigation path, and they're fully integrated into the theme's design, so they'll fit seamlessly into your site's look and feel.
Yoast
Yoast SEO is one of the most popular SEO plugins available for WordPress, and it also has functionality for adding breadcrumbs to your site. If your WordPress theme doesn’t natively support breadcrumbs, or if you want more control over how they function, the Yoast SEO plugin could be a good option.
To enable Yoast breadcrumbs, go to the plugin's settings in your WordPress dashboard, click on "Search Appearance," then the "Breadcrumbs" tab, and then enable breadcrumbs. You can then customize various aspects of the breadcrumbs, such as the separator between crumbs, the homepage anchor text, and the breadcrumb path prefix.
After configuring the settings, you will need to add a snippet of code to your theme where you want the breadcrumbs to appear. This typically involves editing your theme's header.php or single.php file, but the exact process may vary depending on your theme's structure.
Both Genesis and Yoast provide useful options for implementing breadcrumbs on your WordPress website, depending on your specific needs and level of comfort with WordPress development. They aim to make the process as straightforward as possible, even for those with little coding experience.
Search engines like Google use breadcrumbs to understand the structure of a website. They can be included in the search engine results pages and provide a quick overview of a webpage’s content before a user clicks through. This can help increase click-through rates.
More Benefits of Using Breadcrumbs
- SEO Benefits of Breadcrumbs: Search engines like Google use breadcrumbs to understand the structure of a website. They can be included in the search engine results pages (SERPs) and provide a quick overview of a webpage’s content before a user clicks through. This can help increase click-through rates from the SERPs.
- User Experience (UX) Benefits: Breadcrumbs are a navigational aid that can help users understand where they are on a website and how to get back to where they were previously. This is particularly useful on complex websites with multiple levels of content. It reduces the number of actions a user needs to take to navigate back to higher-level pages, providing a better user experience.
- How to Implement Breadcrumbs: Many website platforms and content management systems have built-in functionality for breadcrumbs or plugins that can be installed to add this feature. In terms of placement, breadcrumbs are typically located at the top of a webpage, below the navigation bar but above the page’s main content. This makes them noticeable but not distracting.
- Best Practices for Breadcrumbs:
- Keep the breadcrumb trail simple and straightforward to understand.
- Make sure it follows the logical structure of the site.
- Ensure the last breadcrumb (representing the current page) is not clickable to avoid confusion.
- Use the ">" symbol or similar to denote hierarchy levels.
Remember, breadcrumbs should supplement the website navigation and not replace it. They should be used as an additional tool to help guide users through the website and improve the overall user experience.
