How to Add Breadcrumb With Structured Data in Blogger

Breadcrumb navigation enhances user experience and improves search engine compatibility for your Blogger site. By implementing structured data, search engines can display breadcrumbs instead of full URLs, making your blog more user-friendly and accessible.

Why Use Breadcrumbs?

• Improved Navigation: Breadcrumbs provide a clear path for users to understand their location within your blog.
• Enhanced SEO: Search engines can better interpret your site structure, leading to improved visibility in search results.
• Better User Experience: Users can easily navigate back to previous pages, reducing bounce rates.

Steps to Add Breadcrumbs in Blogger

Follow these steps to implement breadcrumb navigation on your Blogger site:

1. Access Your Blogger Template: Go to Blogger and select your blog. Navigate to Template and click on Edit HTML.
2. Locate the Template Code: Press CTRL + F to open the search function. Search for <b:includable id='main' var='top'>.
3. Insert the Breadcrumb Code: Replace the found line with the following code, just below it:

   <b:includable id='breadcrumb' var='posts'>
       <b:if cond='data:blog.homepageUrl != data:blog.url'>
           <b:if cond='data:blog.pageType == "static_page">
               <div class='breadcrumbs'>
                   <span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> » <span><data:blog.pageName/></span>
               </div>
           <b:else/>
           <b:if cond='data:blog.pageType == "item">
               <b:loop values='data:posts' var='post'>
                   <b:if cond='data:post.labels'>
                       <div class='breadcrumbs'>
                           <span itemscope itemtype='http://data-vocabulary.org/Breadcrumb'>
                               <a expr:href='data:blog.homepageUrl' itemprop='url'><span itemprop='title'>Home</span></a>
                           </span>
                           <b:loop values='data:post.labels' var='label'>
                               » <span itemscope itemtype='http://data-vocabulary.org/Breadcrumb'>
                                   <a expr:href='data:label.url' itemprop='url'><span itemprop='title'><data:label.name/></span></a>
                               </span>
                           </b:loop>
                           » <span><data:post.title/></span>
                       </div>
                   <b:else/>
                       <div class='breadcrumbs'>
                           <span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> » <span>Unlabelled</span> » <span><data:post.title/></span>
                       </div>
                   </b:if>
               </b:loop>
           <b:else/>
           <b:if cond='data:blog.pageType == "archive">
               <div class='breadcrumbs'>
                   <span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>Archive For <data:blog.pageName/></span>
               </div>
           <b:else/>
           <b:if cond='data:blog.pageType == "index">
               <div class='breadcrumbs'>
                   <b:if cond='data:blog.pageName == "">
                       <span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>All Posts</span>
                   <b:else/>
                       <span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>Posts under <data:blog.pageName/></span>
                   </b:if>
               </div>
           </b:if>
           </b:if>
           </b:if>
           </b:if>
           </b:if>
   </b:includable>
   <b:includable id='main' var='top'>
   <b:include data='posts' name='breadcrumb'/>
               

4. Add CSS for Styling: Just before the closing tag ]]></b:skin>, insert the CSS provided above.
5. Customize as Needed: Feel free to modify the CSS to match your blog’s design and style.

Recommended Article

Check out our article on Adding a Specific Code Syntax Highlighter for Blogger for more customization tips!

Need Help?

If you found this article helpful or have any issues implementing the breadcrumbs, feel free to leave a comment below!