« Twitter Widget FixLumia 1020: The Top Smartphone Camera »

Breadcrumbs That Improve SEO

Published on 9 Aug 2013 at 11:28 pm.
Filed under Google,Informative,Search Engine Optimization.

Breadcrumbs help your customers navigate your website. Did you know that you can mark up the breadcrumbs to improve SEO?

Breadcrumbs are links that appear in the top of a website that let you navigate to parent pages. They remind users how they got to the page and give them another means to get back to those pages. An example of breadcrumbs would look like:

Home > Marvel Comics > Fantastic Four > Fantastic Four #48: The Coming of Galactus

And the HTML code would look like:

<a href="http://www.example.com/">Home</a> &gt;
<a href="http://www.example.com/marvel/">Marvel Comics</a> &gt;
<a href="http://www.example.com/fantastic-four/">Fantastic Four</a> &gt;
<a href="http://www.example.com/fantastic-four/58/">Fantastic Four #48: The Coming of Galactus</a>

In this example the last entry refers to a particular comic book. This comic’s parent is the series it comes from. This series’ parent is the company it comes from. The company’s parent is the site’s home page.

Those breadcrumbs links are easy for users to understand and easy to navigate. But to search engines these links are just links. By default there is no connection between the pages. By using structured data like microdata or RDFa search engines like Google may display the breadcrumbs in search results. These breadcrumbs are click-able links to other pages on your site!

Screenshot of breadcrumbs in Google search results.

Example of what breadcrumbs may look like in Google search results. The text in blue are links to different pages.

Neither microdata nor RDDa are better than the other from an SEO point of view. I prefer microdata because it feels more web-ish to me. The web community created it for themselves. RDFa is a mapping of the existing RDF data-model on to the web. Either one will get the job done. Don’t use both on the site.

I can confirm that this functionality exists. We used microdata markup for the custom web development work we’ve done for the Merkel Donohue Product Catalog. I have seen the breadcrumbs in Google results for their products.

Microdata Encoded Breadcrumbs

The new markup for the breadcrumbs would look like:

<span itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a itemprop="url" href="http://www.example.com/"><span itemprop="title">Home</span></a> &gt; </span>
<span itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a itemprop="url" href="http://www.example.com/marvel/"><span itemprop="title">Marvel Comics</span></a> &gt; </span>
<span itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a itemprop="url" href="http://www.example.com/fantastic-four/"><span itemprop="title">Fantastic Four</span></a> &gt; </span>
<span itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a itemprop="url" href="http://www.example.com/fantastic-four/58/"><span itemprop="title">Fantastic Four #48: The Coming of Galactus</span></a></span>

There are 3 major changes compared to the original code:

  1. A <span> tag with itemscope and itemtype="http://data-vocabulary.org/Breadcrumb" attributes surround each link.
  2. Each link now has an itemprop="url" attribute.
  3. Each link now surrounds a <span> tag with an itemprop="title" attribute.

This text is messy, but it’s fairly straight forward. There is one gotcha with this. You may need to update your CSS rules if you were styling the link text. The span inside of each link may change the color from what you had before.

RDDa Encoded Breadcrumbs

The new markup for the breadcrumbs would look like:

<span xmlns:v="http://rdf.data-vocabulary.org/#">
<span typeof="v:Breadcrumb"><a href="http://www.example.com/" rel="v:url" property="v:title">Home</a> &gt; </span>
<span typeof="v:Breadcrumb"><a href="http://www.example.com/marvel/" rel="v:url" property="v:title">Marvel Comics</a> &gt; </span>
<span typeof="v:Breadcrumb"><a href="http://www.example.com/fantastic-four/" rel="v:url" property="v:title">Fantastic Four</a> &gt; </span>
<span typeof="v:Breadcrumb"><a href="http://www.example.com/fantastic-four/58/" rel="v:url" property="v:title">Fantastic Four #48: The Coming of Galactus</a></span>
</span>

There are 3 major changes compared to the original code:

  1. A <span> tag a xmlns:v="http://rdf.data-vocabulary.org/#" attribute surrounds the entire block. This surrounding span tag is not necessary if you already have a tag that surrounds your breadcrumbs. Just add that xmlns attribute to the existing tag.
  2. A <span> tag a typeof="v:Breadcrumb" attribute surround each link.
  3. Each link now has rel="v:url" and property="v:title" attributes.

There is no CSS-related gotcha with this method. This may make it appealing to some. This method makes use of the rel attribute to define a relationship that feels like a hack. It’s technically legal code, it just doesn’t feel right to me.

The following post was originally published as Breadcrumbs That Improve SEO for Brand Builder Websites.

Comments are closed.