I’m not sure Breadcrumb has any SEO benefit but a sure fact is that it gives your a higher click through rate in google search. You heard me right and I’m talking from practical experience. A blogger sent me a message this morning asking how I included that breadcrumbs in Google search and I had to come up with this post.
If you don’t know what it means, breadcrumb trail is a navigation tool that allows a user to see where the current page is in relation to the Web site’s hierarchy. At the top of this page, you should see this:
Home » Blogger » Displaying Breadcrumbs in Google Search for Blogger & WordPress
I wrote a post on this a while ago but it’s only visible on your website. If you run a search for one of my posts on google, it should look just like this:
This is because the breadcrumbs I use here has RDFa markup (Resource Description Framework – in – attributes).
To enable the RDFa breadcrumb navigation in Blogger which can be displayed in Google search, follow these steps:
1. Log in to Blogger and go to Template > Edit HTML. Check the box labelled “Expand widget template”
2. Search this:
3. In the line just above it, paste this CSS
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;
}
4. Now search for this code:
There may be two occurrences of this and you should do the same for both.
In the line just above this, paste this:
5. Now search again for this:
There may be more than one too and you should use the 2nd in that case. Just above it, past this code:
<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>
After you’ve done all these, you need to wait till google crawls your site again to notice your breadcrumb navigation. However, to know if you did it right, you can use Google rich snippet tool to preview how it should look on google search. This tweak doesn’t seem to work on all Blogger templates and if you’re having trouble adding it, it might be because you’re using one of those unsupported templates but whatever it it, you can always leave a comment.
RDFa Breadcrumb Navigation for WordPress
If you’re using the WordPress platform, you don’t need to do much editing. There’s a plugin I use here on this blog that simplified the whole thing. Install RDFa Breadcrumb.
It gives you a new template tag called rdfa_breadcrumb() that you can place anywhere in your template files. I only placed it above my post title in single.php file and did nothing else. If you got here from Google, you should’ve seen it right?