how to create breadcrumbs in google search results

how to create breadcrumbs in google search results

Everyone wants to show their website in a different way in google search results. Today am going to show you how you can create Bread Crumbs in Google Search Results of your website.

Before we jump right into it, let’s get a brief knowledge about bread crumbs, bread crumbs are the split or navigation of your website which is rendered in the google search results.



Example of breadcrumbs 

example.com > products > product1

So here everything will be linked separately. Like for example if you click on example.com you will be redirected to example.com. If you click on products you will be redirected to products page of example.com same with product1, if you click on it. It will take you to a product1 page of example.com.

So What is a use of it / Why it is useful?

This type of navigation gives user or visitor a clear idea about your website links. Another advantage of having breadcrumbs within the search result is easy navigation. Also in one link position. It will show other links also. And also it looks more neat and clean in search results.

How to Setup breadcrumbs or Implementation?

You can implement breadcrumbs in 2-3 ways. The most simple way is HTML way. All you have to do is put a breadcrumb section on every page of your website. With links in it. Below is the sample code for HTML method to implement breadcrumbs.

Example of HTML Method

<html>
   <head>
   </head>
   <body>
     <!-- header ends -->
     <div class='breadcrumbs'>
        <ul>
          <li><a href='index.html'>Home</a></li>
          <li><a href='products.html'>Products</a></li>
          <li><a href='products/product-1.html'>Product 1</a></li>
        </ul>
     </div>
   </body>
</html>

Example of JSON-LD Method

<script type="application/ld+json">
{
 "@context": "http://schema.org",
 "@type": "BreadcrumbList",
 "itemListElement": [{
 "@type": "ListItem",
 "position": 1,
 "item": {
 "@id": "https://example.com/books",
 "name": "Books",
 "image": "http://example.com/images/icon-book.png"
 }
 },{
 "@type": "ListItem",
 "position": 2,
 "item": {
 "@id": "https://example.com/books/book1",
 "name": "Book 1",
 "image": "http://example.com/images/book1.png"
 }
 }]
}
</script>

The Above code needs to be present on every page where you need to show the breadcrumbs. Put this code in head tag of your HTML page.


Leave a Reply

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

Please wait...

Subscribe to our newsletter

Want to be notified when our article is published? Enter your email address and name below to be the first to know.