Breadcrumbs are an essential part of website navigation and design. As a web designer myself, I always include breadcrumbs on client websites. I’ll explain everything you need to know about effectively using breadcrumbs:
- What are breadcrumbs, and how do they work
- The different types of breadcrumbs
- Key benefits of using breadcrumbs
- SEO Best practices for implementing and optimizing breadcrumbs
- Creative uses for breadcrumbs beyond just navigation
Whether you’re a website owner, designer, developer, or SEO expert, this article will help you maximize the value of breadcrumbs.
Let’s get started!
What Are Breadcrumbs?
Before diving into types and best practices, let’s ensure we’re all on the same page about 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, breadcrumbs appear horizontally across the top of a web page, often just below the main headings and title. A breadcrumb trail looks something like this:
Home > SEO Companies > New York SEO Companies > Four Dots
Each word in the breadcrumb trail 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 subcategory of “SEO Companies”. 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 SEO value through their internal linking structure. We’ll explore this later.
Types of Breadcrumbs
There are a few different types of breadcrumbs, each with their 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 Gaming Laptops page, which sits under Laptops, a subcategory under the parent Products category.
Each breadcrumb links 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 more rare 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 important benefits to using breadcrumbs on your site:
Improved Website Usability
Breadcrumbs help users better understand the organization and structure of your site. Breadcrumbs 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 SEO 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
Work primary and secondary keywords into the visible breadcrumb link text where it fits 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 starts feeling 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 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 Best 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 breadcrumb 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 links 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 and SEO value.
- 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. 3-5 breadcrumbs is optimal. Anything longer than 7 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 above the fold. All best practices that improve SEO value.
Should breadcrumbs replace my main site 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 would be extremely long (10+ links)
Use your best judgment based on your site 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 navigation and orientation.
- 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.
By taking the time to implement and optimize breadcrumbs properly, you can maximize these immense UX and SEO benefits.
Follow the best practices outlined above to ensure your breadcrumbs provide the greatest impact.
At just a few lines of code, breadcrumbs give an excellent return on investment through simplified user experiences. Both human visitors and search bots will thank you!
This detailed guide should give you all the knowledge needed to leverage breadcrumbs on your sites.