2 Ways to add Breadcrumbs on Blogger (Updated)

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.

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.

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 BreadcrumbList. If 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 Video. Then the number of items should be 3, as shown below.

]]></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.

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.

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 menu enhancements. Make 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.