Breadcrumb is very important to everyone, it should be installed on a website or a blog, whichever one. But what is a breadcrumb?
It is very obvious when we say breadcrumb we talk about the little part of a bread that falls off, yeah it like a trail, for instance, if you are going to a forest and you are scared of getting lost out there, there is a story that says you could literally put bread crumbs on the floor to find a way back or maybe you could probably leave a clue for someone else to find you.
These breadcrumbs let your visitors or your users know where they are currently are when they open a website or a blog, or maybe a document. All the content normally looks in the form of a link, starting from the home page then the next whatever, check the example below.
But is breadcrumbs really that important? Well, it is very important especially to SEO, cause they kind of related and also a data structure. It is easier to read on the Google search page (SRP) and it makes your blog have clear navigation.
Now you need to check your breadcrumb to make sure you don't have them already before installing it. The reason why I said you should check before installing is that some free and premium theme does come with breadcrumbs and some don't. So you have to be careful to know if it does exist or not.
If you are not sure, you can use these Google structure data tools to check:
https://search.google.com/structured-data/testing-tool
Step 1) Enter the post address into the space provided, make sure it's the posting page and not the home page.
Step 2) The breadcrumb structure is marked with a name called: BreadcrumbList. If this is installed in the correct way, you will see a 0 ERROR, 0 WARNING.
step 3) If you click the BreadcrumbList, it will show you more information regarding itemListElement which number must be the same as the number of labels that are being embedded in the article, plus one home page URL.
HOW TO INSTALL A BREADCRUMB
Before we get started, do your templates have this breadcrumb already? then you are good to go, you can skip this tutorial and check out other things on this website. If you have the breadcrumbs, but still having errors, the continue reading or else, you can exit!!
There are to ways you could possibly install this breadcrumbs, HTML microdata, and JSON-LD
HTML microdata
This kind of installation is well known by blog owners, and are normally placed above the title.
First thing to do is add the following CSS code ABOVE </style> or ]]></b:skin>
/* Breadcrumb Blogger by ayomidelalemi.com */
.breadcrumb {
margin-bottom: 20px;
}
.breadcrumb, .breadcrumb a, .breadcrumb a:hover {
font-size: 12px; /* ukuran text */
color: #777; /* warna text */
}
Now look for this code below
<h1 class='entry-title'>
If you can't find that, then look for this code below
<h2 class='entry-title'>
Still not there? anyways, look for any HTML element that has an entry-title.
Now add this code just ABOVE the code mentioned earlier.
<!-- Breadcrumb Blogger by ayomidelalemi.com -->
<b:if cond='data:view.isPost'>
<b:loop values='data:posts' var='post'>
<div class='breadcrumb' itemscope='itemscope' itemtype='https://schema.org/BreadcrumbList'>
<span itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'>
<a expr:href='data:blog.homepageUrl.canonical' title='Home' itemprop='item'>
<meta content='1' itemprop='position'/>
<span itemprop='name'>Home</span></a>
</span>
<b:if cond='data:post.labels'>
<b:loop index='num' values='data:post.labels' var='label'> &nbsp;›&nbsp;
<span itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'>
<meta expr:content='data:num+2' itemprop='position'/>
<a expr:href='data:label.url.canonical' expr:title='data:label.name' itemprop='item'>
<span itemprop='name'><data:label.name/></span>
</a>
</span>
</b:loop>
<b:else/>
&nbsp;›&nbsp; Tidak Ada Kategori
</b:if>
</div>
</b:loop>
</b:if>
Now save all your work, and you can also change the location, as long as it is still within the article.
just to let you know that the structure of each code of each template is different, which depends on the creator, so it kind of difficult to emulate it with a specific HTML class or id.
JSON-LD
Many people don't usually use this kind of method, but ill teach on how to just in case you need to use it or something. Unlike the first method, JSON-LD will not appear in plain view, because this kind of script only works behind the scene without displaying any visuals.
To get started, look for this code below
<data:post.body/>
Now add the following script below the code mentioned earlier
<!-- Breadcrumb Blogger by ayomidelalemi.com -->
<script type='application/ld+json'>{
"@context": "https://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [
{
"@type": "ListItem",
"position": 1,
"name": "Home",
"item": "<data:blog.homepageUrl.canonical/>"
<b:if cond='!data:post.labels'>}<b:else/>},<b:loop index='i' values='data:post.labels' var='label'>
{
"@type": "ListItem",
"position": <b:with value='data:i + 2' var='num'><b:eval expr='data:num'/></b:with>,
"name": "<data:label.name/>",
"item": "<data:label.url.canonical/>"
<b:if cond='data:post.labels.size != data:i + 1'>},<b:else/>}</b:if></b:loop></b:if>
]
}</script>
After you are done installing, make sure you check again that the breadcrumb is valid and correct. Then wait for a few days and check your Search console. Make sure they are no error.
