Breadcrumb

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".
 {jistoc} $title={Table of Contents}

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, 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 page (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 myself always insert it into all the Blogger templates I make, both free and premium. However, you still have to be vigilant, who knows that it doesn't exist yet.

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 post address into the column provided. Remember, the post page, not the homepage.
  2. The breadcrumb structure is marked with a name BreadcrumbListIf installed correctly, the display 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 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 breadcrum on Blogspot until it's gone.

Breadcrumbs can be installed through 2 different methods, namely:

  • HTML microdata
  • JSON-LD

xandertech.com.ng will discuss them one by one for 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 xandertech.com.ng */
.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 which have id or class entry-title.
    2. Add this code just ABOVE the code mentioned earlier.

  • <!-- Breadcrumb Blogger by xandertech.com.ng -->
    <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 is different, depending on the creator, so it's difficult to emulate it with a specific HTML id or class.

    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 variation 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 xandertech.com.ng -->
    <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 into the blog page.
    • Shorter script and easy to install.

    COUNTER

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

    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 Console . If the breadcrumb is valid, then the report will appear there, precisely under the menuEnhancementsMake 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.

    Xander | Author

      Get our latest blog updates in your inbox

      Post a Comment

      -Advertisement-

      - Sponsored-

      -Advertisement-

      Recent Posts