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?
Twitter: askanalyst
says:
Breadcrumbs do have an effect on SEO and this effect is on the positive side for webmaster. Regards
You’re probably right but I still believe the key benefit is giving your visitors a better user experience.
Twitter: mavtrevor
says:
You can simply use this code in your template to display the breadcrumb. Thanks don for the tips
Nwosu Desmond recently posted..How to recover deleted files with Recuva
Great tutorial, but what’s the advantages of adding breadcrumb to blogs ? Is it good for SEO ?
Vishal Gaikar recently posted..Google Glass Brings Augmented Reality Into The Mainstream
It has some SEO benefits because it enhance internal linking structure of a website…but i still believe it’s more useful to readers as they discover other pages on your blog.
Twitter: xlimderek
says:
wud there be any effect on my blog?
Derek recently posted..How Create a Google + Fan Page For Your Blog Or Website
Twitter: itechcode
says:
Wow great tutorial mate. Thanks you really superb and excellent.
Amit Shaw recently posted..Vital SEO Tips after Penguin Algorithm Update
Twitter: healthabeHQ
says:
Nice one Don, where exactly are we going to insert the code
I surely followed the above tutorial but after saving the template, I got this error:
“Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: The content of elements must consist of well-formed character data or markup.”
Manuel Garcia recently posted..Free Blogger Templates Inspired by Social Media
Twitter: Boygalaxy
says:
Pls don in wordpress where is d code placed in single.php happy blogging
Your theme is different from mine but you can try placing it above <?php the_title(); ?>
hi! i am no knowledge about these codes but i want this on my site ^_^
( could u help pls? tnx in advnce.
i cannot save the template… it says…
Error parsing XML, line 1861, column 3: The content of elements must consist of well-formed character data or markup.
ymoss recently posted..Cooking or Not! You Flirt!
How do I edit the look of my website here: http://www.nigerianuniversitynews.com.
Its looking quite dull to the eyes, I want it brighter with a green background just like your blue one.
Check the website, to tell me how I can achieve that.
Thanks Bro. This is Da Silva, Your best facebook fan on blogers lab.
I have problem Don… after copy and paste your last code ( blablabala until ) if I use New Blogger interface, the pop up show me :”We’re sorry, but we were unable to complete your request.
When reporting this error to Blogger Support or on the Blogger Help Group, please:
Describe what you were doing when you got this error.
Provide the following error code.
bX-vqo3gc
This information will help us to track down your specific problem and fix it! We apologize for the inconvenience.”
and if i use old blogger interface that shows :
Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: The content of elements must consist of well-formed character data or markup.
Any Idea Don?
Sorry the blabla mean the last step from your code
I get it, Dema. But like I said, this code doesn’t work on all templates due to reasons I even can’t understand.
Hi , i found solution for whom this method is not working in some blogger templates. showing error like
“Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: The content of elements must consist of well-formed character data or markup.”
Do this in third step:
For that just replace » with this » as well-formed character, then remove the
two comment line in side those codes in third step.
Now click save or preview it will work for all blogger templates.
sorry the above comment is not working as parsed html is converted ,now do this replace » with & # 187 ; combine all symbolls to form as and-hash-187-semicolon as single word and replace » with that and follow the above step.Because combination of those smybols will results » as they are well formed character to use in XMl
Twitter: healthabeHQ
says:
Don when i add mine above the title in single.php the code for rdfa will show inside my theme
I checked your blog just now and it looks ok.
Can`t install it. I get error 500. What to do?
Pro Sound And Vocal Editing recently posted..Top Ways To Get T-Pain Effect For Free
Surely this breadcrumb stuff can rea.ly increase clickthrough rate, there is no doubt about that.
I finally manage to install it. It`s on my post pages but there is nothing in google search. What do to??
Pro Sound And Vocal Editing recently posted..Native Instruments Massive Review & Download Free Demo
It may take some time before google comes back to your site and crawl your content to notice the new change. Just give it some time.
Btw, can u pls share how u finally did it?
Twitter: xlimderek
says:
Hey
I can’t locate single.php in my themes folder
have any idea?
Derek recently posted..Top 5 Smartest Android Apps For Bloggers
Twitter: nigeriaschools
says:
thanks for this tutorial, it is definitely going to help me a lot.
make money online recently posted..My Blog Monthly Income report for November 2012
Twitter: nigeriaschools
says:
i have tried applying this on freebrowsinglink.com without any success, going to try this again.
post utme 2013 recently posted..Umaru Musa Yar’adua University (UMYU) Supplementary Admission List For 2012/2013 Is Out!!
Twitter: clixseo
says:
wow, i just did it on my blogger blog and it is working so cool. thanks for this.
thanks DC, this works perfectly.
Can i also add the design in my blog to appear on search engine?
clixseo.info
Tried this dozens of times and keep getting this:
“Your template could not be parsed as it is not well-formed. Please make sure that all XML elements are closed properly. XML error message: The content of elements must consist of well-formed character data or markup.
Error 500″
Twitter: YawalkarM
says:
Thanks for writing about my plugin (RDFa Breadcrumb). It is now available in 5 International Languages.
Great update, Mallikarjun. I’m still using the plugin since it’s the best I’ve found so far.
Twitter: generalkorex
says:
Thanks for the post i dont want to install many plugins.how can I do that without plugins.can i do it with hooks.