How to Make Breadcrumbs SEO Friendly And Valid HTML5

How to Make Breadcrumbs SEO Friendly and Valid HTML5 - Breadcrumbs is a navigation menu that usually resides on the post title of a blog or website. The contents of a link to the home or main page followed by a label and the title of the post that was opened. Breadcrumbs is quite important as a factor supporting SEO on blogs, because with breadcrumbs we can inform visitors about the category of articles in the blog.

Breadcrumbs that I will share this has the advantage of SEO Friendly, although I myself was not very adept in terms of SEO. However, this breadcrumbs I have proved by myself that these breadcrumbs are SEO Friendly, all labels are indexed by Search Engine and of course Valid HTML5.

How to Make Breadcrumbs SEO Friendly And Valid HTML5

1. Go to Blogger >> Select Template >> Choose Edit HTML

2. Copy the code below, then paste before the code ]]></b:skin> or </style>

/* 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;}

3. Then look for the HTML code post as follows.

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

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

<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 Untuk Halaman Pos -->
<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>

5. Finally, Save the Template and see the results.

To find out the breadcrumbs are properly installed on the blog, you can check on the Site Google Testing Tool.

This article I have created on how to Make Breadcrumbs SEO Friendly And Valid HTML5, hopefully with this short enough article, can be useful for us all. Good luck.

Share :