Breadcrumbs

SEO for your site navigation

Last Update:

Breadcrumbs help your visitors to navigate on your site. Build as html links they refer to your hierarchical site depth by showing assigned categories/tags/parent pages.

breadcrumbs seo

Breadcrumb HTML example:

<a href="http://www.example.com/dresses">Dresses</a> › 
<a href="http://www.example.com/dresses/real">Real Dresses</a> › 
<a href="http://www.example.com/dresses/real/green">Real Green Dresses</a>

By using css it’s mostly used as a horizontal navigation bar.

To optimize it for searchengines and clearly define it as a breadcrumb navigation add microdata. The links above will then be transformed to this:

<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
  <a href="http://www.example.com/dresses" itemprop="url">
    <span itemprop="title">Dresses</span>
  </a> ›
</div>  
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
  <a href="http://www.example.com/dresses/real" itemprop="url">
    <span itemprop="title">Real Dresses</span>
  </a> ›
</div>  
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
  <a href="http://www.example.com/clothes/dresses/real/green" itemprop="url">
    <span itemprop="title">Real Green Dresses</span>
  </a>
</div>

Follow this setup exactly and test it with Google Rich Snippet tool

The breadcrumb will then show up for your search results and enhance your listing.

microdata preview example

Should I wrap the breadcrumbs in h1 tags?

This might be a great idea as the links are highly related to the page. However it is not recommended to do this:

  • headline tags should used for their purpose: headlines. Breadcrumbs are used to navigate.
  • Your page normally already has a h1 headline.
  • It makes more sense to put the last item (here: Real Green Dresses) in bold tags
  • It may be overoptimization
  • If you put the whole breadcrumb into h1 tags google would expect ‘dresses’, ‘real dresses’ and ‘real green dresses’ and if your first item is a homepage link that’ll also dilute your content focus.

Breadcrumbs Checklist

  • Use breadcrumbs to improve usability.
  • Are the breadcrumbs shown on EVERY page?
  • Does it start with a link to your homepage?
  • Use CSS to give it a custom style
  • They are expected to be placed horizontally below your main navigation on the left, above your main content
  • Are you using microdata format and does it validate?
  • Does the hierarchical structure makes sense helping your visitors?