How to get Breadcrumbs in your Search Results

Having your pages display in Search Engine Results Pages (SERPs) in a breadcrumb format can greatly improve the clarity of your results. This is especially true if your pages are highly categorised. I recently did so for this blog, here is an example result from Google:

Search result entry for this blog before implementing breadcrumbs.Search result entry for this blog after implementing breadcrumbs

This is a very simple example but you can imagine how much clearer a search result would become if you started with a URL with a large number of categories.

Vegetable Calzone
www.darrenskitchen.com/recipes/pizza/calzone/vegetable-calzone

Vegetable Calzone
www.darrenskitchen.com > recipes > pizza > calzone

Implementing BreadcrumbList

By implementing schema.org BreadcrumbList we can hint to search engines that we would like a page to appear in SERPs in a breadcrumb format.

<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [{
    "@type": "ListItem",
    "position": "1",
    "item": {
      "@id": "https://www.darrenlester.com",
      "name": "www.darrenlester.com"
    }
  },{
    "@type": "ListItem",
    "position": "2",
    "item": {
      "@id": "https://www.darrenlester.com/blog",
      "name": "blog"
	}
  },{
    "@type": "ListItem",
    "position": "3",
    "item": {
      "@id": "https://www.darrenlester.com/blog/geostationary-satellite-animations",
      "name": "Geostationary Satellite Animations"
    }
  }]
}
</script>

First we declare our context and the type of BreadcrumbList and then specify itemListElement which is an array of ListItem type objects. Each ListItem represents a breadcrumb. The ListItem’s position properties specify the order of the items in the list.

That’s it! Breadcrumbs are very simple to implement but can make your search results much cleaner. It is a no-brainer to include them for highly categorised pages.

I chose to implement my breadcrumbs using JSON-LD but if you have existing HTML breadcrumb navigation on your pages then you could mark this up directly with Microdata. An example of this can be found at Google’s breadcrumbs documentation.