Breadcrumbs trails are an excellent component of the overall web design that is meant to enhance the user’s capability to indicate the position of the web page in the category hierarchy. Having breadcrumbs integrated in the overall structure of the website is highly recommended by Google due to its user-centric characteristics.

The following is an example of breadcrumb trails:

Home › Vehicles › Cars › Hatchbacks › Mini Coopers

In order to have breadcrumb of a website displayed in search results, schema.org microdata must be merged to the HTML codes of the web pages.

After marking up breadcrumb information in the body of the webpage, Google uses it to display it in the SERPs (As shown in the example below).

Breadcrumbs are not only a useful feature for user’s while they browse the website, but also is a useful component displayed in the SERPs. Breadcrumbs provide the entire trail of the navigation path of the user while the website is browsed. It helps the user to indicate the page position in the hierarchy of the website. Although breadcrumbs are not meant to be overtly highlighted or visible, it still provides valuable information to the user with regards to the how many category pages has he/she has gone passed through.

Merge the following Schema.org Microdata anywhere in the head or body in order to Display Breadcrumbs on your website and in Google Search Results:
<ol itemscope itemtype=”http://schema.org/BreadcrumbList”>
<li itemprop=”itemListElement” itemscope
itemtype=”http://schema.org/ListItem”>
<a itemprop=”item” href=”https://example.com/Vehicles”>
<span itemprop=”name”>Vehicles</span></a>
<meta itemprop=”position” content=”1″ />
</li>

<li itemprop=”itemListElement” itemscope
itemtype=”http://schema.org/ListItem”>
<a itemprop=”item” href=”https://example.com/Vehicles/Cars”>
<span itemprop=”name”>Cars</span></a>
<meta itemprop=”position” content=”2″ />
</li>

<li itemprop=”itemListElement” itemscope
itemtype=”http://schema.org/ListItem”>
<a itemprop=”item” href=”https://example.com/Vehicles/Cars/Hatchback”>
<span itemprop=”name”>Hatchback</span></a>
<meta itemprop=”position” content=”3″ />
</li>
</ol>

 

Dealing with multiple breadcrumbs

Based on the structure of the website there can be more than one way of representing the position of the page in the website hierarchy.  A particular item can be a part of more than one category of the website. In this case, multiple categories do not need to be a part of the breadcrumb hierarchy of the website. However, it is recommended not to have a web page in too many categories of the website. Having an item in 2 or 3 categories of the hierarchy is acceptable and also encouraged by the Google. Matt Cutts–Former head of webspam team at Google has clearly mentioned in one of his videos that in case of multiple breadcrumbs, Google will pick the first one listed.

The Recommended Process of Using Breadcrumbs

  • A breadcrumb must start with the home page link and end with the present page link.
  • A simple greater than sign is recommended to be used to separate the breadcrumbs fro0m each other.
  • It is also recommended that the breadcrumb doesn’t look overtly highlighted. However, every breadcrumb must be a clickable so as to ease the effort and time required while navigating the various categories of the website.
  • It is highly recommended that the breadcrumbs are placed above the H1 heading of the website. This would encourage the user to click the breadcrumbs and use them to navigate the website.