How to add breadcrumbs microdata valid HTML5

Scroll Down and click on Go to Link for destination

Congrats! Link is Generated

How to add breadcrumbs microdata valid HTML5. Breadcrumbs usually appear horizontally throughout the top of a Website page, often below concept bars or headers. They provide links here we are at each previous page the consumer navigated through to get at the current web site or—in hierarchical web page structures—the parent pages of the current one. Breadcrumbs offer a trail for the consumer to follow here we are at the starting or entry point. A greater-than indication (>) often provides as hierarchy separator, although designers may use other glyphs (such as » or ›), along with various graphical cures.(wikipedia)

In my opinion, the function of breadcrumb  on the blog is to know was where visitors are . With the breadcrumb , then the problem on the navigation links can be resolved  . In addition , the breadcrumb is also very good for SEO blog because it enriches the keywords in your posts. This is evident from some of the blog posts that appear on the top position in the search engines , and it is influenced also by the existence of this breadcrumb.

Add Breadcrumbs[images source:www.acebangsam.us]

What is the function of microdata ?

Straightforward example, if you create a css code and would choose to explain the code ( syntax ) using some parts of it that you do is add <!-- note here or comments --> The principle on this Microdata was, at first glimpse almost the same with the addition of comments on a css code, but the particular difference this comments was written inside HTML5 format.

The Of Microdata For Web or Blog Site

It ought to be emphasized, Microdata never to Optimization or to raise your website posting position inside SERP, but Microdata incorporates a function to improve Display Search results, Which Will really Clicking Inviting for your blog or website.

The Function of Microdata  for Search Engine

By utilizing microdata on your blog also offers an impact on the search engine, which facilitates the placement of the article on their directory (google) This message must be delivered by Google itself that encourages us to work with Microdata (rather than a microformat as well as RDFa),

now directly to the tricks and how to install breadcrumb with valid HTML5 microdata.

Step 1 : Put the following code above </style> or ]]></b:skin>

.breadcrumbs{padding:0px 5px 5px 0;margin-bottom:15px;margin-top:0px;font-size:14px;color:#444;border-bottom:1px dotted #666;}

Step 2 : Find this code  <b:includable id='main' var='top'>  then replace it with the code below:

<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='nofollow'>Home</a></span> &#187; <span><data:blog.pageName/></span> </div> <b:else/> <b:if cond='data:blog.pageType == &quot;item&quot;'> <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> &#187; <b:loop values='data:post.labels' var='label'><span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:label.url + &quot;?&amp;max-results=8&quot;' itemprop='url'><span itemprop='title'><data:label.name/></span></a></span><b:if cond='data:label.isLast != &quot;true&quot;'> &#187; </b:if> </b:loop> &#187; <span><data:post.title/></span> </div> <b:else/> <div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='nofollow'>Home</a></span> &#187; <span>Uncategories</span> &#187; <span><data:post.title/></span></div> </b:if> </b:loop> <b:else/> <b:if cond='data:blog.pageType == &quot;archive&quot;'> <div class='breadcrumbs'> <span><a expr:href='data:blog.homepageUrl' rel='nofollow'>Home</a></span> &#187; <span>Archive for <data:blog.pageName/></span> </div> <b:else/> <b:if cond='data:blog.searchQuery'> <div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='nofollow'>Home</a></span> &#187; <span><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' rel='nofollow'>Home</a></span> &#187; <span>All post</span> <b:else/> <span><a expr:href='data:blog.homepageUrl' rel='nofollow'>Home</a></span> &#187; <span><data:blog.pageName/></span> </b:if> </div> </b:if> </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 3 :The last step is... save the template and see the results.

If you look less attractive breadcrumb above, just change the css code as you like, and you can also change the &#187; with other symbols to make it more interesting and more varied,,, goodluck.

Go to Link