How to Add SEO Breadcrumbs on in Blogger

How to Enable SEO Breadcrumbs in Blogger

One of the best little beneficial changes you can make to your website, for the sake of user navigation and for Google ranking, is to implement breadcrumbs. Breadcrumbs are great for internal site linking and to help Google follow your site structure. When combined with a sitemap, they make certain Google has everything indexed. When you make category pages that include all of your blog posts within that category, it make it easy for users to browse as well. Plus, they’re an easy way for users to stay on your site rather than bounce, and they take up virtually no screen space; just a single line above the post and below the navigation.

Breadcrumbs which I will share it has the advantages of SEO Friendly, though I myself am not very good in terms of SEO. However, these breadcrumbs already I see for yourself that this is already SEO Friendly breadcrumbs, all labels indexed by Search Engines and certainly Valid HTML5 .

How to Install Breadcrumbs SEO Friendly

1. Go to Blogger> Save Template> Edit HTML> Then add the CSS code below before ]]></b: skin> or </style>

CSS

/* Breadcrumbs */
.breadcrumbs{padding:20px 30px;background:#fff;margin-bottom:20px}
.breadcrumbs a,.post-info a {color:#19abea;}
.breadcrumbs a:hover,.post-info a:hover {color:#454545;}

2. The next step, find HTML code like this post

HTML

<b:includable id='main' var='top'>...</b:includable>

3. Then add the breadcrumbs HTML code just below the code above

HTML

<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' title='Home'>Home</a></span> / <span><data:blog.pageName/></span></div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<! - Breadcrumb For Pos page ->
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs'>
Anda di sini : <span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:blog.homepageUrl' itemprop='url' title='Home'><span itemprop='title'>Home</span></a></span>
<b:loop values='data:post.labels' var='label'>
/ <span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:label.url + &quot;?max-results=5&quot;' expr:title='data:label.name' itemprop='url'><span itemprop='title'><data:label.name/></span></a></span>
</b:loop>
/ <span><data:post.title/></span>
</div>
<b:else/>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag' title='Home'>Home</a></span> / <span>Without Label</span> / <span><data:post.title/></span></div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<!-- Breadcrumb Untuk Label Search dan Search Pages -->
<div class='breadcrumbs'>
<span><a expr:href='data:blog.homepageUrl' title='Home'>Home</a></span> / <span>Archived 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' title='Home'>Home</a></span> / <span>All Post</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl' title='Home'>Home</a></span> / <span><data:blog.pageName/></span>
</b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>

4. Save the template. To find breadcrumbs are installed properly on the blog, Buddy can check here Google testing tool .

Thank to - Arlina Design