How To Install Breadcrumbs Valid HTML5 + Schema Markup

0
installing valid html 5 and data-vocabulary.org breadcrumbs in blogger template
Are you using Breadcrumb Trail Navigation System in your blogger website or blog ? Do you know the benefits of installing Breadcrumb functions in your blogspot theme? Don't worry if you have not yet installed SEO friendly and valid HTML 5 with Schema.org markup today we are going to share How to Add Schema.org Markup and Valid HTML5 Breadcrumb in blogger.

What is Breadcrumb?

Breadcrumbs are the easiest way to display navigation system for user interface.It also called Trail Navigation System.Trail navigation system looks like Home->Labels->Widgets->Post Name.Breadcrumbs are user and SEO friendly.It provide the navigation information of your website or blog to google for rich snippets in google search result.Nowdays there are lot of improvements occurs in rich snippets , year back Schema.Org markup launched and HTML 5 version is out ,so if your blogger website or blog template is old like 2-3 years then you must re install the breadcrumbs in your blogspot theme.

Benefits of Installing Breadcrumbs in Blogger template

So till now we expect that you must understood what is a breadcrumbs and what's the use of breadcrumbs in blogger template.If you add breadcrumbs in your blogger template then you must keep this in your mind you have enabled navigation system for google rich snippets.In order to improve your rich snippet in google search result page you must add schema Data-vocabulary.org markup with the touch of valid HTML 5 in your breadcrumb have added all the important elements in the breadcrumb code snippet.We have seen still lot's of website does not have valid HTML 5 and Schema markup result their website or blogs rank is decreasing because now google have updated their algorithms to support the schema.org markup websites.Breadcrumb with data vocabulary markup is very easy to install in blogger and it will also help to improve your SEO and Alexa Ranking.So you must add schema markup breadcrumbs , in order to install follow the steps mentioned below.

How to Add Valid HTML 5 + Schema Markup Verified Breadcrumbs in blogger

Installation Steps:
Step 1. Log in to your Blogger account and Go to your Blogger Dashboard.
Step 2. Now Click on -> Template -> Edit HTML.
Step 3. Now Search for ]]></b:skin> or </style> by Pressing Ctrl+F keys.
Step 4. Now Copy the below CSS code snippet and past just before/above </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 snippet <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...Done !

Now Visit the below google structure data testing tool url to check that you have installed correctly breadcrumbs in your blogger template.
if you have installed correctly you will see the result like this:
breadcrumbs testing in google structure data testing tool

Tutorial on installing data-vocabulary.org and creating valid html5 and adding schema.org markup on breadcrumbs for better seo in blogger template.learn trick to add create make install seo friendly validate with html5.
Are you using Breadcrumb Trail Navigation System in your blogger website or blog ? Do you know...
SUMMARY

Tutorial on installing data-vocabulary.org and creating valid html5 and adding schema.org markup on breadcrumbs for better seo in blogger template.learn trick to add create make install seo friendly validate with html5.

You Might Also Like:

We hope this article helped you to learn How To Install Breadcrumbs Valid HTML5 + Schema Markup . If you have any question or any complication please don't hesitate to ask us.You can drop your message below in the comment box or you can Contact Us!. If you liked this article please join us on : Facebook | Twitter | Google+

SUBSCRIBE ARTICLES BY EMAIL

Post a Comment Blogger Disqus

0 Comments on "How To Install Breadcrumbs Valid HTML5 + Schema Markup " So Far
Out Of Topic Show Conversion CodeHide Conversion Code Featured Post

MARKUP FOR WRITING COMMENTS:
1. To Insert Code Length Use<i rel="pre">Code Here</i>
2. To Insert Short Codes Use<i rel="code">Code Here</i>
3. To Insert Quote Use<b rel="quote">Quote</b>
4. To Insert Image Use<i rel="image">Image URL</i>
5. To Insert Video Use<i rel="youtube">You Tube Url</i>

Note: You Can Also Convert Your Code Directly From The Conversion Box.
--------------------------------------------------------------------------------------------------------------------------------------------------------
Please drop your comment according with the topic and feedback with hyperlinks may be removed.Thank you.
Regards:
Team Bloggersstand