BigCommerce Breadcrumbs Schema.org

Stand out with Breadcrumb links

A typical BigCommerce website is structured around categories, sub categories and products. BigCommerce can display a list of links at the top of these pages that help visitors navigate to the higher level pages in this category hierarchy. This set of links is called a Breadcrumb.

Google also likes to display breadcrumbs in its search results. This is as extra green links after the domain name. Google tries to find these breadcrumb links on websites so they can use them. This example contains breadcrumbs indicating the category and subcategory pages related to a product.

Google Rich Snippet Breadcrumb

There are standard methods to officially indicate a breadcrumb on a page. Using these methods can greatly increase your chances of getting breadcrumbs in your results.

Note that this is an advanced task and should only be done by someone who is familiar with editing BigCommerce templates. I'd recommend you backup any file your about to edit.

I offer a BigCommerce SEO Tune-up Services which includes setting this up, plus many other activities.

The Semantic Standards

This article will show you how to add the Microdata method of semantic markup as documented by Google and Schema.org.

All the instructions relate to editing template files in the Design->Edit HTML/CSS section of the BigCommerce Admin.

Adding the Home Breadcrumbs

Support this work
I'd like to buy Tony a...

The following Panels have breadcrumb based links. Your template may vary so it is best to visually check for these Breadcrumb files.

  • Panels/AccountBreadcrumb.html
  • Panels/BrandBreadcrumb.html
  • Panels/Breadcrumb.html
  • Panels/CartBreadcrumb.html
  • Panels/CategoryBreadcrumb.html
  • Panels/CompareBreadcrumb.html
  • Panels/CreateAccountBreadcrumb.html
  • Panels/EditAccountBreadcrumb.html
  • Panels/ForgotPasswordBreadcrumb.html
  • Panels/GetNewPasswordBreadcrumb.html
  • Panels/LoginBreadcrumb.html
  • Panels/NewsBreadcrumb.html
  • Panels/NewsletterBreadcrumb.html
  • Panels/PageBreadcrumb.html
  • Panels/SitemapBreadcrumb.html

The code in each is not the same, so you need to inspect and edit each one carefully. I'll use AccountBreadcrumb.html as an example:

    <div class="Block Breadcrumb Moveable Panel" id="AccountBreadcrumb" itemprop="breadcrumb">
    <ul>
        <li itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a itemprop="url" href="%%GLOBAL_ShopPathNormal%%/"><span itemprop="title">%%LNG_Home%%</span></a></li>
        <li><a href="%%GLOBAL_ShopPath%%/account.php">%%LNG_YourAccount%%</a></li>
        <li>%%LNG_AddShippingAddress%%</li>
    </ul>
</div>
    

For each list item (li) that contains a link we want in the breadcrumb we add the highlighted code. The first bit says the li tag is a scope that contains a breadcrumb. Then the code in the link says that it contains the breadcrumbs URL. Then an extra span is added around the text to indicate it is the title of the Breadcrumb.

In this case we only have the Home page link as part of the breadcrumb trail which is the case for most of the panels. Marking up the Home page link like this tells Google which page is the start of the trail.

I also marked up the brand link in Panels/BrandBreadcrumb.html so that Brand name links can show up.

Adding the Category Breadcrumbs

The category breadcrumb links are defined in Snippets/BreadcrumbItem.html which need to be changed like this:

<li class="Breadcrumbitem" itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a itemprop="url" href="%%GLOBAL_CatTrailLink%%"><span itemprop="title">%%GLOBAL_CatTrailName%%</span></a></li>

Multiple Breadcrumbs

Some stores place products into multiple catergories, and that causes multiple breadcrumb trails to be shown. Due to limitations in the BigCommerce templates it is not possible to add the correct markup to deal with this situation. However, the following JavaScript can be added to the Panels/ProductBreadcrumb.html file to correct the code for Google:

<script type="text/javascript"> 
//<![CDATA[ 
$(function() { 
	$("#ProductBreadcrumb ul").each(function( index ) { 
		var breadcrumbList = $(this);
     	breadcrumbList.attr('itemprop','breadcrumb');
		breadcrumbList.attr('itemscope','');
		breadcrumbList.attr('itemtype','https://schema.org/BreadcrumbList');
		
		var position = 0;

		breadcrumbList.find( "li" ).each(function( index ) { 
			var itemListElement = $(this);
			
			var links = itemListElement.find( "a" );
			
			if (links.length != 0) {
				position++;
					   
				itemListElement.attr('itemprop','itemListElement');
				itemListElement.attr('itemscope','');
				itemListElement.attr('itemtype','https://schema.org/ListItem');

				itemListElement.append( '<meta itemprop="position" content="'+position+'" />' )

				links.each(function( index ) { 
					var item = $(this);
					item.attr('itemprop','item');

					item.find( "span" ).each(function( index ) { 
						var name = $(this);
						name.attr('itemprop','name');
					});
				});
			}
		});
	});
}); 
//]]> 
</script>

And that's it. You can test it using the Google Rich Snippet Tool.

Also test all the pages to check if they are still working as expected, then wait a few weeks to see if Google picks up on them and starts showing your breadcrumb links in its results.

Please provide feedback if you have any issues.