Breadcrumbs are a form of navigation that indicates the location of the current page, assisting users in understanding the structure of a website and facilitating movement. Enhancing user experience (UX) in this manner also improves the site’s evaluation by search engines.

In this article, we will thoroughly explain the basics of breadcrumbs and how to implement them.

What are Breadcrumbs?

Breadcrumbs are navigation that shows the hierarchical structure of web pages. Typically placed at the top of a webpage, they help users understand their current location. Please refer to the illustration below.

Breadcrumbs display the current location within a web page’s hierarchical structure, with each level separated by characters like “>” or “/”.

By using breadcrumbs, users can more easily find related content, improving the website’s accessibility.

Roles of Breadcrumbs 

The roles of breadcrumbs include:

• Indicating to users where they are within the site.
• Making it easier for crawlers to navigate the site.

Showing users their current location impacts usability and UI/UX, while crawler navigation affects indexing (ease of page registration).

Both are crucial factors for a site, making it often advisable to implement breadcrumbs even outside of SEO considerations.

Reference Page: “What are breadcrumbs? Why are they important for SEO?” – Yoast

Types of Breadcrumbs Breadcrumbs can be broadly classified into three types based on their usage. Each type has a different display format, and the choice depends on the website’s characteristics. Here, we introduce the features and roles of each type.

Type 1: Location-based Breadcrumbs 

Location-based breadcrumbs are used to show users which hierarchy level they are navigating within a website. They are the most commonly used type of breadcrumbs.

Type 2: Attribute-based Breadcrumbs 

Attribute-based breadcrumbs show the category (attribute) the user is browsing within a website.

They change based on user actions, making them suitable for websites where users select multiple options.

For instance, this is suitable for websites frequented by users who wish to search under multiple criteria (such as area, size, color, price conditions, etc.) on e-commerce sites or portal sites, and desire to view a large selection of products within similar categories.

Type 3: Path-based Breadcrumbs 

Path-based breadcrumbs display the route users have taken to reach a page. The displayed list changes if the route to the page varies.

Due to their characteristics, they are also known as history-type breadcrumbs. Since their function overlaps with the browser’s back button, there are hardly any websites that use them nowadays.

The Origin of Breadcrumbs

The term “breadcrumbs” is said to originate from the fairy tale “Hansel and Gretel.” In the story, the characters drop breadcrumbs on the ground as markers to avoid getting lost in the forest and to find their way back home. Although in the tale, birds eat the breadcrumbs, preventing their return, on a website, breadcrumbs allow users to easily navigate to higher levels or the homepage.

History of Breadcrumbs

Breadcrumbs appeared in the 1990s when website navigation formats varied greatly, making it difficult for users to determine their location.

Breadcrumbs were developed as an effective way to display a website’s hierarchical structure and became widely adopted. Initially, breadcrumbs were created using HTML list elements and styled with CSS.

Entering the 2000s, breadcrumbs evolved to include more advanced functionalities. For instance, JavaScript capable of generating breadcrumbs emerged, reflecting dynamic content.

Nowadays, breadcrumbs are implemented on most websites, valued not only for enhancing user understanding of site structures but also for contributing to SEO.

Benefits of Breadcrumbs

There are four major benefits to implementing breadcrumbs:

• Improved usability
• Enhanced crawlability
• Reflection in search results
• SEO benefits through internal linking

Improved Usability

Usability refers to the ease of use of a website. Breadcrumbs help users understand the structure of a site, where they are within it, and how to navigate to another page.

Since Google emphasizes a user-first approach, enhancing usability indirectly serves as an SEO strategy.

Enhanced Crawlability

One of the critical points in SEO is enabling crawlers to navigate and index the site. Without indexing, pages will not be reflected in search results, making indexing crucial upon page creation.

Crawlers navigate sites by following internal links, making breadcrumbs effective for improving navigation efficiency. 

They can prompt crawlers to visit category pages from already indexed pages and follow new page links from those category pages to facilitate indexing.

Reflection in Search Results

Various information appears in search results, commonly titles and descriptions. However, if breadcrumbs are implemented, a site map might be displayed alongside the URL above the title.

Being reflected in search results can make page content more understandable to users, potentially impacting click-through rates.

SEO Benefits Through Internal Linking

Breadcrumbs typically function as internal links. The anchor text of links is a crucial point in SEO, and installing breadcrumbs on all pages can concentrate links from lower-level pages to category pages or the homepage.

Concentrating internal links on important pages is a fundamental SEO strategy.

Considerations When Creating Breadcrumbs

Implementing breadcrumbs is not inherently difficult. However, hastily created breadcrumbs often fail to produce the intended effects. Here are some considerations for creating effective breadcrumbs.

Create a Clear Hierarchical Structure 

For breadcrumbs to be user-friendly, the website structure must be clear. Typically, breadcrumbs are created in the following format:

