Breadcrumb Navigation for Websites: What It Is & How to Use It


What Is Breadcrumb Navigation?

Breadcrumb navigation is a trail of text links that shows users the path to the page that they are currently on. Which allows users to navigate to higher pages in the website’s hierarchy.

These links (or “breadcrumbs”) typically appear near the top of the page.

Here’s a breadcrumb navigation example from the men’s jeans page on Nordstrom:

breadcrumb navigation example from the men’s jeans page on Nordstrom

Notice how the breadcrumb links follow the path to the page (/browse/men/clothing/jeans/): 

Breadcrumb Anchor Text

Breadcrumb Destination

Home

/

Men

/browse/men/

Clothing

/browse/men/clothing/

Breadcrumb navigation gets its name from the Hansel and Gretel fairytale, in which characters create a breadcrumb trail so they can retrace their steps.

However, breadcrumbs don’t necessarily reflect the user’s journey to the page.

For example, a user may follow a direct link to the Nordstrom men’s jeans page. But they’ll still see the same breadcrumb menu.

What Are Breadcrumbs on a Website?

On a website, breadcrumbs are links that show the route to the page you’re on. Together, they make up the breadcrumb navigation.

For example, each of these are breadcrumbs:

"Home," "Men," "Clothing," "and Jeans" links highlighted on the Nordstrom's page

The Benefits of Breadcrumb Navigation

Using breadcrumbs in website design can benefit user experience (UX) and SEO.

Generally, breadcrumbs navigation is more advantageous for sites with deep site architecture. Because it helps users navigate between multiple levels.

deep site architecture infographic

Breadcrumbs aren’t quite as useful on very small or flat sites. Because most pages are just one click away from the homepage.

But we still recommend implementing breadcrumbs, as the potential benefits outweigh the time investment.

Let’s explore the main benefits of adding breadcrumbs to your website:

Encourages Users to Explore Your Site

Breadcrumbs can prompt users to navigate to other pages on your site. Which can lead to higher advertising or sales revenue.

Let’s say a user lands on the Adidas product page below. But doesn’t find what they’re looking for.

Rather than exiting (or bouncing), they might notice the breadcrumb menu. Decide to explore the rest of the “Originals” range. And ultimately purchase a different item.

"Back," "Home," "Originals," "Shoes" breadcrumb menu highlighted on Adidas product page

Like other kinds of internal links, breadcrumbs help search engines access pages on your website. And understand your site structure.

Here’s an illustration that further explains how Google can find pages through internal links:

An ingofraphic by Semrush showing how Google discovers pages

In other words, internal links can improve website crawlability.

This can lead to more of your pages appearing in Google’s index (database of potential results). And higher rankings for relevant keywords.

Improves the User Experience (UX)

Breadcrumbs can reduce the number of clicks it takes to move upward in a website’s architecture (e.g., from a subcategory to its parent category). And therefore improve UX.

website architecture example

On a website without breadcrumbs, users might need to hit the back button multiple times. Or navigate through multiple menus.

But with breadcrumb navigation, users can click a single link in the breadcrumb trail.

Plus, many users have come to expect breadcrumbs on websites. If yours doesn’t have them, it might create some frustration.

Generates More Clicks from Search Engines

Breadcrumbs can appear in Google search results. Enriched results (known as rich snippets) are generally more attractive and informative, so they may attract more clicks.

For example, here’s a snippet with breadcrumbs: 

A snippet for Adidas page with breadcrumbs on Google SERP

Versus one without:

A snippet for Scheels page without breadcrumbs on Google SERP

To ensure Google can find and display breadcrumbs, you need to use breadcrumb schema in your page’s code. 

It looks something like this:

<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [
{
"@type": "ListItem",
"position": 1,
"item": {
"@id": "https://example.com/home",
"name": "Home"
}
},
{
"@type": "ListItem",
"position": 2,
"item": {
"@id": "https://example.com/category",
"name": "Category"
}
}
]
}
</script>

To check whether your site already has schema markup—and ensure it’s working properly—you can use Semrush’s Site Audit tool.

After setting up, open the “Markup” report.

“Markup” widget highlighted from the Site Audit dashboard

Scroll down to “Structured Data Items” to see whether “Breadcrumb” is listed.

Structured data items page in Site Audit

If you have any invalid items, click the link to see affected pages.

Number 5 highlighted under "Invalid" items column

Then, click “Why and how to fix it” for advice on moving forward.

An example of “Why and how to fix it” section for invalid structured data items in Site Audit

Make sure to rerun the audit after fixing your SEO breadcrumbs.

Different Types of Breadcrumbs

While hierarchy-based breadcrumbs are the most common, there are different types of breadcrumbs.

Let’s explore each one:

Hierarchy-Based Breadcrumbs

Hierarchy-based breadcrumbs follow the site architecture (or “hierarchy”) of your website. 

Consider this breadcrumbs example from Target: 

Hierarchy-based breadcrumbs on Target website

In this example, the trail starts with the top-level category. In this case, Target as a whole. 

And then progresses through more specific, nested subcategories before arriving at the current page, DSLR Cameras.

This type of breadcrumb is particularly useful for users who land on your website from Google search results.

It allows them to quickly go back up the hierarchy to explore more options if they want.

Attribute-Based Breadcrumbs

Attribute-based breadcrumbs generate a dynamic trail based on different filters users may apply on a page.

Attribute-based breadcrumbs are mostly used on ecommerce sites. Where they are paired with hierarchy-based breadcrumbs.

