Dec 27, 2015

Show Blogger Labels (Breadcrumb) in Google Search Instead of Page URL

Apply Search Engine Optimization on Breadcrumbs in blogger so that it can appear on Google search result effectively and help search person to navigate about your blog about. Breadcrumb navigation proves to be useful in giving direction's to your reader, so that he faces no confusion using your website, its even useful as google automatically attaches your navigation below your post titles as the hyperlink, so it looks pretty professional and all the WordPress blogs comes with this awesome feature. In Other words " A breadcrumb is a set of links which describe the root of your current webpage and helps your website visitors to navigate your site hierarchy."

Show Blogger Labels (Breadcrumb) in Google Search Result

Check >>

How To Show Star Rating Review in Google Search Result?

In this tutorial we will learn the technique to add Breadcrumbs trail to Blogger blogs using some codes which will help Google to understand and present the information on your blog posts in search results as rich snippets.

Is Breadcrumb is Good For SEO?

Now you are thinking is it suitable for SEO or not? Right then the answer is don't worry. It is very good for SEO. However there are lots of people pretending SEO expert who have belief that it's badly affect on SEO. More over they feels that after adding this; Google leaves the task of indexing the permanent link of the particular page. Further when breadcrumbs are shown in SERP, the URLs are not displaying that means they say that the page owner looses the chance of having rich keywords presented in that particular URLs shown in SERP.

After lots of research and official talks; I would like to say that, they have totally wrong interpretation about the step taken by Google to show breadcrumbs. Remember, Google always one step ahead in case of Search. More than 80% of people from world depends on Google are satisfied by Google search including you and that's why you are here too.

Below is some lines by which you can trust me. First read following lines before doing any customization in your Blogger Template.
An improvement that replaces the URL in search results with a hierarchy, showing the precise location of the page on the website. The new display provides valuable context and new navigation options. Some web addresses help you understand the structure of the site and how the specific page fits into the site hierarchy; however, URLs are too long, too short, or too obscure to add useful information which doesn't provide much additional information about the site.

Some More Words for Your Better Understanding

Google doesn't removes URLs, rather it just not displaying those in search page. In search snippet tool you can see how Google grabs the meta data and URLs from hatom feed. So no need to worry about this point. In Google point of view, this improvement makes the SERP more clean and clear. More over Google says; currently it takes only small portion of the result shown in search page, and when it improves then that snippet will show more context & links pointing towards particular page shown in SERP. That's really cool! when each link in green colour shown in rich snippet is clickable, which provides further more access to more pages from the resulted webpage giving more page views. Reader may attract to click on these web links which improves click rate (CR) and which will give more generic traffic to your site.

How To Show Blogger Label (Breadcrumb) in Google Search Result?

  • Login to your blogger account. Navigate the template HTML editor of the blog in which you want to add breadcrumbs for rich snippets. 
  • Search by Pressing CTRL+F for following code.
<b:includable id='post' var='post'>
  • Now, replace it with the following bunch of codes.
    <b:includable id='post' var='post'>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div itemscope='' itemtype=''><!--
    Breadcrumbs microdata markup added by START. -->
    <div class='mbgBreadCrumbs'>
    <a expr:href='data:blog.homepageUrl' itemprop='url' title='Home'>
    <span itemprop='title'>Home</span></a>&#187;
    <b:if cond='data:post.labels'>
    <b:loop values='data:post.labels' var='label'>
    <span typeof='v:breadcrumb'>
    <a expr:href='data:label.url' itemprop='url' title='Categories' property='v:title' rel='v:url'>
    <span itemprop='title'><></span>
    <b:if cond='data:label.isLast != &quot;true&quot;'>|
    <a expr:href='data:post.url' itemprop='url' title='Post Title'>
    <span itemprop='title'>
    <data:post.title/> </span> </a></div></div></b:if>
  • Now Search For </b:skin> code and paste it just above of this.
    Blogger Breadcrumbs added by
    .mbgBreadCrumbs:before { content:"You are here:";font-size: 85%;letter-spacing: 2px;}
    .mbgBreadCrumbs{width:auto;padding:0 0 5px 0;margin:0 5px;font-size:95%;border:2px solid #EDE;-webkit-border-top-left-radius: 10px;-webkit-border-top-right-radius: 10px;-moz-border-radius-topleft: 10px;-moz-border-radius-topright: 10px;border-top-left-radius: 10px;border-top-right-radius: 10px;padding: 5px;text-align: left;color:#000;background:#C3B9A8;background:-webkit-linear-gradient(top,#C3B9A8,#F3F1E6);background:-moz-linear-gradient(top,#C3B9A8,#F3F1E6);background:-ms-linear-gradient(top,#C3B9A8,#F3F1E6);background:-o-linear-gradient(top,#C3B9A8,#F3F1E6);background:linear-gradient(top,#C3B9A8,#F3F1E6);line-height:22px}
  • Save your Blogger Template.
  • That's it. Enjoy.


So above guide is about How To Show Blogger Labels (Breadcrumb) in Google Search Instead of Page URL? I hope by this complete guide you can easily understand How To Show Labels in Search Result instead of URL and also understand the importance of it. Now its your choice. If you want to add this feature in your blog then follow above guide. Don't forget to subscribe us for more updates. Thank you. Share it.

No comments:

Post a Comment

We’re eager to see your comment. If you have any query related to the topic then drop a comment below. We will help you out of sure. However, Please Keep in mind that all comments are moderated manually by our human reviewers. According to our comment policy all link are nofollow so keep in mind that never use links in comments, we consider link comments as a spam.