Generally, categorization proceeds from larger to smaller categories. The more pages a website has, the more challenging it becomes to maintain optimal breadcrumbs.

Ensuring a relevant structure is also crucial. For example, a breadcrumb trail like the following is clearly and effectively utilized.

However, a breadcrumb trail like the following indicates an improper connection and a lack of effective hierarchical structuring.

With a properly organized structure, a natural and effective hierarchy will emerge.

Include SEO Keywords 

Incorporating SEO-targeted keywords into breadcrumbs allows for the inclusion of target keywords in anchor text, a basic SEO strategy. This can lead to improved usability and SEO performance.

Of course, creating an effective breadcrumb trail for SEO requires a page design mindful of SEO. Predict the keywords users might search for and create category pages accordingly.

However, forcibly inserting SEO keywords can lead to penalties from Google. Always prioritize user convenience and avoid unnatural inclusions.

Related Article: Effective Ways to Insert and Select SEO Keywords! How to Outperform Competitors?

Implement Across All Web Pages 

Breadcrumbs should be set on all web pages. Pages without breadcrumbs can frustrate users, reducing usability and potentially lowering SEO benefits.

By ensuring consistent implementation, both SEO benefits and user engagement can improve. However, pages like the homepage or special feature pages (e.g., limited-time or sale announcement pages) that cannot be categorized may not need breadcrumbs.

Place at the Top of Web Pages 

Crawlers read breadcrumbs at the top of the page. Therefore, always place breadcrumbs at the top of the page.

Placing them at the top also helps users quickly grasp their location, enhancing effectiveness.

Display on Smartphone Screens 

On smartphones, the more a user navigates to lower-level pages, the more likely breadcrumbs can become obstructive, leading some websites to hide breadcrumbs on mobile versions. However, from an SEO perspective, it’s better to include breadcrumbs on mobile pages as well.

Consider displaying breadcrumbs in a way that avoids clutter, such as abbreviating parts of the breadcrumb trail.

How to Implement Breadcrumbs

Implementing breadcrumbs for users simply involves linking using anchor text.

However, to ensure crawlers recognize the breadcrumbs, it’s necessary to markup with structured data. Markup with structured data can be cumbersome and may not lead to direct SEO benefits, but it helps search engines understand the content of your site more accurately, so make the most of it where possible.

Organizing Directory Structure

Setting up breadcrumbs typically reflects the site’s hierarchical structure directly. To use them more effectively, it’s essential to start by organizing the site’s directory structure.

Generally, breadcrumbs should look like this:

The above applies to sites with four levels of hierarchy, however, in cases where there are fewer hierarchical structures, it may only have major categories, or content may be directly under the homepage. It’s not about what’s good or bad, but about what structure is most user-friendly.

As the number of pages on a site increases, modifying the directory structure becomes more challenging. Therefore, it’s recommended to review the sitemap and decide on the directory structure as early as possible.

Recommended and Not Recommended Practices

If the directory structure is correctly set, breadcrumbs should naturally include page titles or themes. However, some sites, hoping for SEO benefits, forcefully stuff keywords into their breadcrumbs.

Recommended breadcrumb examples include:

All three examples use a correct site structure. Whether you use “Homepage,” “HOME,” or the site name in breadcrumbs doesn’t matter from a usability standpoint (though it may differ from an SEO perspective).

Conversely, not recommended breadcrumb examples include:

As you can see, these examples attempt to gather internal links in a clearly incorrect manner, using subjective rather than objective facts and ignoring site structure, thus not recommended.

Markup with Structured Data

Google supports three types of structured data:

• JSON-LD
• microdata
• RDFa

Any of these formats can be used, but due to the abundance of implementation guides and ease of use, Tokyo SEO Maker strongly recommends JSON-LD. While structured data can be broadly applied beyond breadcrumbs, JSON-LD is the most widely used and user-friendly option.

The method for structuring markup for breadcrumbs is omitted here due to its complexity and the potential for incorrect crawler recognition if not properly set.

Additionally, as WordPress site construction has become widespread, depending on the WordPress theme or plugin used, it can be implemented with minimal effort.

Breadcrumb Design

Breadcrumb design directly impacts usability, so please adhere to the following:

Font Size and Color 

Breadcrumbs play a crucial role in website navigation. Choose appropriate font sizes and colors. Typically, breadcrumb text is slightly larger and displayed in a more emphasized color than headers or body text.

Separators 

Separators like “>” or “/” play a vital role in breadcrumb design, providing visual distinction and clarity, and are widely used across websites. However, the choice of separators should be adjusted according to the website’s style or theme.

Breadcrumb Placement 

Breadcrumbs are commonly placed at the top of web pages, but depending on the website’s style or layout, they might also appear at the bottom. The placement of breadcrumbs should be carefully considered for visibility during navigation.

Responsive Design 

