How to Add Advanced Breadcrumbs in Blogger for SEO - 2026 Guide

 

Breadcrumbs = Home > Blogger > Post #162 = helps Google + users navigate your 160+ posts. Default Blogger no breadcrumbs. Need schema for rich results Post #129.

In Post #162, advanced breadcrumbs.

Step 1: Add Breadcrumb HTML Above Post Title

Theme → Edit HTML → Find <data:post.body/> → Just ABOVE it (or above post title <h1>) paste:

<b:if cond='data:view.isPost'>
<nav id="breadcrumb-nav" style="font-size:13px;margin:10px 0 15px;color:#6b7280;"></nav>
</b:if>

Step 2: Add Breadcrumb JS + Schema (Auto)

Paste before </body> - after Post #161 search code:

<script>
// Advanced Breadcrumbs + Schema - Post #162
document.addEventListener('DOMContentLoaded', function(){
  if(!document.querySelector('#breadcrumb-nav')) return;
  let nav = document.getElementById('breadcrumb-nav');
  let postTitle = document.querySelector('h1.post-title,.post-title')?.innerText || document.title.split('|')[0];
  let labels = [];
  // Get labels from Blogger data
  document.querySelectorAll('.post-labels a, a[rel="tag"]').forEach(a=> labels.push({name: a.innerText.trim(), url: a.href}));
  let home = '<a href="/" style="color:#6b7280;text-decoration:none;">🏠 Home</a>';
  let sep = ' <span style="margin:0 6px;">›</span> ';
  let html = home;
  if(labels.length>0){
    html += sep + `<a href="${labels[0].url}" style="color:#6b7280;text-decoration:none;">${labels[0].name}</a>`;
  }
  html += sep + `<span style="color:#111;font-weight:600;">${postTitle.substring(0,50)}</span>`;
  nav.innerHTML = html;

  // Breadcrumb Schema for SEO - Post #129 type
  let schema = {
    "@context":"https://schema.org",
    "@type":"BreadcrumbList",
    "itemListElement":[
      {"@type":"ListItem","position":1,"name":"Home","item": location.origin + "/"},
      {"@type":"ListItem","position":2,"name": labels[0]?.name || "Blog","item": labels[0]?.url || location.origin},
      {"@type":"ListItem","position":3,"name": postTitle, "item": location.href}
    ]
  };
  let s = document.createElement('script');
  s.type='application/ld+json';
  s.textContent = JSON.stringify(schema);
  document.head.appendChild(s);
});
</script>

<style>
#breadcrumb-nav a:hover{color:#111!important;text-decoration:underline!important;}
.dark #breadcrumb-nav{color:#9ca3af!important;}
.dark #breadcrumb-nav a{color:#9ca3af!important;}
.dark #breadcrumb-nav span{color:#e5e7eb!important;}
</style>

Step 3: How It Works for Your 162 Posts

Page	Breadcrumb Shows
Post #150 Dark Mode	🏠 Home › Customization › How to Add Advanced...
Label page Blogger	No breadcrumb - only on posts (isPost condition)
Home page	No breadcrumb - clean

Step 4: Style Variants - Choose One

Style 1 Box (recommended):
Add to nav style: background:#f9fafb;padding:8px 14px;border-radius:20px;display:inline-block;border:1px solid #f3f4f6;

Style 2 Minimal:
font-size:12px;letter-spacing:0.5px;text-transform:uppercase;

Style 3 Arrow pills:
Each item background white + shadow - modern

Step 5: Test SEO Schema

1. Open any post Post #162 → View source → Search "BreadcrumbList" → Should see JSON-LD from script
2. Go to validator.schema.org → Paste post URL → Should show BreadcrumbList with 3 items - no errors
3. Google Search Console → Enhancements → Breadcrumbs → Should show 0 errors after 3 days
4. Google result: Your post will show Home › Label › Post title in search - CTR +15%

Step 6: Connect with Previous Posts

• Post #147 TOC: Breadcrumbs top, TOC after first para - don't clash
• Post #150 Dark Mode: Code includes dark mode CSS for breadcrumbs
• Post #161 Search: Breadcrumbs help when user comes from search result Post #161 live search

Post #162 Complete - breadcrumbs SEO added.

Next Post #163: How to Add Reading Progress Bar in Blogger.