Jannah themebebek mağazasıhttps://listewp.com/Kepez haberiqos tereaistanbul saç ekimiimplantizmir saç ekimiBest Seo Toolseskişehir emlakSu Arıtma

2 Ways to add Breadcrumbs on Blogger (Updated)

breadcrumbs navigation

Breadcrumb is one important element that should be installed on every blog or website, including the Blogger platform (Blogspot). Before discussing how to install it, let’s first get acquainted with this “trail of bread”.

1. What is Breadcrumb?

Have you ever heard of a children’s fairy tale where the main character is kidnapped and then he sprinkles breadcrumbs so that other people can find his tracks? YES! There he is! Like its literal meaning (treads of bread), breadcrumbs serve as directions that let visitors know where they are currently when opening a blog, website, or document.

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

Home › Blogger › Tutorial › Blogging Tips

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

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 easier to read on Google search pages (SERP). Visitors can easily see the label or category that is the parent of the article.

Breadcrumb



3. Check the Breadcrumb on the Template

After acquaintances, now is the time for us to put the breadcrumbs into the Blogger template. Please note, currently, almost all templates have added breadcrumbs by the creators. I always insert it into all the Blogger templates I make, both free and premium. However, you still have to be vigilant, who knows if it doesn’t exist yet.

Also Read:  How to create a Contact Us Form on Blogspot

To check, it is enough to use the Google Structured Data Testing Tool which can be accessed via the following address:

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

  1. Enter the postal address into the column provided. Remember, the posting page, not the homepage.
  2. The breadcrumb structure is marked with the name BreadcrumbListIf installed correctly, the display will show the writing0 ERRORS, 0 WARNING.
  3. If BreadcrumbList is 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, has 2 labels, namely Templateand VideoThen 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 breadcrumbs and nothing goes wrong? So congratulations, you don’t need to be tired of reading this tutorial. Stop and close this article because there is nothing more to manage. But if it doesn’t exist, or there is but still shows an error message, please read and follow the tutorial on how to install SEO-friendly breadcrumbs on Blogspot until it’s gone.

Breadcrumbs can be installed through 2 different methods, namely:

  • HTML microdata
  • JSON-LD

xanderblog.com will discuss them one by one with all of you.

4.1. HTML Microdata

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

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

]]></b:skin>.

/* Breadcrumb Blogger by xanderblog.com*/
.breadcrumb {
margin-bottom: 20px;
}
.breadcrumb, .breadcrumb a, .breadcrumb a:hover {
font-size: 12px; /* ukuran text */
color: #777; /* warna text */
}
  • Look for the following code:
    <h1 class='entry-title'>

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

    <h2 class='entry-title'>
    1. Still not there? Anyway look for HTML elements that have id or class entry-title.
    2. Add this code just ABOVE the code mentioned earlier.
  • <!-- Breadcrumb Blogger by xanderblog.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>
  1. Save all settings then see the result. 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 are different, depending on the creator, so it’s difficult to emulate it with a specific HTML id or class.
Also Read:  How To Install LazyLoad Google Analytics in Blogger

In the code above, I do not display the title of the currently opened post because it is not really needed. What Google reads is just a list of links from the homepage and labels.

PRO

  • Serves as an additional variable that can beautify the page.
  • Visitors can immediately return to the previous page quickly by clicking on the existing 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. I don’t know why, maybe because this method is less well-known. Unlike the first method, this JSON-LD will not appear to the naked eye because the script only works behind the scenes without displaying any visuals. Do you want to try an off-the-shelf method? Come on, please follow how to install valid HTML5 breadcrumbs below.

  1. Look for this code first:
<data:post.body/>
  • Add the following script BELOW the code mentioned earlier.
<!-- Breadcrumb Blogger by xanderblog.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 is easy to install.

COUNTER

  • There are no active links that visitors can use to return to the previous page quickly.
Also Read:  How to add Blue Tick In Blogger Comments

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

5. Validation

After installing, check again so that you are more sure that this breadcrumb is correct and valid. Go back to using Google Structured Data as mentioned in step number 3 above.

After that, wait a few days and check in Google Search ConsoleIf the breadcrumb is valid, then the report will appear there, precisely under the menu enhancementsMake sure there are no errors.



How, do you understand all the steps to add Breadcrumb for Blogger above? Please leave a comment if something is not clear. Immediately practice it on their respective blogs.

Subscribe Now

Get a variety of tutorial articles, interesting insights and tips about the online world directly through your email. Subscribe now and be successful with us!
I am Omotunmihse Temitope (Xander), A Digital Marketer, and Web Developer, A pro blogger who has a passion for blogging and has taken blogging as part of my daily activities.
hacklinkizmir escortonline escortizmir escortbodrum escortAntalya escortonwin girişHacklink satın albilecik escortbalıkesir escortIsparta escorthttps://escortonline.orgizmir escortankara escortkayseri escortçankaya escortkızılay escortetlik escort