How To Add Breadcrumbs SEO Friendly In Blogger

So many tutorials which explains how to make breadcrumbs on Blogspot/Blogger. This time I want to explain how to create SEO friendly breadcrumbs and all labels indexed by Search Engines.



Breadcrumb navigation is a menu that is used for navigating a website or blog page , so it will be easier for visitors or readers for navigating your blog page or website . In SEO , mandatory installation of breadcrumb is very useful to facilitate the search engines to crawl or crawling your blog page so the blog will be SEO friendly and liked by the search engine bots and also your blog will be quickly indexed by search engines ( Google especially )



Oke now, as you have learn what is breadcrumb navigation and what are its benefits in SEO, let see the steps of adding it into a blogger blog.

Follow the below steps:

1. Go to Blogger Dashboard > Template > Edit HTML
2. Copy all the template code into a Notepad file
3. Now press Ctrl+ F and search for below code.

<b:include data=’top’ name=’status-message’/>

4. Replace that code with the below one.

<b:include data=’top’ name=’status-message’/> <b:include data=’posts’ name=’breadcrumb’/>

5. Now find this code in your blog template.

<b:includable id=’main’ var=’top’>

6. Replace it with the below code.

<b:includable id=’breadcrumb’ var=’posts’>
<b:if cond=’data:blog.homepageUrl == data:blog.url’>
<!– No breadcrumb on home page –>
<b:else/>
<b:if cond=’data:blog.pageType == “item”‘>
<!– breadcrumb for the post page –>
<p class=’breadcrumbs’>
<span class=’post-labels’>
<a expr:href=’data:blog.homepageUrl’ rel=’tag’>Home</a>
<b:loop values=’data:posts’ var=’post’>
<b:if cond=’data:post.labels’>
<b:loop values=’data:post.labels’ var=’label’>
<b:if cond=’data:label.isLast == “true”‘> »
<a expr:href=’data:label.url’ rel=’tag’><data:label.name/></a>
</b:if>
</b:loop>
<b:else/>
»Unlabelled
</b:if>
» <span><data:post.title/></span>
</b:loop>
</span>
</p>
<b:else/>
<b:if cond=’data:blog.pageType == “archive”‘>
<!– breadcrumb for the label archive page and search pages.. –>
<p class=’breadcrumbs’>
<span class=’post-labels’>
<a expr:href=’data:blog.homepageUrl’>Home</a> » Archives for <data:blog.pageName/>
</span>
</p>
<b:else/>
<b:if cond=’data:blog.pageType == “index”‘>
<p class=’breadcrumbs’>
<span class=’post-labels’>
<b:if cond=’data:blog.pageName == “”‘>
<a expr:href=’data:blog.homepageUrl’>Home</a> » All posts
<b:else/>
<a expr:href=’data:blog.homepageUrl’>Home</a> » Posts filed under <data:blog.pageName/>
</b:if>
</span>
</p>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>
<b:includable id=’main’ var=’top’>
<!–Breadcrumbs by http://tutorialines.blogspot.com/–>

7. Find ]]></b:skin> and paste the below code just above/before it.

.breadcrumbs{padding:0px 5px 5px 0;margin-bottom:20px;margin-top:0px;font-size:11px;color:#5B5B5B;border-bottom:1px dotted #bbb;}

8. Now your code is ready. Replace your entire template code with your Notepad file code.
9. Click on save template button.
10. You are Done!

Good Luck - Happy Blogging

Baca Juga