Breadcrumbs = links at top of post like Home > SEO > This Post. Google loves them. Users stay longer.
In this tutorial, you'll add breadcrumb navigation to Blogger. Follow along and you'll improve SEO + reduce bounce rate in 10 minutes.
Step 1: What Are Breadcrumbs & Why Add Them
Breadcrumbs show users where they are on your blog. Example: Home > SEO > How to Write SEO Post
- SEO benefit: Google shows breadcrumbs in search results = higher CTR
- User benefit: Visitors navigate back to categories easily = lower bounce rate
- AdSense benefit: More pageviews per session = more ad income
Image: Breadcrumb showing in Google search results
Step 2: Backup Theme Before Adding Code
One wrong code breaks layout. Backup first.
- Blogger → Theme → Click 3 dots → Backup → Download
- Save file:
theme-backup-before-breadcrumbs.xml - If error happens, upload this file to restore
Image: Backup theme button in Blogger
Step 3: Add Breadcrumb HTML Code to Theme
This works for Contempo, Soho, Notable, Emporio themes.
- Theme → Edit HTML → Click inside code → Ctrl+F → Search
<div class='post-body' - Paste this code ABOVE that line:
<b:if cond='data:blog.pageType == "item"'> <div class='breadcrumbs' itemscope='itemscope' itemtype='https://schema.org/BreadcrumbList'> <span itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'> <a expr:href='data:blog.homepageUrl' itemprop='item'><span itemprop='name'>Home</span></a> <meta content='1' itemprop='position'/> </span> › <b:loop values='data:post.labels' var='label'> <span itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'> <a expr:href='data:label.url' itemprop='item'><span itemprop='name'><data:label.name/></span></a> <meta content='2' itemprop='position'/> </span> › </b:loop> <span itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'> <span itemprop='name'><data:post.title/></span> <meta content='3' itemprop='position'/> </span> </div> </b:if>
Step 4: Add Breadcrumb CSS for Styling
- Still in Edit HTML → Ctrl+F → Search
]]></b:skin> - Paste this code ABOVE that line:
.breadcrumbs {
font-size: 14px;
margin: 10px 0 20px 0;
padding: 10px;
background: #f9f9f9;
border-left: 3px solid #1a73e8;
}
.breadcrumbs a {
color: #1a73e8;
text-decoration: none;
}
.breadcrumbs a:hover {
text-decoration: underline;
}
- Click "Save theme"
Image: Breadcrumbs showing above blog post title
Step 5: Test Breadcrumbs + SEO Rules 2025
| Test | How | Pass If |
| Visual Check | Open any post | See Home > Label > Post Title |
| Mobile Check | View on phone | Not cut off, clickable |
| Schema Check | search.google.com/test/rich-results | Shows "Breadcrumbs detected" |
| Click Test | Click label in breadcrumb | Opens label page |
Bad practice to avoid: Adding breadcrumbs to homepage. Only show on posts. Homepage doesn’t need Home > Home.
Important: Breadcrumbs use post Labels. No labels = only shows Home > Post Title. Add 1 main label to every post for best SEO. Google takes 1-2 weeks to show breadcrumbs in search results.
0 Comments