What is Breadcrumbs

You’ll understand what breadcrumbs are, why they help both visitors and Google, how they improve your SEO, different types you can use, and simple steps to add them to your website.

What Are Breadcrumbs?

Breadcrumbs are navigation links that show users where they are on your website. They appear at the top of a page and show the path from the homepage to the current page.

Real-World Example

Think about visiting a shopping mall. The directory shows: “You are here: Mall Entrance → Second Floor → Electronics → TVs”

Breadcrumbs work the same way on websites.

How They Look

On an e-commerce site:

Home > Men's Clothing > Shirts > Casual Shirts > Blue Cotton Shirt

On a blog:

Home > SEO Tips > Technical SEO > What is Breadcrumbs

On a recipe site:

Home > Recipes > Desserts > Cakes > Chocolate Cake Recipe

Each part is clickable. Users can jump back to any previous section instantly.

Why Breadcrumbs Matter

Breadcrumbs help both your visitors and search engines.

Benefits for Visitors

Easy Navigation Visitors can go back to parent categories without using the back button. One click takes them exactly where they want.

Know Their Location People understand where they are on your site. This reduces confusion and frustration.

Explore Related Content If someone lands on a specific product page, breadcrumbs show related categories they might want to explore.

Reduce Bounces When people know where they are and can easily navigate, they stay longer and explore more pages.

Benefits for SEO

Better Google Understanding Google sees your site structure clearly. It understands how pages relate to each other.

Rich Snippets in Search Google often shows breadcrumbs in search results instead of your URL. This makes your listing more attractive and clear.

Example in Search Results:

Your Site Name
Home › Products › Laptops › Gaming Laptops
Best Gaming Laptops 2026 - Top Picks...

This looks better than:

Your Site Name
yoursite.com/products/laptops/gaming/page-123
Best Gaming Laptops 2026 - Top Picks...

Internal Linking Breadcrumbs create automatic internal links. This helps spread link value across your site.

Lower Bounce Rate When people can navigate easily, they stay longer. Google notices this positive signal.

Types of Breadcrumbs

There are three main types. Most sites use the first one.

Location-Based Breadcrumbs (Most Common)

Shows where the page sits in your site structure.

Example:

Home > Blog > SEO Tips > Technical SEO

Best for:

• E-commerce sites
• Blogs with categories
• News websites
• Any site with clear hierarchy

Why it works: Users see exactly where they are and can navigate up the hierarchy easily.

Attribute-Based Breadcrumbs

Shows the attributes or filters a user selected.

Example on shopping site:

Home > Women's Shoes > Size 8 > Color: Black > Brand: Nike

Best for:

• E-commerce with filters
• Sites with search refinement
• Product catalogs

Why it works: Shows how users narrowed their search. They can remove filters by clicking breadcrumb levels.

History-Based Breadcrumbs

Shows the path the user took to reach the current page (like browser history).

Example:

Previous Page > Page Before That > Current Page

Best for: Almost never recommended. Users have browser back button for this.

Why avoid: Confusing because everyone’s path is different. Doesn’t help SEO.

How to Add Breadcrumbs to Your Site

For WordPress Users (Easy Way)

Using Yoast SEO Plugin:

1. Install Yoast SEO plugin (free)
2. Go to SEO → Search Appearance
3. Click on Breadcrumbs tab
4. Toggle “Enable breadcrumbs” to ON
5. Customize separator (use > or / or →)
6. Save changes
7. Add code to your theme where you want breadcrumbs to appear

Code to add to theme:

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

Using Rank Math Plugin:

1. Install Rank Math plugin
2. Go to Rank Math → General Settings
3. Click Breadcrumbs tab
4. Enable breadcrumbs
5. Choose separator style
6. Customize appearance
7. Add shortcode where you want breadcrumbs:

Using Breadcrumb NavXT Plugin:

1. Install Breadcrumb NavXT
2. Go to Settings → Breadcrumb NavXT
3. Configure display settings
4. Choose separator
5. Add code to theme: <?php bcn_display(); ?>

For HTML Websites (Manual Way)

Add this code where you want breadcrumbs to appear (usually after header, before main content):

<nav aria-label="Breadcrumb">
  <ol>
    <li><a href="/">Home</a></li>
    <li><a href="/category">Category</a></li>
    <li><a href="/category/subcategory">Subcategory</a></li>
    <li>Current Page</li>
  </ol>
</nav>

With basic styling:

<style>
  nav[aria-label="Breadcrumb"] ol {
    list-style: none;
    padding: 10px 0;
    margin: 0;
  }
  
  nav[aria-label="Breadcrumb"] li {
    display: inline;
    font-size: 14px;
  }
  
  nav[aria-label="Breadcrumb"] li:not(:last-child)::after {
    content: " > ";
    padding: 0 8px;
  }
  
  nav[aria-label="Breadcrumb"] a {
    color: #0066cc;
    text-decoration: none;
  }
  
  nav[aria-label="Breadcrumb"] a:hover {
    text-decoration: underline;
  }
</style>

<nav aria-label="Breadcrumb">
  <ol>
    <li><a href="/">Home</a></li>
    <li><a href="/products">Products</a></li>
    <li><a href="/products/laptops">Laptops</a></li>
    <li>Gaming Laptops</li>
  </ol>
</nav>

For Shopify

Using theme settings:

1. Most Shopify themes include breadcrumbs by default
2. Go to Online Store → Themes
3. Click Customize
4. Look for breadcrumb settings in theme options
5. Enable and style as needed

