Breadcrumb Trail for Better Search Engine Results

If you find this helpful, please click the Google Button to the left, if it is white, to make it turn blue or red. Thank you! (It also helps find this page again more easily.)

Breadcrumb Trail Microdata

Use microdata to create a breadcrumb trail for better search engine results.

A breadcrumb trail is a list of hypertext links (breadcrumbs) based on the hierarchical navigation of a web site. When the proper HTML microdata is added to these links, Google displays the breadcrumb trail in the search results, providing access to multiple pages on the site instead of just displaying the non-clickable URL:

Search Engine Results

HTML <a href> Tag

Description, syntax, usage, attributes and examples of the HTML <a href> tag.

www.html-5.com › › ›

Item type: http://data-vocabulary.org/Breadcrumb

Property		Description
title	required	the displayed text for the breadcrumb link
url	required	the target URL for when the breadcrumb is clicked on
child	optional	establishes the hierarchical organization of breadcrumbs when there is more than one breadcrumb trail on a page

Examples

Search Engine Friendly Breadcrumb Trail Example

<ul class="breadcrumb-trail">
   <li itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb">
      <a itemprop="url" rel="up up up" href="/index.html">
         <span itemprop="title">HTML 5</span>
      </a>
   </li>
   <li itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb">
      <a class="nobr" itemprop="url" rel="up up" href="/tags/index.html">
         <span itemprop="title">HTML Tags</span>
      </a>
   </li>
   <li itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb">
      <a itemprop="url" rel="up" href="./">
         <span itemprop="title">HTML <a href> Tag</span>
      </a>
   </li>
   <li itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb">
      <a itemprop="url" href="#examples#">
         <span itemprop="title">Examples</span>
      </a>
   </li>
</ul>

In this example, the breadcrumb list is implemented as an unordered list using a ul element with a list item for each breadcrumb link.

Multiple breadcrumb trails on the same page

<nav itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb">
   <a itemprop="url" rel="up up" href="/podcasts/">
      <span itemprop="title">Podcasts</span>
   </a>
   <span itemprop="child" itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb">
      <a itemprop="url" rel="up" href="/podcasts/video/">
         <span itemprop="title">Video Podcasts</span>
      </a>
      <span itemprop="child" itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb">
         <a itemprop="url" href="/categories/technology/my-tech-podcast.html">
            <span itemprop="title">My Tech Podcast</span>
         </a>
      </span>
   </span>
</nav>
<nav itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb">
   <a itemprop="url" rel="up up" href="/categories/">
      <span itemprop="title">Categories</span>
   </a>
   <span itemprop="child" itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb">
      <a itemprop="url" rel="up" href="/categories/technology/">
         <span itemprop="title">Technology</span>
      </a>
      <span itemprop="child" itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb">
         <a itemprop="url" href="/categories/technology/my-tech-podcast.html">
            <span itemprop="title">My Tech Podcast</span>
         </a>
      </span>
   </span>
</nav>

Valid HTML 5