A set of breadcrumbs is a set of links that follow the user’s path, usually from the homepage to the currently viewed page, in order for the user to see at a glance where they are within the site as a whole, so they can understand the structure of the site and navigate to any given ‘parent page’.
The term breadcrumbs in this context originates from the fairy tale ‘Hansel and Gretel’, who leave a trail of breadcrumbs to find their way back to their house after going into the woods. Most breadcrumbs consist of a single path (one line of links) from the homepage to the current page; however some sites have multi-line breadcrumbs to show various paths that the user may have taken to navigate from the homepage to the current page.
Breadcrumbs in search results
Breadcrumbs are sometimes displayed in search results in place of the full url, and in order to achieve this a website generally uses HTML5 Microdata to markup their breadcrumbs for Google to understand them clearly. Common ‘vocabularies’ (dictionaries of permitted HTML attributes and values) for breadcrumb microdata include Schema.org and Google’s own vocabulary. There are also other similar technologies for marking up breadcrumbs – popular ones include RDFa (which is a kind of microdata) and JSON-LD (which is powered by JSON, a JavaScript based data storage method).
Including the homepage in breadcrumb lines
Most webmasters prefer to start each breadcrumb line with a link to the homepage for maximum clarity, while many other webmasters omit the link to the homepage in order to simplify the information displayed or to follow the code examples provided by Google, Schema.org, etc (whereas homepage links within breadcrumbs should be coded differently to standard page links). This lack of consistency leads to many sites showing an extra link to ‘Home’ in search results, as if Home is a directory within their site! You may have seen this a lot as it’s a very common mistake that many high profile sites are caught doing.
Breadcrumb coding
Breadcrumbs are also coded in various ways, sometimes as part of a simple <p> or <div> with inline anchors, and sometimes as <ul> or <ol> lists. Best practice also dictates that, however your breadcrumbs are marked up, they should be wrapped in a HTML5 <nav> tag too, to clarify that they are a form of navigation menu system.
Example of breadcrumbs
In this example, the page you are currently on (Breadcrumbs) is unlinked for prominence but is still displayed within the hierarchy of the site structure.