If your theme doesn’t have breadcrumbs:

1. Edit theme code
2. Add breadcrumb code to product.liquid or collection.liquid
3. Use Shopify’s breadcrumb snippet

For Wix

1. Wix doesn’t have built-in breadcrumbs
2. You need to add manually using text elements
3. Or use third-party breadcrumb apps from Wix App Market
4. Connect them with proper linking

Schema Markup for Breadcrumbs

Schema markup helps Google understand and display your breadcrumbs in search results.

What is Schema?

Schema is code that tells Google exactly what your breadcrumbs mean. It increases chances of breadcrumbs appearing in search results.

How to Add Breadcrumb Schema

JSON-LD Format (Recommended):

Add this code in your page’s <head> section or before </body>:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "name": "Home",
      "item": "https://yoursite.com"
    },
    {
      "@type": "ListItem",
      "position": 2,
      "name": "Products",
      "item": "https://yoursite.com/products"
    },
    {
      "@type": "ListItem",
      "position": 3,
      "name": "Laptops",
      "item": "https://yoursite.com/products/laptops"
    },
    {
      "@type": "ListItem",
      "position": 4,
      "name": "Gaming Laptops"
    }
  ]
}
</script>

Important notes:

• Each level needs a position number
• Include the full URL for each item
• Last item (current page) doesn’t need “item” URL
• Position numbers start from 1

Testing Your Schema

Use Google’s Rich Results Test:

1. Go to: search.google.com/test/rich-results
2. Enter your page URL
3. Click “Test URL”
4. Check if breadcrumb schema is detected
5. Fix any errors shown

Using Search Console:

1. Go to Google Search Console
2. Click “Enhancements”
3. Look for “Breadcrumbs” section
4. Check for errors or warnings
5. Fix issues and request re-crawl

Best Practices

Follow these rules to make breadcrumbs work best.

Design and Placement

Where to Put Them

• Top of the page, below header
• Above page title
• Easy to spot but not distracting

Styling Tips

• Keep font smaller than main content
• Use subtle colors (not too bright)
• Make links clearly clickable
• Use common separators: > / → •

Bad placement:

• Bottom of page (people won’t see it)
• Mixed with navigation menu (confusing)
• In footer (defeats the purpose)

Content Rules

Keep It Short

• Don’t make breadcrumbs too long
• If more than 5 levels, consider simplifying site structure
• Long breadcrumbs overwhelm users

Use Clear Labels

• “Home” not “Homepage” or “Main”
• Use actual category names
• Avoid abbreviations
• Match navigation menu labels

Current Page

• Show current page in breadcrumbs
• But make it non-clickable
• Style it differently (darker or no underline)

Technical Rules

Always Start with Home

✓ Good: Home > Category > Page
✗ Bad: Category > Page

Make Links Work

• All breadcrumbs (except current page) should be clickable
• Links should go to correct pages
• Test every link

Use Consistent Separators

• Pick one separator (>, /, →)
• Use it everywhere
• Don’t mix different separators

Mobile Friendly

• Breadcrumbs should work on phones
• Make them big enough to tap
• Consider hiding intermediate levels on mobile if too long

Common Mistakes to Avoid

Mistake 1: Making Everything Clickable

Wrong:

Home > Category > Subcategory > Current Page

(where “Current Page” is also a link)

Right:

Home > Category > Subcategory > Current Page

(where “Current Page” is plain text, not a link)

Why: People are already on the current page. Clicking it would just reload the same page.

Mistake 2: Breadcrumbs Don’t Match URL

URL: yoursite.com/shop/mens/shoes/sneakers/nike-air

Wrong breadcrumbs:

Home > All Products > Nike Air

Right breadcrumbs:

Home > Shop > Men's > Shoes > Sneakers > Nike Air

Why: Breadcrumbs should reflect the actual site structure and URL path.

Mistake 3: Too Many Levels

Wrong:

Home > Shop > All > Men > Clothing > Tops > Shirts > Casual > Cotton > Blue > Size M > Product

Right:

Home > Men's Clothing > Shirts > Blue Cotton Shirt

Why: Too many levels confuse users. Simplify your site structure.

Mistake 4: No Schema Markup

Missing: Just HTML breadcrumbs without schema code

Why it’s bad: Google might not show your breadcrumbs in search results. You miss out on better listings.

Fix: Always add schema markup code.

Mistake 5: Duplicate Home Button

Wrong: Having a “Home” link in main navigation AND in breadcrumbs right next to each other.

Right: This is actually okay. But make sure both work and look intentionally placed.

Mistake 6: Inconsistent Styling

Wrong:

• Some pages: Home / Category / Page
• Other pages: Home > Category > Page

Right: Pick one style and use it everywhere on your site.

When NOT to Use Breadcrumbs

Breadcrumbs aren’t for every website.

Skip Breadcrumbs If:

Single-Level Sites If your site only has a homepage and a few pages (like a simple portfolio or landing page), breadcrumbs are unnecessary.

Example:

Home
About
Contact
Services

No need for breadcrumbs here.

Linear User Journey If users must follow a specific path (like a checkout process or multi-step form), breadcrumbs might confuse them.

Very Small Sites If you have fewer than 10 pages total, breadcrumbs add no value.

Flat Site Structure If all your pages are at the same level (no categories or hierarchy), breadcrumbs don’t make sense.