Digital Marketing Services
Learn More About Us
Hansel had the right idea when he dropped breadcrumbs through the forest to find his way home. Though his trail of breadcrumbs didn’t help him much (alas, birds ate them), the story inspired the name of a website navigation element. If you’re serious about search engine optimization (SEO) and user experience, you need to know about what breadcrumbs mean for your website from an expert team of Bliss Drive.
Breadcrumbs are an especially important component for larger websites that have a lot of low-level pages. Search engines use them to get a better understanding of how your website is structured, and your users rely on them to keep tabs on where they are in the hierarchy of your website, so they don’t get lost.
When you consider that 75% of website users rank “ease of use” as the most important characteristic of a website, this is something to pay attention to. In this guide and tutorial, you’ll learn how to use breadcrumbs to enhance your SEO and help your users navigate.
You may already be familiar with website breadcrumbs, even if you don’t realize it. In the most common cases, breadcrumbs are a sequence of small, named links that represent each page in a page hierarchy on your site. They expand as a user goes deeper and deeper into your page hierarchy.
They usually present at the top of the page under the main navigation menu. This provides a reference for where the user is and an easy way for them to jump back to previous pages.
The user doesn’t have to visit each page in the hierarchy for the breadcrumbs to present themselves. These types of breadcrumbs don’t show the user’s path through the site. Instead, they show the user where they are on the site in relation to other pages in a page hierarchy.
Here’s an example of how breadcrumbs look on eBay:
You can reach this page by going to the eBay home page, clicking on “Clothing, Shoes & Accessories,” “Men,” and then on “Men’s Clothing” But, most likely, you’ll arrive on this page by Googling “Men’s T-Shirts on eBay” and clicking on the page in the results.
The breadcrumbs still appear when you enter through search, providing a reference for where you are on the website.
Most computers (both Macs and PCs) use a similar breadcrumb system to help users navigate through their files. Here’s what it looks like on a Mac:
And here’s what it looks like on a PC:
Website breadcrumbs apply the same concept to the pages on your site. These are what are known as hierarchy-based breadcrumbs because they show the hierarchy of a sequence of file folders or pages.
They are also sometimes referred to as location-based breadcrumbs because they show the user where they are in reference to other files or pages.
There are other types of breadcrumbs, too. These are known as attribute-based breadcrumbs and path-based breadcrumbs.
Attribute-based breadcrumbs are the second most common type. They are a popular tool on eCommerce websites because they indicate what categories or tags are associated with the page that is currently being viewed. This allows the user to more easily shop by category or tag.
For example, let’s say you’re looking at a Bohemian-style rug shaped like a rectangle that’s 9 feet by 12 feet and between $300 and $600 (very specific!). You decide to shop on Overstock.com to get a great deal:
Here’s a great example of hierarchy-based breadcrumbs and attribute-based breadcrumbs in action at the same time.
Not only can you navigate the website based on the page hierarchy, but you can also navigate your shopping results by specific categories, like price and style. This makes it easier for you to find the rug you want, then further explore the Home Décor section so you can find drapes to match!
Path-based breadcrumbs are perhaps the least common. They present as the exact path the user follows as they navigate from page to page on the website.
Essentially, they look like this:
First Page > Second Page > Third Page > Current Page
While there are some benefits to this method, it can also be confusing for the user because it doesn’t show them the actual structure of your website. Path-based breadcrumbs also act as a stand-in for the forward and back buttons on a user’s browser, which makes them more-or-less obsolete.
You can probably already tell how breadcrumbs can help with navigation. Consider the eBay website.
eBay needs to contain a great deal of information, all of which must be categorized and easy to find. It must also be accessible to shoppers who may not be tech-savvy, as well as those with disabilities who rely on assistive technologies like screen-readers.
Without the breadcrumbs as a reference, it would be easy for users to get lost on the website as they search for the information they’re looking for. There are thousands of pages on the website.
Using breadcrumbs also makes eBay easy for search engines to crawl and reference, which makes It easy for users to find specific pages using a search engine. If we do a Google search for “eBay Men’s Clothing,” the first result is the eBay Men’s Clothing page:
You can also see the “Men’s Clothing” page in the hierarchy of the search results. Similarly, breadcrumbs help Google display a page hierarchy for the page it’s showing in search results.
Here’s the second result for a search of “What are breadcrumbs in WordPress”:
Breadcrumbs only get used as a navigation tool about 6% of the time, while 40% of users click on embedded links, 31% use the browser back button, and 22% click on the navigation bar.
According to user experience expert Jakob Nielsen of the Nielsen Norman Group, "Breadcrumbs never cause problems in user testing: People might overlook this small design element, but they never misinterpret breadcrumb trails or have trouble operating them."
Incidentally, breadcrumbs also "take up very little space on the page,” so they won’t use up too much of your page’s real estate.
As we referenced above, breadcrumbs help Google determine how your website is structured. The search engine can even use your breadcrumbs as search results, which can help users find specific pages on your site.
From an SEO and a business perspective, this gives your site a better chance of taking up more space on a search engine results page (SERP). As you can see in the eBay example, eBay not only occupies the first Google search result, but it’s subpages occupy the next three rows as well.
Naturally, doing a search that includes “eBay” is likely to bring up the eBay website, but you get the idea.
According to Yoast, breadcrumbs can also lower bounce rates. Because it’s more likely that someone will enter your website through organic search, breadcrumbs can help guide them to your higher-level pages if they can’t find what they’re looking for on the first one.
If you want to enable breadcrumbs in WordPress, you can find multiple plugins that will do the task for you. All you have to do is install and configure them.
If you already use the SEO tool Yoast, you can enable Yoast breadcrumbs as well. One way is to add the following code to your WordPress theme in the location you want your breadcrumbs to appear (usually underneath the main navigation)
Yoast also notes that “depending on your theme, you may or may not need to add in the beginning <php and ending ?> php tags. If you are not sure, your theme developer can help.”
Once you embed the code, Yoast allows you to enable breadcrumbs directly in the tool. Here’s how to do it, step-by-step:
Your dashboard should immediately appear when you log in.
The ‘SEO’ tab is in the menu on the left-hand side.
‘Search Appearance’ will appear in the list of SEO options.
You’ll find the ‘Breadcrumbs’ tab on the right.
You can remove Yoast’s breadcrumbs later if you like. All you have to do is toggle this option to ‘Disabled.’
Yoast provides a few options for managing your breadcrumbs. For example, you can customize the separator that appears between them, add a prefix, or bold the last page listed in the breadcrumbs.
Once you’re finished, just save your changes.
On some platforms, you may need to add breadcrumbs manually, or you may need to reach out to the provider or the community for help. There doesn’t appear to be an easy way to enable breadcrumbs on platforms like Squarespace, Weebly, and Wix.
For example, Squarespace is a closed website building system, so it doesn’t allow for much customization. You’ll need to use the JSON-LD method instead of microdata if you want to add your own code.
You can inject your own code using “Code Injection” in the “Advanced” section under “Page Settings,” but only if you have a Premium account. Of course, you’ll need to compile your own code to do this, so it takes a little bit of coding skill.
Still, even if you have a website that isn’t on WordPress, you should still consider enabling breadcrumbs. They’re immensely important for SEO, and they could just improve your bounce rateThe percentage of visitors who leave a website after viewing only one page. and keep visitors on your site.
If you need help adding breadcrumbs to your website, don’t hesitate to reach out to use. We can provide a custom solution so you can take advantage of this benefit.
Are you looking to improve the user experience on your website and boost your search engine rankingsThe position at which a website appears in the SERP.? Look no further than Bliss Drive for all your breadcrumb and SEO needs. Our team of experts will work with you to optimize the structure of your website, using breadcrumbs to make navigation easy for both users and search engines. We'll also use the latest SEO techniques to help your site rise to the top of search engine results pages. By choosing us, you'll be able to take your online presence to the next level and start seeing real results. Don't wait any longer, contact us today and let us help you drive your business to success!
Remember, hierarchy-based breadcrumbs are usually your best option. They'll help your users navigate your site and they'll make it easier for Google to analyze and index your pages. If you have an eCommerce website, consider enabling both hierarchy-based breadcrumbs and attribute-based breadcrumbs so your customers can shop more easily
To learn more about how you can improve your website and your business, contact us at Bliss Drive for a free consultation!
