Add Breadcrumb Links to your Blog’s SERP Snippet – A Quick Guide

Rich snippets within the search results can help to increase click-through rates and also make users aware of other content from your website. We have heard loads over the past year or so about Google+ authorship within your search engine snippet, but one extra feature that I rarely hear mentioned is the use of breadcrumb navigation links.

SERP snippet with breadcrumb navigation links

In the image above you can see an article that I recently wrote appear in the SERPs. I have highlighted the breadcrumb link that goes to the Technical SEO category section of the Wow Internet blog. This can be really handy toward getting more of your content in front of users and also makes for a better user experience in general. To actually implement this into your SERP snippet couldn’t be easier!

Adding Breadcrumb Link Code to Your Blog

There are a few different mark-up languages that allow you to link up your website breadcrumb links to your search engine snippet. In this example I am going to use RFDa code. Don’t worry if you’re not particularly code-savvy because I have also made a quick video for WordPress users so that you don’t need to get your hands dirty with the technical stuff!

website breadcrumb links

Like you will see at the top of this page, there are some breadcrumb links that show the article is within the ‘SEO Articles’ top-level category and it has been filed under the ‘Technical SEO Articles’ child category. Below is the code used for these breadcrumb links:

<p id="breadcrumbs">
<span xmlns:v="http://rdf.data-vocabulary.org/#">
<span typeof="v:Breadcrumb">
<a href="http://www.wowinternet.co.uk/blog" rel="v:url" property="v:title">Blog Home</a>
</span> 
> 
<span typeof="v:Breadcrumb">
<a href="http://www.wowinternet.co.uk/blog/category/seo/" rel="v:url" property="v:title">SEO Articles</a>
</span>
> 
<span typeof="v:Breadcrumb">
<a href="http://www.wowinternet.co.uk/blog/category/seo/technical-seo/" rel="v:url" property="v:title">Technical SEO Articles</a>
</span> 
> 
<span typeof="v:Breadcrumb">
<span class="breadcrumb_last" property="v:title">SERP Rank Tracking Tools and Expert Opinions</span>
</span>
</span>
</p>

The typeof=”v:Breadcrumb” tag lets the search engines know that the data you are marking up is a breadcrumb, then by using the property=”v:title” attribute you are able to label the title of the breadcrumb (for example, ‘Technical SEO Articles’). Finally, the rel=”v:url” links the actual URL of the breadcrumb category page to the breadcrumb title.

If you want a bit more information on RDFa code then give this Google Webmaster help article a quick read. For more information and examples of breadcrumb code, take a look at this Bing Webmaster help article.

Adding Breadcrumbs to your WordPress Blog – The Easy Way

If you don’t fancy trying to figure out how to make this code fit for your website, take a look at this 5 minute video I have made that shows you how to do this within WordPress with a minimal amount of interaction with technical code.


Download | YouTube Converter | Replay Media Catcher

Seem easy enough? Then get it sorted out on your blog now!

Wow Internet is a digital marketing agency based in Birmingham, England - we provide search engine optimisation, web design, conversion rate optimisation and social media marketing.
  • http://twitter.com/victorpan victorpan

    Thanks Matt for bringing this to my attention. Any cool studies on CTR before and after?

    • http://www.matthewbarby.com/ Matthew Barby

      No problem, Victor. I spoke with Trey Collier of VIMATA Interactive and he has found around a 5-7% increase in CTR through using breadcrumb links. Will see if I can do a better test and will post the results here.

  • http://twitter.com/ScullyMark Mark Scully

    This is great- Cheers Matt

    • http://www.matthewbarby.com/ Matthew Barby

      No problem, Mark. Glad that it has helped you out.

TOP