2 How to Install Breadcrumb on Blogger

Breadcrumb is an important element that should be installed on every blog or website, including the Blogger platform (Blogspot). Before discussing how to install it, let's get to know this "bread trail" first.

1. What is a Breadcrumb?

Have you ever heard of a fairy tale of a child where the main character is kidnapped and then he sprinkles bread crumbs so that his tracks can be found by others? YES! There he is! As it literally means (bread trail), breadcrumbs serve as directions that let visitors know where they are currently when opening a blog, website, or document.

The contents are in the form of links that are structured hierarchically starting from the main page, category, to the page currently being opened. An example of a typical breadcrumb implementation looks like this:

Home › Blogger › Tutorial › Artikel Saat Ini

Each of these is an active link (except for the last one) which serves as a trail for visitors, which when clicked will quickly take you to the previous page.

2. Is Breadcrumb Important?

Yes, of course this is important because it relates to SEO and data structures. He makes blogs have clear navigation and are easier to read on Google's search page (SERP). Visitors can easily see labels or categories that are the parent of the article.

3. Check Breadcrumb on the Template

After acquaintances, now is the time for us to put the breadcrumbs into the Blogger template. Please note, at this time almost all templates have added a breadcrumb by the maker. I myself always insert it into all Blogger templates that I make, both free and premium. But still, you have to be vigilant, who knows it doesn't exist yet.

To check, just use the Google Structured Data Testing Tool which can be accessed at the following address:

https://search.google.com/structured-data/testing-tool

1. Enter the post address into the column provided. Remember, the post page, not the homepage.
2. The breadcrumb structure is marked with a name BreadcrumbList. If installed correctly it will show the writing0 ERRORS, 0 WARNING.
3. If BreadcrumbList clicked will show more info regarding itemListElementwhich number must be the same as the number of labels embedded in the article plus 1 homepage URL. For example my article, it has 2 labels, namely Templateand Video. Then the number of items should be 3, as shown below.

BreadcrumbList count = number of labels + 1

4. How to Install a Breadcrumb

Does your template already have a breadcrumb and no errors? So congratulations, you don't need to be tired reading this tutorial. Stop and close this article because there is nothing to fix. But if it doesn't exist, or if there is, but still shows an error message, please read and follow the tutorial on how to install SEO friendly breadcrum on Blogspot until it's gone.

Breadcrumbs can be installed via 2 different methods, namely:

• HTML microdata
• JSON-LD

The igniel.com blog will cover them one by one for all of you.

4.1. HTML microdata

This is the most popular method commonly used by blog owners. Usually placed above the post title.

1. First add the following CSS code ABOVE </style>or ]]></b:skin>.
   

   /* Breadcrumb Blogger by igniel.com */
   .breadcrumb {
   margin-bottom: 20px;
   }
   .breadcrumb, .breadcrumb a, .breadcrumb a:hover {
   font-size: 12px; /* ukuran text */
   color: #777; /* warna text */
   }

2. Look for the following code:
   

   <h1 class='entry-title'>

   If it's not there, look for this code:
   

   <h2 class='entry-title'>

   Still not there? Anyway, look for HTML elements that have id or class entry-title.
3. Add this code just ABOVE the code mentioned earlier.
   

   <!-- Breadcrumb Blogger by igniel.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'> &amp;nbsp;&#8250;&amp;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/>
           &amp;nbsp;&#8250;&amp;nbsp; Tidak Ada Kategori
         </b:if>
       </div>
     </b:loop>
   </b:if>

4. Save all settings and see the results. You can also change its location as long as it is still within the scope of the article. The structure and code of each template is different, depending on the creator, so it is difficult to emulate it with a specific HTML id or class.

In the code above, I don't display the title of the post that is currently being opened because it's not really needed. All Google reads is a list of links from the homepage and labels.

PRO

• Serves as an additional variation that can enhance the page.
• Visitors can immediately return to the previous page quickly by clicking the link.

COUNTER

• For those who like a simple and minimalist design, the existence of an additional link above this title can sometimes be annoying.
• Longer steps when installing scripts.

4.2. JSON-LD

The second way is not done by many blog owners. Somehow, maybe because this method is less well known. Unlike the first method, JSON-LD will not appear in plain view because the script only works behind the scenes without displaying any visuals. Do you want to try a method that is not on the market? Come on, please follow how to install the following valid HTML5 Breadcrumb.

1. Look for this code first:
   

   <data:post.body/>

2. Add the following script BELOW the code mentioned earlier.

<!-- Breadcrumb Blogger by igniel.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>

PRO

• More efficient because there is no need to display any HTML on the blog page.
• Shorter script and easy to install.

COUNTER

• There are no active links that visitors can use to quickly return to the previous page.

Both have their respective advantages. It's just as good, you can choose which one you prefer because the results are the same in Google's eyes. As long as the installation method is correct and the data structure is valid, then it is SEO friendly.

5. Validation

After it's finished installing, check again so that you are sure that this breadcrumb is correct and valid. Return to using Google Structured Data as mentioned in step number 3 above.

After that, wait a few days and check on Google Search Console . If the breadcrumb is valid, then the report will appear there, precisely under the menuEnhacements. Make sure there are no errors.

How, do you understand all the steps to add Breadcrumb to Blogger above? Please comment if anything is unclear. Directly practice on each blog.

https://developers.google.com/search/docs/data-types/breadcrumb
https://schema.org/BreadcrumbList