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 Schema.org 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.
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:
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.
THE CALLER
<b:include name='blog-Bread'/>
Preparation To Installing a Breadcrumbs on Blogger
The RAW code above has a structure like this
STRUCTURE
[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 Schema.org.
<ul itemscope="" itemtype="http://schema.org/BreadcrumbList">
<li itemprop="itemListElement" itemscope=""
itemtype="http://schema.org/ListItem">
<a itemtype="http://schema.org/Thing"
itemprop="item" href="https://example.com/books">
<span itemprop="name">Books</span></a>
<meta itemprop="position" content="1" />
</li>
</ul>
The difference with is on the 'itemscope' part. Microdata accepts this format for itemscope:
itemscope
itemscope=""
itemscope="itemscope"
itemscope=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 => l.name in data:mainList)'>
<ul class='breadcrumb-list' itemscope='' itemtype='http://schema.org/BreadcrumbList'>
<li><a href='/'>Home</a></li>
<b:loop values='data:post.labels where (l => l.name in data:mainList)' var='blak'>
<b:include data='{ label: data:blak.name, url: data:blak.url }' name='Blakbin-Crumb'/>
<!-- Insert Condition To Switch Here -->
</b:loop>
</ul>
</b:if>
</b:loop>
</b:with>
</div>
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
THE SWITCH STRUCTURE FOR TWO CASE
<b:if cond='data:view.search.label != data:blak.name'>
<b:switch var='data:blak.name'>
<b:case value='Drink'/>
<!-- Content to Add -->
<b:case value='Food'/>
<!-- Content to Add -->
</b:switch>
</b:if>
The <b:if> tag here give condition if not equal do switch. Using <b:switch> tag we declare statement to switch data:blak.name to be processed, while the node name comes from data:post.labels.name and data:blak is the alias.
THE CASE CONTENT FOR DRINK
<b:case value='Drink'/>
<b:with value='["Juice","Water","Milk"]' var='subList'>
<b:loop values='data:post.labels where (l => l.name in data:subList)' var='bin'>
<b:include data='{ label: data:bin.name, url: data:bin.url }' name='Blakbin-Crumb'/>
</b:loop>
</b:with>
THE CASE CONTENT FOR FOOD
<b:case value='Food'/>
<b:with value='["Meat"]' var='subList'>
<b:loop values='data:post.labels where (l => l.name in data:subList)' var='bin'>
<b:include data='{ label: data:bin.name, url: data:bin.url }' name='Blakbin-Crumb'/>
<!-- Insert Condition To Switch Here -->
</b:loop>
</b:with>
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='data:view.search.label != data:bin.name'>
<b:switch var='data:bin.name'>
<case value='Meat'/>
<b:with value='["Poultry","Red Meat"]' var='subList'>
<b:loop values='data:post.labels where (l => l.name in data:subList)' var='bin2'>
<b:include data='{ label: data:bin2.name, url: data:bin2.url }' name='Blakbin-Crumb'/>
<!-- Insert Condition To Switch Here -->
</b:loop>
</b:with>
</b:switch>
</b:if>
In the <b:switch> is telling what to switch, in this part, we want to switch data:bin.name 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 data:bin2.name 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 -->
</b:loop>
</b:with>
</b:switch>
</b:if>
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='http://schema.org/ListItem'>
<a expr:href='data:url' itemtype="http://schema.org/Thing" itemprop="item">
<span itemprop='name'><data:label/></span>
</a>
<b:if cond='data:label == data:blak.name'>
<meta expr:content='data:i +1' itemprop='position'/>
<b:elseif cond='data:label == data:bin.name'/>
<meta expr:content='data:i +2' itemprop='position'/>
<b:elseif cond='data:label == data:bin2.name'/>
<meta expr:content='data:i +3' itemprop='position'/>
<b:elseif cond='data:label == data:bin3.name'/>
<meta expr:content='data:i +4' itemprop='position'/>
<b:elseif cond='data:label == data:bin4.name'/>
<meta expr:content='data:i +5' itemprop='position'/>
</b:if>
</li>
</b:includable>
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 schema.org 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.
5. Once expanded, click on the end of the <b:includable id='main'> and press 'Enter' to create a new line.
6. Copy and paste the Caller code on that new line.
7. On the end of the line <b:widget-settings>⋯</b:widget-settings> press 'Enter' to create new line.'
8. Now copy and paste the Inclusion Code.
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
Blogger , Tips and Tricks
