HTML5

How To Get Breadcrumbs In Search Results

If you are ranking well in the search engines but still aren't seeing the amount of traffic you should be from the search results then you need to think about improving your click through rate. There are a few things you can do to improve your click through rate traditionally you can improve your title tags or provide a better meta description.

Recently Google have released a couple of features that will also help with your click through rate. You can now place your Google plus profile picture in the search results by linking your content to your Google plus account with Google authorship.

By changing your HTML you can also add a feature called rich snippets and place schema.org in your HTML, this is allow you to place more information in your search results. Schema.org allows you to define the information on the page there are many different types such as:

  • Movies
  • Books
  • Recipes
  • Video
  • Audio
  • Events
  • Organisation
  • Person
  • Place
  • Review

There are lots more types you can define the page to be, here is the full list.

Full Schema.org Types

In this tutorial we are going to look at a schema.org feature that will improve click through rates not only to the posts people are searching for but the posts parent pages. Here we are looking at the Breadcrumb feature in schema.org which allows you to display the parents page in the search results.

Have you ever searched for something and seen the search results with a category breadcrumb like the following.

hotels london - Google Search

Breadcrumb

The breadcrumb is a feature of the WebPage item type it allows you to define a number of links for search engines to understand the hierarchy structure of the web page.

First you need to start off with adding itemscope into the body tag of your web page, then you will need to define this as a web page by using the itemtype attribute.

To define the area of the page that is the breadcrumbs you need to create a HTML element around the navigation links by using a div or the nav element, then add a itemprop attribute of breadcrumb.

Search engines will then search for anchor tags inside the breadcrumb property and will place these as breadcrumb links in the search engines.

<body itemscope itemtype="http://schema.org/WebPage">
...
<div itemprop="breadcrumb">
  <a href="category/books.html" itemprop="url">Books</a> >
  <a href="category/books-literature.html" itemprop="url">Literature & Fiction</a> >
  <a href="category/books-classics" itemprop="url">Classics</a>
</div>

When this code is placed in your HTML you just have to wait for Google to index this and display it in the search results. To check that what you have done is valid for the breadcrumb feature you can use the Google rich snippet testing tool.

Test Rich Snippets

Back to top ^

Join Paulund

  • Get access to 100s of premium tutorials and downloadable content
  • Members content consists of Premium WordPress plugins, CSS packages, jQuery packages, tutorial demo files and templates for 100s of web development tutorials
  • In-depth development tutorials
  • Priority tutorial requests
  • Priority email development support
  • No ads

Here at Paulund you'll find Web Development tutorials and snippets focusing mainly on PHP, WordPress and CSS. Members will get access to premium tutorials that go into more detail about development with these languages. You will also get access to downloadable premium content based on the tutorial.

Join Paulund

Leave a Reply

Your email address will not be published. Required fields are marked *