The breadcrumb, a discreet but powerful navigation element, plays a key role in user experience (UX) and organic search (SEO). However, it’s important to know how to implement and optimize it to improve your pages' visibility in search engines.
Let's explore the world of breadcrumbs together: their role, how they're displayed, and best practices to implement them successfully on your website!
What is the breadcrumb?
The breadcrumb, called a "breadcrumb" in English, is a web navigation element that indicates a position. It helps users understand their current location on a website relative to the overall hierarchical structure.
Typically displayed at the top of a page, the breadcrumb lists the previous pages the user passed through to reach their current page. It often takes the form of a simple navigation path such as: Home > Category > Subcategory > Article, as in this example from the France Travail site.
Using a breadcrumb significantly improves the user experience (UX) on a website. It provides a clear way to move up a site's hierarchical levels without having to use the browser's back button.
The importance of the breadcrumb for SEO
The breadcrumb, by its structure and its role in user experience, influences a website's ranking in search engines.
UX, an important SEO factor
The importance of UX as an SEO factor is well established! Easy, intuitive navigation improves visitor satisfaction. This leads search engines to evaluate the site more positively and to raise its position in search results.
Furthermore, a user experience made easier by breadcrumbs reduces bounce rate and increases time spent on pages — signals that search engines interpret positively, which benefits your organic ranking!
Breadcrumb structure: help for Google's bots
Search engines like Google use breadcrumbs to analyze a website's structure and index it appropriately. This clear hierarchy of information helps improve the site's ranking in search results.
The links in the breadcrumb also strengthen internal linking, distributing link value (link juice) across pages effectively.
Ergonomic display in search results
One of the most visible advantages of breadcrumbs is their ability to appear directly in Google search results (SERP). Rather than showing just the URL, Google can display the full navigation path, making results more attractive to users, as in the example below:
An aspect that can increase the click-through rate (CTR) for your pages.
How to build your breadcrumb with structured data?
Designing an SEO-optimized breadcrumb involves the smart integration of structured data. These, using a standardized coding format (Schema.org), communicate to Google's crawlers the organizational model of your pages.
There are several methods to implement structured data for your breadcrumb:
The JSON-LD method
Easy to implement and recommended by Google, the JSON-LD format is inserted into the HTML head, making it easier to maintain. Adding it to the site is relatively simple and does not disrupt the rest of the HTML code, since it is contained in a block separate from the page's main content.
Although it does not directly affect how the breadcrumb is displayed to the user, it is essential for SEO.
Example of JSON-LD code for a breadcrumb:
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [{
"@type": "ListItem",
"position": 1,
"name": "Accueil",
"item": "https://exemple.com"
},{
"@type": "ListItem",
"position": 2,
"name": "Catégorie",
"item": "https://exemple.com/categorie"
},{
"@type": "ListItem",
"position": 3,
"name": "Sous-catégorie",
"item": "https://exemple.com/categorie/sous-categorie"
}]
}
</script>
Place this script in the <head> tag of your HTML page or just before the closing </body> tag to indicate the navigation path.
RDFa and Microdata formats
Implementing the breadcrumb using RDFa or Microdata allows for precise semantic integration within your HTML content. This method improves readability for search engines and can potentially enhance how your pages appear in search results.
Here is how you could structure your breadcrumb using these two methods:
- With RDFa attributes
RDFa (Resource Description Framework in attributes) adds specific attributes to annotate HTML content, which helps search engines understand the navigation structure of your site. Here is an example of code:
<div vocab="http://schema.org/" typeof="BreadcrumbList">
<ol property="itemListElement" typeof="ListItem">
<li>
<a property="item" typeof="WebPage" href="https://exemple.com">
<span property="name">Accueil</span></a>
<meta property="position" content="1">
</li>
<li>
<a property="item" typeof="WebPage" href="https://exemple.com/categorie">
<span property="name">Catégorie</span></a>
<meta property="position" content="2">
</li>
<li>
<a property="item" typeof="WebPage" href="https://exemple.com/categorie/sous-categorie">
<span property="name">Sous-catégorie</span></a>
<meta property="position" content="3">
</li>
</ol>
</div>
- With Microdata
Microdata follows a similar pattern to RDFa but uses the itemscope, itemtype, and itemprop attributes to mark up HTML content:
<ol itemscope itemtype="http://schema.org/BreadcrumbList">
<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
<a itemprop="item" href="https://exemple.com">
<span itemprop="name">Accueil</span></a>
<meta itemprop="position" content="1">
</li>
<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
<a itemprop="item" href="https://exemple.com/categorie">
<span itemprop="name">Catégorie</span></a>
<meta itemprop="position" content="2">
</li>
<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
<a itemprop="item" href="https://exemple.com/categorie/sous-categorie">
<span itemprop="name">Sous-catégorie</span></a>
<meta itemprop="position" content="3">
</li>
</ol>
Both of these methods allow you to clearly annotate your site's breadcrumb.
Choosing between RDFa and Microdata depends on your preference and on compatibility with other types of structured data you may already be using on your site.
The HTML format
Using traditional HTML tags without additional structured data is the least effective method for SEO, but it remains an option for visually structuring the breadcrumb. In any case, you will need to include HTML tags on your site to display your breadcrumb (either in your theme or via a plugin).
Example of breadcrumb integration in HTML:
<nav aria-label="Breadcrumb">
<ol>
<li><a href="https://exemple.com">Accueil</a></li>
<li><a href="https://exemple.com/categorie">Catégorie</a></li>
<li><a href="https://exemple.com/categorie/sous-categorie">Sous-catégorie</a></li>
<li aria-current="page">Article actuel</li>
</ol>
</nav>
This example shows a basic breadcrumb that guides the user from the homepage to the current page. Using the aria-label attribute on the <nav> element improves accessibility by defining the navigation role of the block.
The aria-current="page" attribute indicates which page is active, which is useful for accessibility.
Via a WordPress plugin
For beginners in code or users who prefer a less technical solution, using a WordPress plugin can greatly simplify adding structured data dedicated to breadcrumbs. Among the most popular plugins for optimizing the navigation path on your site, you will find:
- Yoast SEO : In addition to its many features for SEO optimization, this WordPress plugin offers an option to easily add an SEO-friendly breadcrumb to your site.
- Breadcrumb NavXT : This plugin supports the integration of structured data to improve SEO. Extremely flexible, it allows advanced customization to adapt to your site's structure.
- Rank Math SEO : Similar to Yoast SEO and powered by artificial intelligence, this plugin offers an intuitive interface to customize the appearance and behavior of the breadcrumb trail on your site.
These plugins take care of the technical implementation, allowing you to focus on other aspects of your site, such as creating high-quality content!
How to verify the correct implementation of breadcrumb structured data?
Have you installed the structured data for your breadcrumb? Perfect! It’s time to check that everything is properly configured.
Log in to your Google Search Console, then go to the “Enhancements” section at the bottom of the left-hand menu. You will see a “Breadcrumb” link.
By clicking on it, the tool shows any errors and how to fix them. If all indicators are green, as in the example below, it means you have correctly installed the breadcrumb structured data!
Our final tip for adding breadcrumb structured data
Integrating the breadcrumb enriched with structured data improves both the user experience (UX) and your website’s organic search (SEO). This strategy enhances intuitive navigation and boosts your visibility in search engines.
To maximize the breadcrumb’s effectiveness, collaborate with an SEO web copywriter to create optimized content around your business and thereby strengthen your online presence! Post your job now on our writing platform, Redacteur.com !
The article How to add breadcrumb structured data? first appeared on Redacteur.com.
