Breadcrumbs are navigational features on a website that create better user experience (UX) and improve crawlability for Googlebot.
Usually located at the top of a page, breadcrumb navigation indicates where a user is on a website.
Breadcrumbs are small text paths with clickable links. The top page in the navigation is positioned farthest to the left, with subsequent links following to the right. Usually, the last step in the navigation is non-clickable text, indicating the current page.
Depending on the type of breadcrumb, users can decipher page categorization on a site or the path followed to land on the page. Breadcrumbs are known as “secondary navigation” and are important for both search engines and site visitors.
Types of Breadcrumbs
Hierarchy-based breadcrumbs. Most common form of breadcrumbs. Users can see or trace back their location in a website structure. Site visitors can click links higher in the page hierarchy or return to the home page.
Example: Home > Business > The Hiring Process > Using Technology for Small Business Hiring
Image: Breadcrumb navigation on Monster.com
Attribute-based breadcrumbs. E-commerce sites in particular may use this form. The breadcrumb trail shows links of product categories or product feature selections.
Example: Home > Electronics > Computers and Office > Office Accessories > Webcams
Image: Breadcrumbs on Target.com
History-based breadcrumbs. These serve as a browser history by highlighting other pages a user visited on a site. Less common than the previous two examples.
Example: About > SEO Services > All Services > Industrial SEO > SEO Audits
Breadcrumbs and SEO
Ranking competitively in organic search requires analysis and improvement of various factors such as keywords, content structure, and links. To increase your odds of ranking well, it’s safest to implement as many best practices as possible into your web design.
As navigational elements in a site, breadcrumbs certainly affect SEO and user experience. However, as insisted before, breadcrumbs are part of the little parts that build to form a systematic, functional and effective SEO strategy.
Breadcrumb navigation appears near the top of a web page, and indicates the page hierarchy, allowing users to click to higher level pages easily, improving UX.
Breadcrumbs keep users on a website and help them locate relevant information.
Look at the following image of breadcrumbs use on a DHL website (breadcrumb area is highlighted).
Testing Breadcrumb Structured Data
You can test to find out whether a web page has Breadcrumb structured data by running a URL through Google’s Rich Results Testing Tool.
Reasons to Use Breadcrumbs
Using breadcrumbs in site design has only upside, with no negatives. Here are specific reasons to make sure you include breadcrumbs in your website.
1. Google Looks for Breadcrumb Navigation
Site visitors and Google both love breadcrumbs. Human website visitors hate getting lost. Breadcrumbs give them a convenient means for finding higher level pages.
Search engines also look for breadcrumb navigation. Using breadcrumbs gives Google another way to figure out the structure of a site.
Look for structured breadcrumb markup in Google search results to understand how search engines can interpret this information as part of the page structure.
As you can see in the image below, Google currently displays breadcrumbs in search results and breadcrumbs used to categorize information.
2. Improved User Experience
Breadcrumbs aid users to navigate a site. Consequently, Google visualizes, categorizes and navigates a site using the breadcrumbs. In SEO, enhancing the user experience is imperative. By using breadcrumbs, it can aid in longer user session times and more pages per session, as measured in analytics.
3. Breadcrumbs Can Help Lower Bounce Rates
Contrary to popular belief, most visitors enter your site through inner pages, not the homepage. Because any page in your website is a potential entry point, there should be a way to guide them to key pages in case the selected page doesn’t meet the user intent.
By offering visitors alternative ways to browse your site, breadcrumbs lower bounce rates, increasing the session time and pages per session.
Best Practices for Breadcrumbs
These are some guidelines for using breadcrumbs in your website.
1. Find the Right Size: Not Too Small or Too Large
Deciding the right size font to use for your breadcrumbs will ensure that they are unobtrusive, but users can also find them easily. Most breadcrumbs on enterprise sites are between 12 and 16 pixels in size. Your final decision will depend on what typeface or font-family you are using in your design.
2. Find a Good Place to Put Breadcrumbs in the Page
Most breadcrumb navigation is near the top of the page, so users can find them easily. We have seen rare occasions where designers placed breadcrumbs at the bottom of the page, though this is uncommon. Make breadcrumbs easy to find for maximum usability.
3. Make it Clear Which List Items are Links
Accessibility standards state that text links should be underlined. This makes it apparent to users that those are links they can click in breadcrumb navigation.
4. Many SEO Plugins and Modules Enable Breadcrumbs
If you are building a website with WordPress, most SEO plugins enable breadcrumbs. Some of these include SEOPress Pro and The SEO Framework. This makes it easy to implement breadcrumbs in your page designs.
Breadcrumbs provide an easy-to-grasp mechanism for visitors to navigate your website, thus helping them understand the site’s structure. Google loves breadcrumbs for similar reasons—they make it easy for Googlebot to crawl your website, and they make it easy for users to find important pages on a site.
While breadcrumbs will not propel you to top of page rankings by themselves, integrate them into your web design. Integrating breadcrumbs into a codebase is relatively simple and adds benefit to people using your website. Breadcrumbs should be part of any modern website design.