For example:

Attribute-based breadcrumbs example from Office Depot

On an ecommerce site, this breadcrumb navigation is useful when users want to view all the products that share the same attributes.

Path-Based Breadcrumbs

Path-based breadcrumbs display the unique path users took to arrive at a particular page. 

But instead of listing out the entire path, this type of breadcrumb navigation is typically implemented in the form of a back button. Which helps users return to the previous page.

Here’s an example from Adidas: 

Path-based breadcrumbs example from Adidas

Path-based breadcrumbs aren’t helpful in many cases. They merely serve the same function as the “back” button in your browser.

That’s why you don’t often see these kinds of breadcrumbs. Website designers often favor breadcrumb navigation types with more functionality.

5 Best Practices for Breadcrumb Navigation

When designing breadcrumb navigation for your website, follow the best practices below.

1. Use Breadcrumbs to Support Primary Navigation

Website breadcrumbs shouldn’t replace your primary navigation menu.

Think of breadcrumbs as an alternate way users could navigate around your website. They should link to highly relevant pages and help the user understand your site structure.

In the example below, Dell’s main menu appears directly above its breadcrumbs. Meaning users have easy access to a variety of navigation options.

An example of main navigation and breadcrumbs on Dell’s website

And descriptive anchor text within the breadcrumb navigation makes it easy for users to understand where the links will take them.

2. Use Separators Between Individual Levels

Separate each link in the breadcrumb trail to improve readability. 

Many sites use a greater-than sign (>), arrow (→), or forward slash (/).

Here’s an example from Walmart:

Walmart uses forward slash to separate items in breadcrumb menu

Breadcrumb navigation should not include a link to the current page. 

A link to the current page serves no purpose. And can create confusion for users.

However, it’s best practice to name the current page in the breadcrumb trail.

Like Best Buy has here:

Best Buy's current page in the breadcrumb trail named "Apple Laptops"

Including the current page name is good for:

  • Breadcrumbs UX, because it helps users understand where they are and what the trail shows
  • Breadcrumbs SEO, because it allows you to add a natural keyword mention to the page

4. Keep the Design Simple

Breadcrumb website design should be as simple and unobtrusive as possible. So that it’s useful without distracting the reader from the main content of the page.

For example, here’s how Slack designed breadcrumbs on their website:

Breadcrumbs on Slack's website

Slack’s breadcrumbs appear at the top-right corner of the website, in small but readable font consistent with the rest of the website. 

Even the separators between the categories are simple. 

These breadcrumbs are easy to locate and understand. But they don’t draw any more attention than they need to.

Broken links are bad for SEO and UX, so it’s important to ensure your breadcrumbs work properly.

With Semrush’s Site Audit tool, you can check all your internal links at once.

After setting up, navigate to the “Internal Linking” report.

“Internal Linking” widget selected from Site Audit dashboard

Look to the “Errors” section to see whether you have broken or malformed links.

If so, click the “# issue(s)” button to see affected pages.

"Internal Linking” report in Site Audit

You can use the “Send to…” button to create a task in Trello, Zapier, or the Semrush CRM.

After applying a fix, click “Rerun campaign” and ensure the issue disappears.

"Send to..." and “Rerun campaign” buttons highlighted on Site Audit Issues tab

Finally, head to the “Issues” tab to look at other errors, warnings, and notices. And improve your site’s technical SEO.

Errors section under the “Issues” tab

How to Add Breadcrumbs to WordPress Websites

Since WordPress is the most popular content management system (CMS), let’s look at how you can add breadcrumbs in WordPress.

Some WordPress themes support breadcrumbs out of the box.

If your theme doesn’t do this for you, you can use a plugin like Yoast SEO.

Go to “Plugins” > “Add New.”

Plugins menu in WordPress

Search for “Yoast” and click “Install Now.” 

"Install Now" button selected under Yoast SEO

Hit the “Activate” button that appears once installation is complete.

Next, you need to add a small piece of code to the header.php file section of your theme.

If you lack technical prowess, we recommend asking a developer on your team for help. Changing your theme file can lead to big problems for your site if you make mistakes.

If you’re comfortable proceeding, copy the code below.

<?php
if ( function_exists('yoast_breadcrumb') ) {
yoast_breadcrumb( '</p><p id="breadcrumbs">','</p><p>' );
}
?>

And navigate to “Appearance” > “Theme File Editor” from the sidebar.

"Theme File Editor” selected from the sidebar menu

In the theme editor, paste the code you copied in the “header.php” section of your theme. 

Code pasted in the theme editor, under “header.php” section

Then, click “Update File” to save changes.

"Update File" button highlighted

After that, go to “Yoast SEO” > “Settings” from the sidebar.

"Settings" selected under Yoast SEO section

Then, scroll to “Advanced” > “Breadcrumbs.”

Navigate to Breadcrumbs

A form will appear where you can configure your breadcrumbs based on how you want them to appear on your website.

"Breadcrumbs" form in Yoast SEO

Finally, toggle on the “Enable breadcrumbs for your theme” option found below the form.

“Enable breadcrumbs for your theme” option highlighted

Monitor Your Breadcrumbs with Semrush

Semrush’s Site Audit tool can help you check for broken breadcrumbs. And ensure your breadcrumb schema works properly.

Sign up free to try it out. And access a variety of other useful tools, including:



Source link : Semrush.com

Social media & sharing icons powered by UltimatelySocial
error

Enjoy Our Website? Please share :) Thank you!