Breadcrumbs need to be designed responsively to enhance visibility across various devices. Adjust font sizes and layouts to ensure breadcrumbs are displayed appropriately even on small screens.

Why WordPress is Strong for SEO 

Over the past decade, WordPress has become widely used. Google has previously indicated that WordPress is strong for SEO purposes.

This doesn’t mean Google favors WordPress, but using WordPress allows even those with limited web knowledge to easily set up breadcrumbs, titles, headers, etc., focusing on content to achieve high SEO effectiveness.

Post-Implementation Actions for Breadcrumbs

After installing breadcrumbs, it’s necessary to verify that they are correctly marked up and check for any errors.

Verification with the Rich Results Test Tool 

Google offers the Rich Results Test Tool for free. Rich results refer to information in search results other than the blue links.

Using the Rich Results Test Tool allows you to check if structured data is correctly marked up. If there are any mistakes, errors, or warnings will be displayed, so it’s crucial to conduct this verification at least once.

Verification with Google Search Console 

Google Search Console allows you to verify that breadcrumbs are functioning correctly. If there are errors or warnings, it will display the number of issues and their causes, so regularly review and make necessary improvements.

Frequently Asked Questions About Breadcrumbs 

Many webmasters surprisingly have questions regarding breadcrumbs, so we’ve compiled some common questions.

Q: Should breadcrumbs be installed on mobile sites? 

A: Yes, they should.

In principle, the information needed for desktop sites is also necessary for mobile sites. If it’s deemed unnecessary for mobile, it would logically be unnecessary for desktop as well.

Some believe breadcrumbs should not be installed on mobile pages due to issues like obstructing the view or dominating the first screen, affecting readability. However, Tokyo SEO Maker recommends their installation, even if it means placing them at the bottom of the page.

There are concerns about occupying two to three lines at the top of the page, but it’s possible to install them in a single line by allowing horizontal sliding. Decide whether to include or exclude them based on considerations of usability.

Q: Is it more appropriate to place breadcrumbs at the top or bottom of the page? 

A: Either is fine.

Some SEO firms and web design companies recommend placing them at the top, but there’s hardly any SEO benefit to this placement. The effect observed from placing breadcrumbs at the top was related to SEO strategies over five years ago. Currently, the same evaluation is given regardless of where on the page the breadcrumbs are located, provided they are present at the same granularity.

However, if a page contains multiple breadcrumbs, only the topmost breadcrumb trail will be considered for evaluation (reflected in search results).

Consider what placement benefits the user the most.

Q: Can multiple breadcrumbs be installed on one page? 

A: Yes, multiple installations are permissible.

It’s acceptable to have multiple breadcrumbs on a page. Sites utilizing databases sometimes have multiple breadcrumb trails, which is a correct practice.

Commonly seen on e-commerce sites, for example:

Top > Domestic Watches > Brand > Product Page

Top > Ranking > Product Page

Top > Watch Feature Page > Product Page

This approach ensures users can easily navigate from the product page to “Domestic Watches,” “Brand,” “Ranking,” or “Features.” It’s a common tactic to approach users interested in similar products (domestic watches, brands), top-selling products (rankings), or feature pages differently.

However, be aware that if multiple breadcrumbs are installed, only the top one will be evaluated.

Q: Will installing breadcrumbs strengthen SEO? 

A: Installation alone is not meaningful.

Installing breadcrumbs as part of SEO efforts is common. However, it’s not the act of “installing breadcrumbs” that serves as an SEO measure but “structuring the site to function correctly with breadcrumbs.”

Sites that rank high in search results do so not because they have breadcrumbs but because, beyond excellent content, they are correctly managed and receive appropriate evaluation from crawlers.

Similar discussions exist regarding the SEO impact of installing a table of contents, but merely installing it does not improve search rankings.

Q: Should breadcrumbs be installed on all pages? 

A: It’s better to install them on as many pages as possible.

Breadcrumbs are unnecessary on the homepage, LPs, or pages with specific purposes, but it’s recommended to install them on all other pages.

This is often beneficial from various perspectives, including usability, crawlability, and concentrating internal links.

However, if structured data is not correctly marked up, the effectiveness of installed breadcrumbs may be diminished, so always confirm they function as intended.

Summary

In this article, we detailed the fundamental concepts, benefits, and actual installation methods of breadcrumbs, which serve a crucial navigation role. By correctly setting up breadcrumbs, users can accurately understand their page location. Follow the methods shared here to install breadcrumbs and strive to improve usability, which will positively impact SEO.

Author Profile

International Web Consultant Paveena Suphawet

A trilingual professional in English, Thai, and Japanese, she has numerous achievements in international SEO. She studied the latest IT technologies at Assumption International University, Thailand, and majored in International Business at the University of Greenwich, UK. Following her tenure at ExxonMobil’s Thai branch, she became a key member of Admano from its establishment.

Return to the top of Japan SEO