11 breadcrumb SEO best practices for a mobile-first strategy

Search Engine Land » SEO » 11 breadcrumb SEO best practices for a mobile-first strategy

Chat with SearchBot

Please note that your conversations will be recorded.

SearchBot: I am trained with Search Engine Land content. Ask me anything!

Their design is archetypal. Their position on the page is seemingly obvious. For years they have proven their value for SEO. And yet, as we have moved to mobile-first indexing, many sites get breadcrumb navigation wrong or have no breadcrumb trail at all.

That is a mistake.

Breadcrumbs are beneficial for SEO and usability when optimally implemented for mobile devices. Here’s everything you need to know to get them right.

Typically, breadcrumbs navigation is a line of contextual links that indicate where the user is on a website. They are a form of secondary navigation, allowing users to trace their path in the site hierarchy.

Not all websites benefit from breadcrumbs. They aren’t necessary for sites that:

For such websites with flat structures where much of the content comfortably sits on the same level, breadcrumbs would offer little value as they wouldn’t contain more than two levels.

This can be true even for large websites. For example, a business news site may offer many topics and thousands of articles, but wouldn’t need multiple levels of navigation.

On the other hand, for sites based on complex hierarchical structures breadcrumbs are essential. The classic example is ecommerce, but their application is much wider.

The question is how to make breadcrumbs helpful to both users and Google. This is an art of its own.

Most UX experts recognize three types:

For SEO, there should be only one: hierarchical breadcrumbs. This is why.

Path-based breadcrumb trails display a user’s unique steps leading to their current page.

Showing a user’s previous click path is not best practice for SEO or usability.

Breadcrumbs should show hierarchy, not history.

Attribute-based breadcrumbs are encouraged when the content on a particular page belongs to multiple categories and attributes. For example, a shoe may be a black, ankle-length boot with a heel.

There is no logical hierarchy for these characteristics. So there is a question of in what order to display the breadcrumbs. Should the breadcrumbs trail look like:

Home > Boots > Heels > Black > Ankle Length

Home > Heels > Boots > Ankle Length > Black

Or some other combination.

I’ve seen recommendations to designate a primary path based on attribute usage or query volume. Or personalize the breadcrumb trail so that it will reflect each user’s individual path within the site hierarchy. Both are the wrong approach.

Rather than trying to force the linear structure of breadcrumbs on something innately polyhierarchical. Ditch the requirement for them to be within a breadcrumb trail. Rather display the attributes in a format suited to their nature as filters options.

That leaves us with hierarchy-based breadcrumb navigation. These visualize the depth of the site architecture, starting with the broadest top-level category and progressing down through more specific, nested subcategories before arriving at the current page.

Hierarchy breadcrumbs are the most commonly used, most intuitively understood and the most powerful for SEO. As such, will be the only type considered for the remainder of this article.

Breadcrumbs are an essential element to support wayfinding – orientating the user and offering one-click access to relevant, higher-level pages. This is especially important when a visitor lands on a page deep within the website hierarchy. For example, on a product page after clicking on a long-tail query Google search result.

But it’s more than website usability. Breadcrumbs support every step of the SEO process.

The internal links generated by the breadcrumbs help to expose all levels of the hierarchy to search engine crawlers. This is especially important for lower levels, which may not be reached or when reached may not achieve a high enough priority in Google’s crawl queue without such signals.

The benefits can be measured by a reduction in “discovered – currently not indexed” exclusions in Google Search Console and increased crawl frequency.

Hierarchical links help Google to contextualise content and correctly associate pages in the site structure. If Google only sees URLs through a sitemap file, they don’t understand how the URLs are related to each other.

This causes difficulties when Google tries to understand how relevant a page is in the context of the site. Breadcrumb links support the formation of topic silos, which are becoming increasingly important with entity-focused indexing.

The benefits can be measured by an increase in valid URLs in Google Search Console and a faster indexing speed.

Breadcrumbs support ranking in two ways:

The benefits can be measured in decrease in average position as well as increase in impressions in Google Search Console. Increased rank will increase clicks and thus organic sessions as a matter of course.

Breadcrumbs displayed on page and breadcrumb schema markup are separate things. Just because there are breadcrumbs on site, doesn’t mean there is breadcrumb structured data.

The fastest way to understand if your site has valid breadcrumb schema markup is to check the breadcrumbs report in Google Search Console. If you see errors, review the BreadcrumbList structured data.

For optimal impact, it’s best that both not only exist but corroborate one another’s message about site structure. This will further support Google to contextualise content, again leading to better indexing.

Also, breadcrumb structured data may assist organic performance by changing the URL path to a breadcrumb path in the SERP snippet. Although Google can display a breadcrumb path even without the breadcrumb markup.

Conversely, as with most markup, the mere presence of schema markup doesn’t guarantee the change and it can at times result in suboptimal breadcrumb path outcomes, often depending on length. So track the impact carefully. But for most sites, breadcrumb structured data is a best practice.

Breadcrumb navigation has previously been a staunchly consistent interface component. Likely because of their relative simplicity.

There are hierarchical links, and they are separated by some sort of a delimiter. But then mobile-first arrived and things got complicated. The historical best practices needed to be modified for the smaller screen.

The key user experience best practices are:

It’s a no-brainer, but so many sites get this wrong. Have breadcrumbs visible on mobile in the same design as desktop.

Like any critical SEO element, these must be rendered on the server side and crawlable without JavaScript enabled.

Include the full navigational path down the hierarchy to the current page. Link all these pages, except the last item to avoid the confusion of a self referencing link reloading the page. Don’t shorten breadcrumbs by omitting steps or truncating intermediate steps with “…” or including only the last levels. These all negate the breadcrumbs SEO power.

The question then becomes, how to include all links without breadcrumbs wrapping onto multiple lines on mobile. Not only because a multi-line breadcrumb trail does not illustrate the structure of the chain well. But more importantly, because it eats up precious space on the small screen.

To achieve single line breadcrumbs without sacrificing design or usability, leverage overflow. This allows users to swipe to see the entire trail, which can be encouraged with the inclusion of a swiper assistant or horizontal scroll bar. However, it is imperative that the overflow is implemented with CSS to remain SEO friendly.

Just because breadcrumbs are now sitting pretty on a single line, doesn’t give a licence to make the user work at scrolling. Keep anchor text succinct and keyword relevant.

Don’t feel you must mirror the page heading in breadcrumbs. It’s nice to have, but not at the expense of them becoming long or repetitive. And don’t ever cut page titles off using ellipses. Rather decide on a clear short name to use.

For example, on a property portal, if you base it on title, you may end up with the breadcrumbs:

Home > Property for sale > Houses for sale > Houses for sale in London > Houses for sale in Islington > 3 Bedroom houses for sale in Islington

Rather than the concise:

Home > Sale > Houses > London > Islington > 3 Bed

Breadcrumbs are an essential form of secondary navigation for hierarchically complex sites. They support wayfinding, improving usability and decreasing pogo-sticking from Google SERPs.

Additionally, it boosts SEO due to facilitating crawling, contextualizing content for indexing and providing internal link equity. Archetypal styling with a mobile-first twist of the entire breadcrumb trail fitting on a single line thanks to CSS overflow will show the full power of breadcrumbs.

Contributing authors are invited to create content for Search Engine Land and are chosen for their expertise and contribution to the search community. Our contributors work under the oversight of the editorial staff and contributions are checked for quality and relevance to our readers. The opinions they express are their own.

Blog

11 breadcrumb SEO best practices for a mobile-first strategy