Breadcrumbs is a feature that might seem trivial at first glance but actually plays a huge role in improving the user experience and usability of any website.
In most WordPress websites, the breadcrumb feature is integrated into themes and sometimes handled by a third-party SEO plugin. And just like any other feature in WordPress, there are bound to be errors sometimes.
The most common WordPress breadcrumb error has to do with its markup and in most cases, this is caused by a theme.
Some themes have a built-in breadcrumb feature, which can conflict with the breadcrumb SEO plugins like Rank Maths and Yoast.
Thus, the first step to fixing this error is changing your theme to the default WordPress theme and seeing if it resolves.
If changing your theme doesn’t work, don’t worry.
In this article, I’ll explain all the other common causes of WordPress breadcrumbs errors and how you can fix them (step-by-step).
This article will cover:
- What is a Breadcrumb?
- Breadcrumbs & Markup Schema
- How to validate Breadcrumb Markup Schema
- How to fix WordPress Breadcrumbs error with Rank Math
- Common causes of WordPress Breadcrumbs error and how to fix them
What is a Breadcrumb?
A breadcrumb is an extra navigation aid that helps visitors understand the relationship between an active page and other pages before it.
This is done by showing the user, in order, what page he or she is currently viewing, what page they or just came from, and what other pages exist in between.
It includes a descending trail-like structure of higher-level page names separated by arrows or dashes.
Each name is also linked to its corresponding page, this way users can easily navigate the page sequence.
A good example of where a breadcrumb is used is in blog posts. By looking at the breadcrumb widget present in a blog post you’re able to tell its category and navigate back to the category page to view similar posts.
You also see breadcrumbs being used on websites that have many pages that have a parent-child relationship.
Breadcrumbs are not always necessary, especially when you have a small website. But adding it provides a ton of benefits nonetheless.
Aside from helping users navigate better, search engines are also better able to understand the relationship between your pages and display on the SERP.
Breadcrumbs and Markup Schema
Markup schema is a system of tags or codes that are added to a website’s content to provide more information about that content to search engines.
These tags, also known as structured data, help search engines understand the context and meaning of the content on a website, and can be used to display additional information about the content in the search results.
Since a breadcrumb holds important navigational functionality and information, it makes sense that Google would create and support a schema markup just for it.
Breadcrumb markup schema is a specific type of markup schema that is used to provide information about website breadcrumbs to search engines.
This type of markup is added to the HTML code of a website and uses specific tags or codes to describe the breadcrumb trail on the site.
By using breadcrumb markup schema, a website can help search engines understand the structure and hierarchy of its content, which can improve the visibility of the site in search engine results.
To use the breadcrumb markup schema, a website’s code must be updated to include the appropriate tags or codes.
Luckily, Google has an entire resource page dedicated to all the standards and supported tags
This process can typically be done manually or using a plugin (e.g. Schema Pro) that is designed to automatically generate and add the necessary markup to the site’s code.
Once the markup has been added, you’ll need to validate it to ensure it’s properly formatted and can be understood by search engines.
Once you’ve added and validated the breadcrumb markup schema, you can use it to improve the visibility of the site in search engine results.
How To Validate Breadcrumb Markup Schema
Before going over the actual fixes for breadcrumbs error, let’s look at how to validate your breadcrumb markup schema. An easy way to detect the specific breadcrumb markup issue you might be facing for a page is the Schema Markup Validator tool.
To use the tool, go to validator.schema.org, enter the URL of the affected page and click Run Test.
Once the test is completed, you should see the source code of the URL you entered on the left-hand side and all the Schema markup data on the right-hand side.
If there are any errors, they’ll also show up on the top bar of the right panel.
There are also other tools like Google’s Rich Results Testing Tool which does the exact same thing.
It’s best to check this out first as it can give you better insights while trying to fix the breadcrumb error later on.
For example, if you see more than one breadcrumb markup, it’s a good indication that you have two different products adding them.
Note: in this article, the word “product” is used as a collective name for both WordPress themes and plugins.
How to fix WordPress Breadcrumbs error using Rank Math
If you already use or are okay with switching to the Rank Math SEO plugin, then it offers a really easy breadcrumb fix that works 99% of the time.
You can easily fix WordPress breadcrumb errors by installing Rank Math and enabling the breadcrumb function.
Navigate to the general settings page on Rank Math and select Breadcrumb from the side navigation.
By default the breadcrumb option is disabled, this is because the Rank Maths team knows most themes come with proper breadcrumb features. This option should be used when the built-in breadcrumbs fails to work properly.
Go ahead and activate the feature and set other display-related settings below.
After doing this, you can check again if the breadcrumbs error still shows up in the Google search console or your third-party scheme markup tool.
If this doesn’t work for you then you can try all the other possible solutions provided below.
Common Causes Of WordPress Breadcrumb Errors And How to Fix Them
When it comes to WordPress, there are a handful of issues that usually trigger breadcrumb errors.
Before trying anything else, make sure your theme and all plugins are updated to the latest version as the issue could have been already fixed in an update.
If that doesn’t work, then here are three of the most common causes of the error and how to fix them.
Theme / Plugin Conflict
When more than one product is handling breadcrumbs on your website, there are bound to be issues.
Most commonly, some theme developers integrate their own custom breadcrumb feature which in some cases is not compatible with other plugins that also try to add breadcrumb features.
What ends up happening, in this case, is both the theme and the plugin with its own breadcrumb feature are trying to change the markup, resulting in an invalid output.
Possible Fixes:
- Try disabling dedicated breadcrumb plugins like Breadcrumb NavXT and use your theme’s inbuilt breadcrumb.
- Try disabling your themes’ breadcrumbs feature (Themes Settings) and then installing a dedicated plugin like Breadcrumb NavXT to replace it.
- Disable the breadcrumbs feature in all SEO plugins ( e.g Yoast, Rank Maths).and let your theme take complete control.
- Try swapping your Theme out for one with proper breadcrumb implementation and support.
- Contact your Theme developer.
Multiple Breadcrumb Markup
This fix is pretty straightforward. If you have more than one plugin active that handles breadcrumbs, then it’s bound to cause problems, especially when you use them both on the same page.
Whenever a breadcrumb is added to any page, it also has its schema markup embedded.
If you add more than one breadcrumb, especially from different plugins (or from a plugin and a theme), multiple Breadcrumb schema markups are generated which can trigger an error.
You can confirm that this is the case by using the Schema Markup Validator.
Possible Fixes:
- Use only one breadcrumb plugin. Check that it’s compatible and doesn’t conflict with your theme.
- Disable the breadcrumb feature in your SEO plugin
- Make sure your theme isn’t generating its own breadcrumb markup and, if it does, disable any external breadcrumb plugin.
Missing Title or Image for a Post or Page
Believe it or not, not adding a title or featured image to a page or post can trigger breadcrumb errors.
That’s because, like any other supported schema, there are fields that are required for the markup to be complete.
There are two main error messages you get from Schema Checker when there’s incomplete breadcrumb markup present on a page:
- “One of “name” or “item.name” must be provided. / Either “name” or “item.name” should be specified”
- “A value for the image field is required. / The image field is recommended. Please provide a value if available.”
When you create a WordPress Post/Page, the title is passed on to all schema markup. When no title is specified for the post/page, the name tag on the breadcrumb inherits no value and this triggers the error.
If you do not wish to add a title to the post/page, then in your breadcrumb schema you must manually specify a name for the page using the “item.name” tag.
In breadcrumb markup schema, “item.name” is a specific tag or code that is used to specify the name of a page or piece of content within the breadcrumb trail.
This tag is typically used within the overall breadcrumb schema code, which provides information about the structure and hierarchy of the website’s content to search engines.
For example, if a website has a breadcrumb trail that consists of the pages “Home,” “Products,” and “Electronics,” the breadcrumb schema code might use the “item.name” tag to specify the names of each of these pages in the trail. The code might look something like this:
| <div itemscope itemtype=”http://schema.org/BreadcrumbList”> <span itemprop=”itemListElement” itemscope itemtype=”http://schema.org/ListItem”> <link itemprop=”item” href=”https://www.example.com/”> <span itemprop=”name”>Home</span> <meta itemprop=”position” content=”1″ /> </span> <span itemprop=”itemListElement” itemscope itemtype=”http://schema.org/ListItem”> <link itemprop=”item” href=”https://www.example.com/products/”> <span itemprop=”name”>Products</span> <meta itemprop=”position” content=”2″ /> </span> <span itemprop=”itemListElement” itemscope itemtype=”http://schema.org/ListItem”> <link itemprop=”item” href=”https://www.example.com/products/electronics/”> <span itemprop=”name”>Electronics</span> <meta itemprop=”position” content=”3″ /> </span> </div> |
In this example, the “item.name” tag is used to specify the names of each page in the breadcrumb trail, which are “Home,” “Products,” and “Electronics.”
This information can be used by search engines to understand the structure and hierarchy of the website’s content and improve its visibility in search results.
Possible Fixes:
For the first error message, it indicates that there is no assigned name to the WordPress post/page/custom post type.
Normally, WordPress will automatically name all posts created, but some plugins might interfere with this, so check if the page with the breadcrumb error has a name.
If you see “No Title”, enter a short descriptive name.
Sometimes, it might not be the WordPress page title but the breadcrumb “item.name”.
You can manually set this via your SEO plugin. Both Rank Maths and Yoast have the option to manually set the breadcrumb title of pages.
For the second error message, it has to do with not setting a featured image for your WordPress page. Once you add an image, it should be resolved.
Once you’ve made sure there’s a title and featured image on the affected page, you can try revalidating the page to see if the breadcrumb error is gone.
Conclusion
In conclusion, the WordPress Breadcrumbs Markup Error can be a bit intimidating especially for non-technical people. But with the fixes covered in this article, you should be able to quickly resolve it.
More WordPress tutorials…
Found this guide useful? Take a peek at some of our other WordPress guides for some handy tips and tricks:
