How to Add Breadcrumbs in Blogger for SEO

 No breadcrumbs = Google can't show rich snippets. You lose clicks + SEO juice.

In this tutorial, you'll add breadcrumb navigation with Schema markup to Blogger. Follow along and you'll get breadcrumb trails in Google search results in 2025.

Step 1: Why Breadcrumbs Boost Blogger SEO 2025

Breadcrumbs help users + Google understand site structure.

1. Rich snippets: Google shows Home > Category > Post in search results
2. Higher CTR: Breadcrumb trails get 15-20% more clicks than plain URLs
3. Lower bounce rate: Users click breadcrumb to explore category instead of leaving
4. Crawl depth: Internal links help Google index old posts faster

Image: Google search result showing breadcrumb trail instead of URL

Step 2: Add Breadcrumbs with Schema to Blogger

This code adds visual breadcrumbs + JSON-LD Schema for Google.

1. Blogger → Theme → Edit HTML → Ctrl+F → Search <div class='post-header'> or <h1 class='post-title'>
2. Paste this code ABOVE that line:

<b:if cond='data:blog.pageType == "item"'>
<style>
.breadcrumbs {
font-size: 13px; margin: 15px 0; color: #5f6368;
}
.breadcrumbs a {color: #1a73e8; text-decoration: none;}
.breadcrumbs a:hover {text-decoration: underline;}
.breadcrumbs span {margin: 0 5px;}
</style>

<div class='breadcrumbs'>
<a expr:href='data:blog.homepageUrl'>Home</a>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == "true"'>
<span>&raquo;</span>
<a expr:href='data:label.url'><data:label.name/></a>
</b:if>
</b:loop>
<span>&raquo;</span>
<data:post.title/>
</div>

<script type='application/ld+json'>
{
"@context": "https://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [{
"@type": "ListItem",
"position": 1,
"name": "Home",
"item": "<data:blog.homepageUrl.canonical/>"
}<b:loop values='data:post.labels' var='label' index='i'>
<b:if cond='data:label.isLast == "true"'>,{
"@type": "ListItem",
"position": 2,
"name": "<data:label.name/>",
"item": "<data:label.url.canonical/>"
}</b:if>
</b:loop>,{
"@type": "ListItem",
"position": 3,
"name": "<data:post.title/>"
}]
}
</script>
</b:if>

Step 3: Breadcrumb Placement Best Practices

Location	SEO Value	User Benefit
Above post title	High - Google sees it first	Users know where they are instantly
Below header, above content	Medium	Doesn't push content down
In footer	Low - Google may ignore	Users rarely scroll to footer
Multiple locations	Bad - Duplicate content	Confusing UX

Step 4: Fix Breadcrumbs for Homepage + Labels Pages

Only show breadcrumbs on posts, not homepage or label pages.

1. Already handled: Code uses <b:if cond='data:blog.pageType == "item"'> so only shows on posts
2. Label pages: To add breadcrumbs to label pages, use this code in Theme:

<b:if cond='data:blog.pageType == "index" AND data:blog.searchLabel'>
<div class='breadcrumbs'>
<a href='/'>Home</a> <span>&raquo;</span> <data:blog.pageName/>
</div>
</b:if>

Step 5: Test Breadcrumbs + Rich Snippet Validation

1. Visual test: Open post → See Home » Label » Post Title above post
2. Schema test: search.google.com/test/rich-results → Enter post URL → Must show "Breadcrumb" detected
3. Mobile test: Check breadcrumbs don't wrap to 3 lines on phone
4. Click test: Click label in breadcrumb → Must go to label page
5. Search Console: Enhancements → Breadcrumbs → Check for errors after 1 week

Bad practice to avoid: Showing 5+ labels in breadcrumb. Pick only 1 main label. Google uses last label in array.

Important: Breadcrumbs need posts to have labels. No label = breadcrumb shows only Home » Post Title. Add 1 main label to every post. Rich snippets take 2-4 weeks to appear in Google. Don't delete breadcrumb code after seeing results - Google rechecks monthly.