How To Add Breadcrumb With Structured Data In Blogger

Enhanced Blogger Breadcrumb Code (SEO-Optimized)

To improve your breadcrumb schema for better SEO, reach, and indexing, it's important to follow the latest Google structured data guidelines and make sure each breadcrumb item includes, Here's an enhanced version of your Blogger breadcrumb code using Schema.org BreadcrumbList with full microdata that Google can easily parse. <b:if cond='data:blog.pageType == "item" or data:blog.pageType == "static_page"'> <nav class="breadcrumb" aria-label="Breadcrumb" itemscope='itemscope' itemtype="http://schema.org/BreadcrumbList"> <span itemprop="itemListElement" itemscope='itemscope' itemtype="http://schema.org/ListItem"> <meta itemprop="position" content="1"/> <a itemprop="item" href="https://livepmtv.blogspot.com/"> <span itemprop="name">Home</span> </a> </span> <span class="separator">›</span> <b:if cond='data:blog.pageType == "item"'> <b:if cond='data:post.labels'> <b:loop values='data:post.labels' var='label'> <span itemprop="itemListElement" itemscope='itemscope' itemtype="http://schema.org/ListItem"> <meta itemprop="position" content="2"/> <a itemprop="item" expr:href='data:label.url'> <span itemprop="name"><data:label.name/></span> </a> </span> <span class="separator">›</span> <b:break/> </b:loop> </b:if> </b:if> <span itemprop="itemListElement" itemscope='itemscope' itemtype="http://schema.org/ListItem"> <meta itemprop="position" content="3"/> <span itemprop="name"><data:blog.pageName/></span> </span> </nav> </b:if> <b:if cond='data:blog.pageType != "item" and data:blog.pageType != "static_page"'> <nav class="breadcrumb" aria-label="Breadcrumb" itemscope='itemscope' itemtype="http://schema.org/BreadcrumbList"> <span itemprop="itemListElement" itemscope='itemscope' itemtype="http://schema.org/ListItem"> <meta itemprop="position" content="1"/> <a itemprop="item" href="https://livepmtv.blogspot.com/"> <span itemprop="name">Home</span> </a> </span> </nav> </b:if>
CSS
/* Breadcrumb minimal style */ nav.breadcrumb { font-size: 14px; font-family: 'Segoe UI', Tahoma, sans-serif; color: #333; margin-bottom: 1rem; } .breadcrumb a { text-decoration: none; color: #0073e6; /* blue link */ transition: color 0.2s ease-in-out; } .breadcrumb a:hover { color: #0056b3; text-decoration: underline; } .breadcrumb .separator { margin: 0 5px; color: #999; } .breadcrumb span[itemprop="name"] { font-weight: 500; } @media (max-width: 600px) { nav.breadcrumb { font-size: 13px; } } <script type = "text/javascript"> BSPNF_redirect = setTimeout(function() { location.pathname= "/" }, 1000); </script>

What’s Improved?

• ✅ <nav> with aria-label="Breadcrumb" helps accessibility

• ✅ Proper use of position for each breadcrumb item

• ✅ Dynamic category (label) display for posts, which helps in better topic indexing

• ✅ Microdata is now complete per Google's requirements

• ✅ Safe fallback for pages other than posts/static pages

 

Subscribe us and Get updates

Note: Like this post and Share with your friends, I’d love to hear from you in the comments below.

Article Source: