Here’s How to Install Breadcrumbs on Seo Friendly Blogger Here’s How to Install Breadcrumbs on Seo Friendly Blogger. For beginners who have just plunged into the world of blogging or websites.

The information that we will share this time is very useful for your blog or website. So, without further ado, let’s look at the explanation and steps below.

Bacaan Lainnya

If you don’t know what breadcrumbs are?

Breadcrumbs are one of the important factors that should be installed on any blog or website to improve the SEO quality of your site. Here is a guide on how to install breadcrumbs on Blogger.

Then what is the function of breadcrumbs on a blog or website?

Breadcrumbs feature is a guide that can give your visitors an idea of ​​where they are when they read articles on your blog or website. Breadcrumb contains hierarchically structured links that start with a main page, a category, and end with a page where you are located when you read an article or article on your site.

If you ask, is breadcumb important for website SEO, the answer is very important!

This is because the breadcrumb menu of your blog or website determines how easy it is to read your pages in the Google search engine (Serp). Visitors can easily recognize article tags from the parent category to the root category.

So if you are curious about this Breadcumb feature, and want to try installing it on your blog or website. You can see the steps or how to do it below.

Here’s How to Install Breadcrumbs on Seo Friendly Blogger

  • Go to your Blogger > Edit HTML.
  • Then please look for this code ]]><b:skin> or </style>. add the code below right before the code above.
/* Breadcrumbs */
.breadcrumbs{padding:20px 30px;background:#fff;margin-bottom:20px}
.breadcrumbs a,.post-info a {color:#19abea;}
.breadcrumbs a:hover,.post-info a:hover {color:#454545;}
  • Then continue by looking for the code below.
<b:includable id='main' var='top'>...</b:includable>
  • Place the code below just below the code above.
<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType == "static_page"'>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag' title='Home'>Home</a></span> / <span><data:blog.pageName/></span></div>
<b:if cond='data:blog.pageType == "item"'>
<!-- Breadcrumb Untuk Halaman Pos -->
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs'>
Anda di sini : <span itemscope='' itemtype=''><a expr:href='data:blog.homepageUrl' itemprop='url' title='Home'><span itemprop='title'>Home</span></a></span>
<b:loop values='data:post.labels' var='label'>
/ <span itemscope='' itemtype=''><a expr:href='data:label.url + "?max-results=5"' expr:title='' itemprop='url'><span itemprop='title'><></span></a></span>
/ <span><data:post.title/></span>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag' title='Home'>Home</a></span> / <span>Without Label</span> / <span><data:post.title/></span></div>
<b:if cond='data:blog.pageType == "archive"'>
<!-- Breadcrumb Untuk Label Search dan Search Pages -->
<div class='breadcrumbs'>
<span><a expr:href='data:blog.homepageUrl' title='Home'>Home</a></span> / <span>Archived For <data:blog.pageName/></span>
<b:if cond='data:blog.pageType == "index"'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == ""'>
<span><a expr:href='data:blog.homepageUrl' title='Home'>Home</a></span> / <span>All Post</span>
<span><a expr:href='data:blog.homepageUrl' title='Home'>Home</a></span> / <span><data:blog.pageName/></span>
  • Then you save and see the results.

If you want to see, whether the Breadcumb menu that you installed is valid or not. You can see it simply by following the steps that we have also prepared below.

  • Open Google Testing Tools.
  • Enter your post address in the column provided “posting address is not homepage”.
  • The breadcrumb structure will be marked with the name BreadCrumbList if installed correctly it will display 0 errors and 0 warnings on the results of testing your site address.


Okay, friends of, that was our explanation about Breadcumb and how to install it on your Blog or Website. Hopefully the information and tips we share can help you all and be useful.

Thank You

Pos terkait

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *