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.


<a href="">Dresses</a> › 
<a href="">Real Dresses</a> › 
<a href="">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="">
  <a href="" itemprop="url">
    <span itemprop="title">Dresses</span>
  </a> ›
<div itemscope itemtype="">
  <a href="" itemprop="url">
    <span itemprop="title">Real Dresses</span>
  </a> ›
<div itemscope itemtype="">
  <a href="" itemprop="url">
    <span itemprop="title">Real Green Dresses</span>

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.



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.


  • 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?
Liked the article?

sharing is a great way to say thank you: