Latest news, food, business, travel, sport, Tips and Tricks...

Create Real BreadCrumb For Blogspot Blog With SEO

Breadcrumbs is a navigation menu that is usually above the title of a blog post or website. Usually in the form of a link starting at home or the main page followed by the label then the heading of the post that was opened. Breadcrumbs are quite important as a supporting factor for SEO on a blog because with breadcrumbs we can inform visitors about the category of articles on the blog.

Out there, so many tutorials to install a breadcrumb on Blogspot, Most Blogger has installed Breadcrumbs on their Blog, all based on Label. in other words, it only imitates so that the labels in the post look like breadcrumbs. It does not hurt, but it looks a little strange because the label is automatically sorted by alphabet. For example, there are 2 posts, one of them has the label 'Recipe' and 'Pizza' and the other one has a post that has the label 'Recipe' and 'Sandwich ' Then the breadcrumb will look a little messy like "Pizza › Recipe" and another "Recipe › Sandwich". In fact, both of them should be in the section of Recipe.

Creating Blogger Breadcrumb with Microdata

When we surf on Google looking for something, we find a breadcrumb belonging to a website there. It is not there by accident, but because he installed structured data on his website with the type of Breadcrumbs. it can be installed in various formats, it can be with JSON + LD, Microdata, RFDa managed by which is founded by Google, Microsoft, Yahoo and Yandex.

We will use Microdata format for this breadcrumbs to avoid conflict with openGraph. We can get more information about Google how to get Breadcrumbs in Google Search by visiting Google Search help documentation.

Create Real BreadCrumb For Blogspot Blog With SEO

Our web pages can easily understand by a visitor, but search engines have a limited understanding of what is being discussed on the pages. Microdata gives labels to the individual content of an element. And then a search engine will highlight this element in their search engine, this means we help search engines and other applications to be better understand our content and display it in a useful, relevant way.

Below is the Source Code for creating breadcrumb with extra Microdata, is in Two Parts. The first code is The Caller and the other one is The Inclusion. Our breadcrumbs will look like:

Create Real BreadCrumb For Blogspot Blog With SEO

The difference between this breadcrumbs and breadcrumbs out there is when we enter the label search section, the breadcrumbs will still appear, and of course, our blog looks clean like a pro, because our breadcrumbs not sorted alphabetically, we can decide the position on our own.


<b:include name='blog-Bread'/>

Preparation To Installing a Breadcrumbs on Blogger

The RAW code above has a structure like this


[B] Drinks

  - [B1] Juice

  - [B1] Water

  - [B1] Milk

[B] Food 

  - [B1] Meat

       - [B2] Poultry

            - [B3] Chicken

                 - [B4] Drumstick

                 - [B4] Wings

            - [B3] Turkey

       - [B2] Red Meat

            - [B3] Goat

            - [B3] Lamb

            - [B3] Beef

This is an example of an organized label that has 4 level.

Our first job is to prepare to re-organize your Blog label. We got 'Drink' and 'Food' label in the Main List. Post with the label 'Juice', 'Water' and 'Milk' is in 'Drink' section, so the three must-have labels 'Drink' too. In the 'Food' label we have 'Meat' then divided to 'Poultry' and 'Red Meat', both must have label 'Meat' and 'Food' too. On the [B4] we have a post with label 'Drumstick' and 'Wings' both must have label 'Chicken', 'Poultry', 'Meat' and 'Food'. On [B2], each must have the label 'Red Meat', 'Meat' and 'Food'. In short, the child from the label must be given a label from the parent node.

The explanation of the code

We want to create a Breadcrumbs with Microdata markup look a little bit different from the sample at

<ul itemscope="" itemtype="">

  <li itemprop="itemListElement" itemscope=""


    <a itemtype=""

       itemprop="item" href="">

        <span itemprop="name">Books</span></a>

    <meta itemprop="position" content="1" />



The difference with is on the 'itemscope' part. Microdata accepts this format for itemscope:





Since our Blogger HTML Editor won't accept attribute without an equal sign (=) so we using itemprop="".

Now, we know what our goal is. After knowing what is Microdata and completed the preparation creating an ordered list of Blog label, now its time to explain the inclusion Code.

First Inclusion

The first inclusion is Wrapped with <b:includable> tag with id Blakbin-Bread.

- CSS Part

The code between <style> and </style> is the CSS code responsible for breadcrumbs looks. You can change the background color described in 'breadcrumb-wrapper' where the value is 'white', also you can change the color of the arrow in the 'breadcrumb-wrapper ul>li' where current color is 'silver'. Try to change it with Browser Inspector Tools. In @media part, we tell the browser to not displaying our breadcrumb if the visitor Screen is less or equal to 1024px with style 'display:none'

- Main Category

<div class='breadcrumb-wrapper'>

<b:with value='["Drink","Food"]' var='mainList'>

<b:loop index='i' values='data:posts limit 1' var='post'>

    <b:if cond='data:view.isPost or data:view.isLabelSearch and data:post.labels any (l => in data:mainList)'>

    <ul class='breadcrumb-list' itemscope='' itemtype=''>

        <li><a href='/'>Home</a></li>

        <b:loop values='data:post.labels where (l => in data:mainList)' var='blak'>

            <b:include data='{ label:, url: data:blak.url }' name='Blakbin-Crumb'/>

            <!-- Insert Condition To Switch Here -->







This is the main part of the label Category. With conditional statement <b:if> tag, designed to show only if the page is a post article page or Label page with Category matches with any of the 'mainList' where the mainList value is inside <b:with> tag, with Lambda Expression. In this list, we got "Drink" and "Food". If there is more,  we can add it with quotes and separate it with commas.

