How to add Schema Markup Breadcrumbs in Blogger?

In this post, we are going to share How to Add Breadcrumbs Schema.org Markup in Blogger. Do you know the benefits of installing the breadcrumb function in your Blogspot theme? Read this article till end.

What is breadcrumbs?

Breadcrumbs are the easiest way to display the navigation system for the user interface. It is also called the trail navigation system. The trail navigation system looks like Home-> Label-> Sublabel-> Post Name.

Breadcrumbs is user friendly and SEO friendly.

It provides navigation information to Google of your website or blog for rich snippet in the Google search result. Breadcrumbs Schema.Org markup was launched in 2020. You should check your Blogspot for breadcrumbs. How to check if already installed breadcrumbs schema markup in your blogger template. Click here to check.

How to add Schema Markup Breadcrumbs in Blogger?

Benefits of Installing Breadcrumbs in Blogger Templates

If you add breadcrumbs to your blogger template then you should keep in mind that you have enabled the navigation system for Google Rich Snippet. To improve your rich snippet in the Google search results page, you need to combine the schema with the Data-vocabulary.org markup.

We have seen that lot of websites still do not have valid HTML 5 and schema markup, the results are lowering their website or blog rank. Because now Google has updated its algorithm to support schema.org markup websites.

Breadcrumbs with data terminology markup is very easy to install in Blogger and will also help improve your SEO ranking. So you have to add schema markup breadcrumbs.

How to add Schema Markup Breadcrumbs in Blogger?

  • Step 1. Log in to your Blogger account Dashboard.
  • Step 2. Now Click on -> Theme-> Customize -> Edit HTML.
  • Step 3. Now Search for ]]><b:skin> or <style> by Pressing Ctrl+F keys.
  • Step 4. Copy the below CSS code and past just after <style> or ]]><b:skin>.
.breadcrumbs{padding:10px;margin-bottom:20px;margin-top:0px;font-size:12px;color:#3F3F3F;border-bottom:1px dotted #828282;}
  • Step 5. Now Search for the following code <b:includable id='main' var='top'> and replace with the below code.
<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl != data:blog.url'> 
<b:if cond='data:blog.pageType == &quot;static_page&quot;'> 
    <div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> &#187; <span><data:blog.pageName/></span>
    </div> <b:else/>
    
    <b:if cond='data:blog.pageType == &quot;item&quot;'> <!-- breadcrumb for the post page -->
    <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'> &#187; <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> &#187; <span><data:post.title/></span>
       </div> <b:else/>
       
       <div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> &#187; <span>Unlabelled</span> &#187; <span><data:post.title/></span>
       </div> </b:if>
    </b:loop> <b:else/>
    
    <b:if cond='data:blog.pageType == &quot;archive&quot;'> <!-- breadcrumb for the label archive page and search pages.. -->
       <div class='breadcrumbs'> <span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>Archive For<data:blog.pageName/></span>
       </div> <b:else/>
       
       <b:if cond='data:blog.pageType == &quot;index&quot;'>
       <div class='breadcrumbs'> <b:if cond='data:blog.pageName == &quot;&quot;'> <span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>All Posts</span> <b:else/> <span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <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'/> 
  • Step 6. Now Save your Template.

The Breadcrumbs navigation system looks like👇 See Snapshot.

Breadcrumb Example Snapshot

Breadcrumbs provide an easy way for visitors to navigate your site and they instantly understand how the structure of your site works. Google loves them for the same reason. So easily add to your site using this code.

Post a Comment

Thanks for any suggestions or questions! We will reply to your message soon.

Previous Post Next Post