You probably got the news. Google announced that it would stop supporting data-vocabulary.org markup for the breadcrumb feature in its search results. The deadline is April 6, 2020. If you still use the old schema and want to keep your pages appearing at Google's adorned with a neat navigation trail, it's time for some breadcrumb update. Read on!
Breadcrumb navigation is a simple way of showing your web visitors "You are here". At the same time, it provides a nice overview of how the current page fits into your site structure and a handy means of traversing the latter — all in one place.
To make it work for the visitor doesn't require it to conform to any rules. A string of connected links is all a human needs to grasp it.
This is different with a crawling algorithm. For it, to understand that a series of links defines a navigation trail requires a special format to designate them as such.
The breadcrumb markup is this designation. If done correctly, it enables the Google crawler to interpret it and include it in search result listings.
Admittedly, Google takes the liberty to modify your original markup for use on its SERPs, as with everything else there.
Thus, your top tier item is rendered like the default URL from your site property in Google Search Console, not like you designed it.
Also, only items with links in the original code feature in page snippets.
Finally, the navigation trail itself is lost, as the entire structure links solely to the featured page.
Still, this is a nice touch hinting at what your site is about and what else there is to find, hopefully helping to get the click.
Now, with the aforementioned announcement, Google changes the rules of recognizing the breadcrumb markup by its crawler. In order to ensure the navigation trail will appear in Google search results in the future, it has to conform to the new schema rules.
Let's make it clear, you don't have to act. If you leave your existing markup as is, your visitors — obviously — will still be able to use it. Your pages won't disappear from Google search results either.
The only consequence will be the loss of the navigation trail in your pages' listings. If you can live with it, you will save a significant amount of time, depending on your site size, by ignoring the issue.
However, if you find the feature helpful and intend using it in the future, you need to act.
Depending on your configuration, you might face a fair amount of work. This is very much the case If you have to attend to every page by hand.
Below is a simple helper tool to convert your outdated breadcrumb navigation code online. All you need to do is copy and paste your old markup into the box, choose appropriate settings and click the arrow button.
The utility will then try to analyze your existing HTML and transform it into the up-to-date schema.org-based markup.
You can get started right away or scroll down for explanations first. Hard choice! 😉
In general, the utility inserts your old breadcrumb navigation code into a div on this page, then tries (hard) to transform it in place and populates the output box with the resulting HTML. The latter can then be selected and copied, ready for pasting into your HTML or online template editor.
The input markup is expected to represent one breadcrumb trail, that is, consist of several span elements belonging together and conforming to the data-vocabulary.org rules, optionally enclosed by one container element like <p> or <div>.
The script in the background will analyze the provided markup looking for distinctive elements and attributes of data-vocabulary.org schema and trying to convert them into new corresponding elements and attributes as defined by the schema.org rules.
All other tags included with your input will be left mostly untouched, or that's the idea. Since your HTML will be inserted for treatment into this very page, it will be parsed beforehand and stripped of any possibly dangerous parts. So, please be nice and restrain from including them.
There are five settings you can use to affect tool's behaviour. All of them are disabled by default.
Update breadcrumb links to HTTPS will transform your old link URLs from HTTP to HTTPS. (Your site is sure HTTPS by now, isn't it?) This is safe to set just in case, to catch any stray links which are still HTTP.
Of course, do not activate this option if your site isn't HTTPS yet.
The setting only makes sense, and has effect, for absolute URLs (those which start with http://).
Generate link to current page. If you are like me, your last breadcrumb in the trail aiming at the current page isn't styled as a link. After all, it doesn't make much sense to provide a link to the page the visitor is already on!
There are, however, some reasons for using the link. For one thing, when placed at the bottom of the page, the link could double as the back-to-top shortcut. This could be of use to humans, too.
Then, as mentioned — and illustrated — above, Google ignores unlinked breadcrumb items when presenting its search results.
Third, more often than not, plain text is styled and displays differently from links.
If any of this bothers you, you can select the option to generate a link to top of the current page in a breadcrumb where there is none. Setting it will make no difference for breadcrumbs already in use as links.
Remove outer container element. You can opt for this choice if you had your navigation trail enclosed by another element which wasn't used for anything other than being that, a container, and you included it in your input.
According to the new schema definition, the breadcrumb list will appear as a single <ol> (ordered list) tag. This is a block element which can be styled on its own and doesn't need an extra container.
The option is also useful in case you had the breadcrumbs two levels below their "real" parent, e.g., inside a paragraph (for grouping) within a div (for styling). The paragraph will become redundant in the new scheme of things and can go.
If you don't include a container in your input, the option will have no effect.
Remove breadcrumb separators, when set, will result in a trail without white space between the items. This may sound strange at first but is, in fact, quite reasonable.
There is no need including the same piece of text over and over again, after every breadcrumb item, when all of them can be generated by a single CSS rule defined in one place.
My breadcrumbs are styled this way. The huge advantage is, you can change the separator character(s) on a whim within seconds to something completely different, for all breadcrumbs, at once.
Imagine having to do this on every page by hand!
Don't format output HTML will deliver transformed HTML in one long line, without breaks and added white space. This might be advisable when the simple formatting routine included in the utility doesn't live up to the task and delivers suboptimal results for your input. It will then be skipped during the process.
Just for the record and without delving into much detail, here's how the transformation algorithm works.
The tool isn't sophisticated enough to handle every possible input. It won't:
Here is an example of how to work with the utility to get the best out of it in the shortest time.
Most conversion failures can be remedied by correcting the input. For some issues mentioned above there is a clear path to success.
With breadcrumbs sitting inside a deep node structure, plain text items won't be identified and skipped during transformation.
— Make sure your input includes at most one enclosing element. Also, consider removing it during conversion.
Transform multiple breadcrumb trails for the same page one by one.
If the resulting breadcrumb trail looks OK on page but its markup seems incomplete — some missing closing tags at the bottom would be a hint — try to repeat the process without HTML formatting in the end.
— The formatting function is rather limited in its possibilities.
If your input doesn't change at all, look for these possible reasons:
If the output box is empty, something went wrong parsing your input. The markup might be malformed, or not conform to the data-vocabulary schema.
If you are at a loss, feel free to use the contact form or comments below for help.
If everything works for you, congratulations! Still, you need to provide a bit of style for your updated breadcrumbs.
The new schema uses ordered lists for its markup. Browsers usually present them one item per line, indented and preceded by a sequence number — this is what "ordered" and "list" imply after all.
Use the following to position the entire trail inline without either indentation or enumeration.
If you are used to working with containers to style their child elements, place your breadcrumb trail inside a div with a dedicated class:
Then style container contents:
If you decided to remove separators from the markup, include another rule to generate them after all trail items but the last one:
Test the rule by clicking the button and checking the effect on the last result. Modify if needed with your favourite character. (Depending on this, you may need to use its hexadecimal value.)
With the styling div around, the rule changes to
Unattributed images on this page are sourced from public domain via Pixabay.
Is it useful 👍? Awful 👎? Leave a message! Your comments help make this site better (and give me a kick—one way or another).