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 looks.Let's take 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 categorized to reduce the search result URL. IN Blogger Breadcrumbs can be widely used to shorten URL by giving out key topics. Here at Seoblur 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 ResultsIt'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.
https://www.hoit.asia/2021/09/breadcrumbs-schema-markup-for-blogger.html
Breadcrumbs are the collection of column of a website categorized to reduce the search result URL. IN Blogger Breadcrumbs can be widely used to shorten URL by giving out key topics. Here at Seoblur we are giving you The schema markup to Blogger Breadcrumb. Use it to make your search urls rich enough for Blogger SEO. Read More.
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
1. Vocabulary Schema Markup For Blogger.
Google likes the schema presented on Vocabulary Schema Markup. The bellow are step by step procedure to use the vocabulary markup in 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.hoit.asia ------------------------------*/ .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 for 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 above code.
<b:if cond='data:blog.pageType == "item"'>
<div itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><!--
Breadcrumbs microdata markup added by www.hoit.asia START. -->
<div class='swtBreadCrumbs'>
<a expr:href='data:blog.homepageUrl' itemprop='url' title='Home'>
<span itemprop='title'>Home</span></a>»
<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 != "true"'>|
</b:if>
</b:loop>
</b:if>
»
<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 Seoblur.com -->
2. 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 To Blogger
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 Above code , paste the CSS code below.
.breadcrumbs {Step 7. Now search for the following code.
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;}
<b:include data='top' name='status-message'/>
After searching the above 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. As we said earlier, make sure you use the second one.
Step 9. BELOW the Above code paste the code below.
<b:includable id='breadcrumb' var='posts'>Step 10. Save Your Template code and wait for google to crawl through your breadcrumbs.
<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>