Breadcrumbs Schema Markup For Blogger Search Results - Seoclive

Recent Posts

Breadcrumbs Schema Markup For Blogger Search Results

Breadcrumbs-Schema-Markup-For-Blogger-Rich-Search-Results

Many are the times you come across search results without displaying URL to a post. That's what we call breadcrumbs. Breadcrumbs are now widely used by many websites as it increases search results. People have been asking me how I get the breadcrumbs in my templates. Actually, it's not yet decided if breadcrumbs will add search engines SEO optimization apart from improving click-through rate. Breadcrumbs will encourage people to click on your post from others since it looks more premium with schema vocabulary rich search results.

Blogger implementation of schema markups is completely different as compared to WordPress. As you know, WordPress is easy to implement schema markups to a website more than the blogger website. This happens due to the use of plugins in WordPress which in blogger we have to place the code. I know that it will reach a time when we will migrate to WordPress. Before we migrate to WordPress, some things have to be changed in blogger for us to change our website llooks.LLet'stake a look at how the breadcrumbs will look like in search engines such as google.

The Blogger Breadcrumb Navigation Looks Like This

Breadcrumbs Schema Markup For Blogger Rich Search Results
HOME >> SEO >> Breadcrumbs Schema Markup
Breadcrumbs are the collection of column of a website categoriesed to reduce the search result URL. IN Blogger Breadcrumbs can be widely used to shorten URL by giving out key topics. Here at seo clive we are giving you The schema markup to Blogger Breadcrumb. Use it to make your search urls rich enough for Blogger SEO. Read More.
 Without the breadcrumbs, the category and homepage button would not be visible in search results and the whole search results would look like this.

Breadcrumbs Schema Markup For Blogger Rich Search Results
https://www.seoclive.com/2018/04/breadcrumbs-schema-markup-for-blogger.html
Breadcrumbs are the collection of column of a website categoriesed to reduce the search result URL. IN Blogger Breadcrumbs can be widely used to shorten URL by giving out key topics. Here at seo clive we are giving you The schema markup to Blogger Breadcrumb. Use it to make your search urls rich enough for Blogger SEO. Read More.
It's super interesting what the Breadcrumb Schema markup can do to your search results. Big companies and eCommerce website use the breadcrumbs very efficiently in their websites which increases the click through rate. Am sure by now you are well off knowing about the SEO benefit of the breadcrumbs to your website and now its time we use them in your blogger blogs.


Types Of Breadcrumbs Schema Markup For Blogger.

There are mainly two two types of breadcrumbs Schema Rich Snippets Markups.
  • RDFA Breadcrumb Markup
  • JSLOD-LD Breadcrumb Markup
  • Vocabulary.Org Breadcrumbs Markup
Breadcrumbs Schema Markup For Blogger Rich Search Results

In This Article ill take ,you stem by step in adding any choise of breadcrumb to your blogger blog. The setup will be very much easy and you have the dynamic choise to choose the one you are going to impliment into your blogger blog. Lets start with the RDFA Breadcrumb Markup.


Vocabulary  Schema Markup For Blogger.

Google likes the schema presented on Vocabulary Schema Markup.  The bellow are step by step procedure to use the vocabularymarkup i a blogger template.

Step 1. Log in to Blogger and choose your specific website to add the SEO code.
Step 2. Reach out to the left commands by navigating to them to the Template command
Step 3. Click on the template command and then locate the Edit HTML next to Customize.
Step 4. Click anywhere in your code and then click on Ctrl+F in windows or CMD+F in mac.
Step 5. Search for ]]></b:skin>
Step 6. Just ABOVE the Abouve code , paste the CSS code below.

/*
    Blogger Breadcrumbs added by www.seoclive.com
    --------------------------------------------------*/
    .swtBreadCrumbs:before { content:"You are here:";font-size: 85%;letter-spacing: 2px;}
    .swtBreadCrumbs{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}
Step 5. Search fo the bellow code by pasting it in the search box and press enter for two times

<b:includable id='post' var='post'>
Step 6. Paste the below code just below the abouve code.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><!--
Breadcrumbs microdata markup added by www.seoclive.com START. -->
<div class='swtBreadCrumbs'>
<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'><data:label.name/></span>
</a>
</span>
<b:if cond='data:label.isLast != &quot;true&quot;'>|
</b:if>
</b:loop>
</b:if>
&#187;
<a expr:href='data:post.url' itemprop='url' title='Post Title'>
<span itemprop='title'>
<data:post.title/>
</span>
</a>
</div>
</div>
</b:if><!--
Breadcrumbs microdata markup added by Seoclive. -->


RDFA Breadcrumbs Markup Schema.

The following is the breadcrumbs rdfa schema. Follow the step by step lesson to use them into your blogger blog. Its way nice and easy. Lets now add the code.

How To Add RDFA Breadcrumb Markup Code To Blogger Template.

Step 1. Log in to Blogger and choose your specific website to add the SEO code.
Step 2. Reach out to the left commands by navigating to them to the Template command
Step 3. Click on the template command and then locate the Edit HTML next to Customize.
Step 4. Click anywhere in your code and then click on Ctrl+F in windows or CMD+F in mac.
Step 5. Search for ]]></b:skin>
Step 6. Just ABOVE the Abouve code , paste the CSS code below.

.breadcrumbs {
padding:5px 5px 5px 0px;
margin: 0px 0px 15px 0px;
font-size:90%;
line-height: 1.4em;
border-bottom:3px double #e6e4e3;
font-weight:bold;
}
Step 7. Now search for the folling code.

<b:include data='top' name='status-message'/>
After searching the abouve code, make sure to press enter for the second time so as to search for a corresponding code to avoid pasting the code at the wrong place.
For the above code, you may find it more than twice but make sure you use the SECOND one.
Step 8. Now search again for the bellow code.

<b:includable id='main' var='top'>
For this case, it may also appear twice. But forus we said earlier, make sure you use the second one.

Step 9. BELOW the Abouve code paste the code below.

<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType == "static_page"'>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> » <span><data:blog.pageName/></span></div>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<!– breadcrumb for the post page –>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs' xmlns:v="http://rdf.data-vocabulary.org/#">
<span typeof="v:Breadcrumb"><a expr:href='data:blog.homepageUrl' rel="v:url" property="v:title">Home</a></span>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == "true"'>
» <span typeof="v:Breadcrumb"><a expr:href='data:label.url' rel="v:url" property="v:title"><data:label.name/></a></span>
</b:if>
</b:loop>
» <span><data:post.title/></span>
</div>
<b:else/>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> » <span>Unlabelled</span> » <span><data:post.title/></span></div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<!– breadcrumb for the label archive page and search pages.. –>
<div class='breadcrumbs'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>Archives for <data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond='data:blog.pageType == "index"'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == ""'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>All posts</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>Posts filed under <data:blog.pageName/></span>
</b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>
 Step 10. Save Your Template code and wait for google to crawl through your breadcrumbs.


Thank You for being Part of this good article.I hope that i have impacted some good SEO information that can help you Design your Blogger Blog Best for ranking. Incase you face any difficulty while implementing the following fields please reach me by Commenting bellow Or Contact Me.

No comments

Powered by Blogger.