Breadcrumbs are an essential part of web design. As a web developer, I always include breadcrumb navigation on websites. I’ll explain everything you need to know about effectively using breadcrumbs:
- What are breadcrumbs on websites, and how do they work
- The different types of breadcrumb navigation
- Key benefits of using breadcrumbs
- Best practices for implementing and optimizing
- Creative uses for breadcrumbs beyond just navigation
Whether you’re a website owner, designer, developer, or marketing expert, this article will help you maximize the value of breadcrumbs.
Let’s get started!
What Are Breadcrumbs?
Before discussing types and best practices, let’s ensure we all understand breadcrumbs and how they work.
Breadcrumbs are a trail of links that show a user’s navigation path through a website. These cues show where a page is in the site hierarchy, helping with navigation.
Typically, a breadcrumb navigation appears horizontally across the top of a web page, often just below the main headings and title. A trail of breadcrumbs looks something like this:
Home > SEO Companies > New York SEO Companies > Four Dots
Each word in the navigation bar is a clickable link that takes users to that page when clicked.
So, in this example:
- “Home” links to the homepage
- “Seo Companies” links to the SEO agencies category page
- “New York SEO Companies” links to the NYC SEO subcategory page
- “Four Dots” is the current page
Users can rapidly navigate backward up through the site architecture by clicking any of the links in the breadcrumb trail. The breadcrumbs provide a trail to retrace your steps.
In addition, the breadcrumbs give contextual information about the current page. At a glance, users understand that “New York SEO” is a “SEO Companies” subcategory. The closer to the home page, the higher up in the hierarchy.
This ability to orient users and communicate site structure makes breadcrumb trails valuable. They decrease the likelihood of visitors getting lost deep in nested pages.
Additionally, breadcrumbs provide value through their internal linking structure. We’ll explore this later.
The Origin of Website Breadcrumbs
The term “breadcrumbs” comes from the classic fairy tale “Hansel and Gretel”. In the story, the children drop bread crumbs along their path to find their way back home through the forest. Website breadcrumbs serve a similar purpose. They create a trail that helps users navigate back through a website’s structure. Unlike in the fairy tale where birds ate the crumbs, digital breadcrumbs remain intact. They provide reliable navigation cues for users exploring complex websites.
Types of Breadcrumbs
There are a few different types of breadcrumbs, each with its own purpose and use cases:
Location-Based Breadcrumbs
Location-based breadcrumbs are the most common type. They show where a page is located within the hierarchical structure of a website.
For example:
Home > Personal Injury Lawyers > New York Injury Lawyers > Mirman, Markovits & Landau, PC
This quickly tells users they are on the “Mirman, Markovits & Landau, PC” page, which sits under the “New York Injury Lawyers” subcategory, a parent “Personal Injury” category.
Each link goes back to that respective page, allowing for easy upward navigation by clicking. Location-based breadcrumbs provide a sense of orientation within the site architecture.
Attribute-Based Breadcrumbs
Attribute-based breadcrumbs indicate how a user filtered or faceted down to arrive at a particular page or product.
For example, the trail on an ecommerce category page might look like:
Homepage > Category > Size > Color > Product
This shows the specific attribute values, like Size and Color filters, that were applied to reach the current product page.
Attribute breadcrumbs work well for ecommerce sites, blogs, and other sites with robust filtering.
Path-Based Breadcrumbs
Path-based breadcrumbs display the specific sequence of pages a user passed through to reach the current page.
For example, during a multi-step checkout process:
Homepage > Cart > Customer Info > Shipping > Payment > Confirmation
This allows users to go back to any previous step in the process easily. Path breadcrumbs provide wayfinding and navigation through more complex user flows and workflows.
Historical Breadcrumbs
Historical breadcrumbs show pages recently visited by users across the entire website. They display their journey across various sections. These are rarer than other types.
The key is to choose the breadcrumb type that makes the most sense for your site’s structure and user experience. Often, a combination works best. But when used properly, all breadcrumbs ultimately aim to help orient users.
Benefits of Using Breadcrumbs
There are several significant benefits to the use of breadcrumbs on your site:
Improved Website Usability
Breadcrumbs help users better understand the organization and structure of your site. They also provide a sense of location by showing the navigation trail on each page.
This prevents visitors from feeling lost or confused when deep in nested pages many levels below the homepage. Breadcrumbs act like a map to guide users.
Enhanced SEO
When appropriately implemented, breadcrumbs can enhance search optimization in a few key ways:
- They provide internal links that search engine crawlers follow to index pages
- Optimized anchor text in the links provides relevant signals
- Short linking trails may lead to faster indexing
Overall, breadcrumbs improve site crawlability – a crucial part of an effective technical SEO strategy.
Supplemental Navigation
Breadcrumbs serve as a secondary navigation system alongside the main menus. Visitors can quickly navigate up levels in the hierarchy by clicking the trail rather than using the menus.
So, while breadcrumbs don’t replace menus, they provide supplemental wayfinding options.
Communicates Hierarchy
The structure of the breadcrumb trail communicates the site hierarchy between pages. Users immediately understand how the current page fits into the overall architecture.
Reduces Deep Nesting
Breadcrumbs can reduce the need for nested pages by providing navigation context for pages several levels deep. This simplifies information architecture.
Best Practices for Implementation
Here are some critical tips for implementing breadcrumbs effectively:
Make Links Clickable
This is crucial for usability and SEO. Every breadcrumb in the trail should have a clickable and functional link leading to that page.
Optimize Page Title Tags
Write compelling, keyword-rich title tags for each page referenced in the breadcrumbs. This provides engaging and informative anchor text.
Include Relevant Keywords
Incorporate primary and secondary keywords into the link text where they fit naturally. But avoid awkward over-optimization.
Keep Trails Short
Too many breadcrumbs lead to clutter. The ideal length is typically 3 to 5 links. More than 7 is excessive. Audit your site’s current trail lengths.
Prominent Placement
Place breadcrumbs just below page titles and headings for maximum visibility. Don’t bury them at the bottom of pages.
Use Responsive Web Design
Ensure breadcrumbs work across all devices, especially mobile. Test them extensively on mobile to provide a seamless experience.
Structured Data Markup
Add JSON-LD structured data markup to your breadcrumbs. This helps search bots understand their purpose.
Accessibility Practices
Follow conventions for accessibility like ARIA roles, color contrast, focus states, and semantics.
SEO Tips for Breadcrumbs
Here are some additional tips for optimizing breadcrumbs specifically for search:
- Include target keyword – Naturally, work the target keyword for each page into its link anchor text.
- Optimize surrounding content – Optimize each target keyword’s H1, title tag, URL, and surrounding text. This provides reinforcement.
- Link to strong pages – Ensure each breadcrumb points to a robust, optimized page relevant to that topic.
- Make links “nofollow” – Use rel=”nofollow” on the links to avoid diluting PageRank down the trail.
- Keep it short – Long trails are difficult to parse. Stick to 3-5 breadcrumbs maximum.
- Make the current page “bold” – Visually emphasize the current page in the trail to make it scannable.
- Place above the fold – Having breadcrumbs visible without scrolling improves clicks.
- Monitor click-through rate – Watch CTR data in analytics to ensure people engage with the breadcrumb links.
Creative Uses Beyond Navigation
While breadcrumbs are used for navigation, there are many creative applications as well:
Faceted Filtering
Use breadcrumbs on ecommerce category pages to display the facets or filters applied to arrive at a specific product listing.
Multi-Step Checkouts
During lengthy checkout processes, breadcrumbs can guide users through each step while providing a progress tracker.
Content Hierarchies
For content-heavy sites like wikis, breadcrumbs help convey relationships between interlinked content pages.
Blog Tag Archives
Add breadcrumbs to your blog tag archive pages to show the tags users click on and higher-level tag categories.
Wizards
Wizard multi-step interfaces can use breadcrumbs to communicate a user’s progression through the workflow.
Visualizing Search Filters
Use breadcrumbs to display the filters and refinements applied to reach the result set on search results pages.
Get creative with various use cases beyond just navigation menus! Breadcrumbs provide orientation in many website contexts.
Common Questions About Breadcrumbs
Here are answers to some frequently asked questions about using breadcrumbs:
Should I use breadcrumbs or footer navigation links?
Ideally, use both! Breadcrumbs are great for in-page navigation and orienting users. Footer links enable navigation between top-level pages. The two complement each other nicely.
What’s the ideal length for a breadcrumb trail?
Shorter is better for usability. Three to five breadcrumbs are optimal. Anything longer than seven starts to get cluttered. Audit your current site’s trail lengths.
Can breadcrumbs help with SEO?
Yes, when appropriately implemented! Optimize anchor text, link to robust pages, keep trails short, and place breadcrumbs at the top.
Should breadcrumbs replace my primary navigation?
Definitely not! Breadcrumbs are a supplemental aid, not a replacement for primary menus and nav bars. Use them alongside traditional navigation.
Can I use breadcrumbs on mobile sites?
Yes, breadcrumbs work great on mobile if they are styled and positioned appropriately. Test across devices to ensure a seamless experience.
Structured Data and Rich Snippets
By markup your breadcrumbs using JSON-LD structured data, you can enable rich search engine result snippets:
Use the BreadcrumbList schema and specify each breadcrumb’s position, title, and link.
Adding this markup provides additional opportunities to influence Google search results. Structured data improves ranking potential.
When to Avoid Breadcrumbs
While breadcrumbs are highly beneficial in most cases, there are a few instances where you may want to exclude them:
- On tiny websites with minimal pages/hierarchy
- If a homepage is immediately visible on all pages
- If using horizontal mega menus showing all sections
- On one-page websites or straightforward layouts
- If breadcrumb trails are extremely long (10+ links)
Use your best judgment based on your site’s architecture. Focus on what provides the best user experience.
Conclusion
As we’ve explored in this guide, few website elements provide as much value as simple breadcrumb trails:
- Improve user experience through better website navigation.
- Visually communicate site hierarchy and structure.
- Provide SEO benefits through internal linking and anchor text.
- Offer supplemental wayfinding alongside main navigation.
- Enable creative implementations such as faceted filtering.
At just a few lines of code, breadcrumbs give an excellent return on investment. Both human visitors and search bots will thank you!