Notice the value in var='...' attribute, this value will be used as data:alias in their child. var='mainList' later be called data:mainList,and var='blak' to data:blak.

Well, the code looks thinner before we gave any conditional statement to switch value. We got two Label name as our Main Category, we can call we got two Case to Switch in here.

- Adding Child to the Parent nodes


<b:if cond=' !='>

<b:switch var=''>

  <b:case value='Drink'/>

      <!-- Content to Add -->

  <b:case value='Food'/>

      <!-- Content to Add -->



The <b:if> tag here give condition if  not equal do switch. Using <b:switch> tag we declare statement to switch to be processed, while the node name comes from and data:blak is the alias.


<b:case value='Drink'/>

    <b:with value='["Juice","Water","Milk"]' var='subList'>

    <b:loop values='data:post.labels where (l => in data:subList)' var='bin'>

        <b:include data='{ label:, url: data:bin.url }' name='Blakbin-Crumb'/>




<b:case value='Food'/>

    <b:with value='["Meat"]' var='subList'>

    <b:loop values='data:post.labels where (l => in data:subList)' var='bin'>

        <b:include data='{ label:, url: data:bin.url }' name='Blakbin-Crumb'/>

        <!-- Insert Condition To Switch Here -->



Between two case, the code looks similar before we adding a condition to switch in the 'Food' Case. The only difference is the value in the <b:with> tag value. This will tell the parser both Juice, Water, Milk and Meat at the same Position, we call [B1]. Until here, we have breadcrumbs structure like this

Home > Drink > Juice

Home > Drink > Water

Home > Drink > Milk

Home > Food > Meat

- Adding Sublist to Switch in the Food Case

<b:if cond=' !='>

<b:switch var=''>

<case value='Meat'/>

    <b:with value='["Poultry","Red Meat"]' var='subList'>

    <b:loop values='data:post.labels where (l => in data:subList)' var='bin2'>

        <b:include data='{ label:, url: data:bin2.url }' name='Blakbin-Crumb'/>

        <!-- Insert Condition To Switch Here -->





In the <b:switch> is telling what to switch, in this part, we want to switch for case 'Meat' which is value found in the parent node of the label name inside <b:with>.

On the <b:loop> here we got variable named 'bin2', he will hold the label name found in <b:with> tag with variable name subList, in this case is 'Poultry', and 'Red Meat'.

The <b:include> tag here will forward two data, label name and label url to the next inclusion with id Blakbin-Crumb. Since variable name in the loop is bin2, so we write and data:bin2.url.

For another child case, it will be the same structure. The key is we set a conditional tag to switch before the </b:loop> end. If you follow, the switch will have the form like this:

<b:if cond='what condition?'>

<b:switch var='which data?'>

  <case value='what case?'/>

    <b:with value='["with this","this","and this"]' var='foo'>

      <b:loop values='grab label name match with var foo' var='bar'>

        <b:include data='this data label and url forward to' name='baz'/>

        <!-- codition to switch here -->





Second Inclusion

The second inclusion is Wrapped with <b:includable> tag with id Blakbin-Crumb.

<b:includable id='Blakbin-Crumb'>

    <li class='Blakbin-Crumb' itemprop="itemListElement" itemscope='' itemtype=''>

      <a expr:href='data:url' itemtype="" itemprop="item">

        <span itemprop='name'><data:label/></span>


    <b:if cond='data:label =='>

      <meta expr:content='data:i +1' itemprop='position'/>

    <b:elseif cond='data:label =='/>

      <meta expr:content='data:i +2' itemprop='position'/>

    <b:elseif cond='data:label =='/>

      <meta expr:content='data:i +3' itemprop='position'/>

    <b:elseif cond='data:label =='/>

      <meta expr:content='data:i +4' itemprop='position'/>

    <b:elseif cond='data:label =='/>

      <meta expr:content='data:i +5' itemprop='position'/>




This inclusion accept data:label and data:url forwarded from <b:include> tag in the first inclusion, they will be processed here to generate Label Name and URL and give <meta> tag for positioning used in Microdata markup.

Look at <b:if> tag, they are data:i +Number. This is a method of giving a number on each label. Because the <b:loop> we get index named 'i' they will give a number on each item in the loop starting from 0,  while the Microdata schema markup starts counting items from 1.

<b:elseif cond='data:label == data:bin[*].name'/>

   <meta expr:content='data:i +*' itemprop='position'/>

This example is only show structured data with maximum 4 level, if there is more or less, we can add the new statement or remove like above code, while * is the number.

How to Install Breadcrumbs to Blogger Blogspot Blog.

To install those code is very easy.

1. In the Blogger Dashboard, click on 'Theme' 

2. Click on 'Edit HTML' button. 

3. Click on 'Jump to Widget' and choose 'Blog1'

4. Expand the <b:includable id='main'>⋯</b:includable> by clicking on the three dots.

Create Real BreadCrumb For Blogspot Blog With SEO

5. Once expanded, click on the end of the <b:includable id='main'> and press 'Enter' to create a new line.

Create Real BreadCrumb For Blogspot Blog With SEO

6. Copy and paste the Caller code on that new line.

Create Real BreadCrumb For Blogspot Blog With SEO

7. On the end of the line <b:widget-settings>⋯</b:widget-settings> press 'Enter' to create new line.'

Create Real BreadCrumb For Blogspot Blog With SEO

8. Now copy and paste the Inclusion Code.

Create Real BreadCrumb For Blogspot Blog With SEO

9. When collapsing, now our Blog code will look like below pictures.

10. Save template.

11. Check our Blog data Structure with Google Structured Data Testing Tools