iBlognet

How To Add SEO Breadcrumbs in WordPress

by Sahil Umatia

Breadcrumbs is a secondary type of navigation that shows the actual location of a user in a website. Breadcrumbs are usually found in large website that have lots of content category wise. And it’s an easier way for user to navigate back to the category or home page. They are usually separated by “>” or “/” .

Breadcrumbs have one more advantage if they are implemented in a proper way. Breadcrumbs can also be crawled and seen in Google search engines. And one can get more traffic from search engines, because search engines love the way if a website is organized in a hierarchical manner. In this post I will show you how to implement SEO Breadcrumbs for WordPress.

Step 1: Add the following CSS code to custom.css. This is just for formatting the breadcrumb. You can customize it as per your need.

[CSS]
.seobreadcrumbs {font-family:Verdana,Arial;font-size:1em;font-weight:bold;text-transform: uppercase;padding:1.2em 1em 1em 1em;border-bottom:1px dotted #666;background:#FCFFB0;margin-bottom: 10px;}
.seobreadcrumbs a {color:#cc0000;border-bottom:1px dotted #fff;}
.seobreadcrumbs a:hover {border-bottom:1px dotted #cc0000;}

[/CSS]

Step 2: Add the following code to functions.php

[PHP]
if ( ! function_exists( ‘seobreadcrumbs’ ) ) :
function seobreadcrumbs() {
$separator = ‘›’;
$home = ‘Home’;
echo ‘<div xmlns:v=”http://rdf.data-vocabulary.org/#”>’;
global $post;
echo ‘  <span typeof=”v:Breadcrumb”>
<a rel=”v:url” property=”v:title” href=”http://www.iblognet.com”>Home</a>
</span> ‘;
$category = get_the_category();
if ($category) {
foreach($category as $category) {
echo $separator . “<span typeof=\”v:Breadcrumb\”>
<a rel=\”v:url\” property=\”v:title\” href=\”".get_category_link($category->term_id).”\” >$category->name</a>
</span>”;
}}
echo ‘</div>’;}
endif;

function show_crumbs() {
if(is_single() || is_tag() || is_search() || is_404() || is_page() || is_category()) { ?>
<?php seobreadcrumbs(); ?>
<?php }}
add_action(‘thesis_hook_before_content’,'show_crumbs’);

[/PHP]

Step 3: Now open single.php and search for <? PHP the_title (); ?> and add the following code just above it:

<? PHP seobreadcrumbs (); ?>

Now check your website, you should see breadcrumb like below:

breadcrumb

And after a week or two you could see you site listing like below:

breadcrumb

The links will be replaced by the breadcrumbs.

If you’re using Thesis Theme add the code from Step 1 in custom.css and the code from Step 2 in custom_functions.php and save it!! If you have any problem setting up the breadcrumb, leave a comment below and I will help you out.

Article by »


Sahil is the Editor of iBlognet. He is a freelance writer on topics related to Website Optimization (SEO), Blogging, and Tech. He also specializes in SEO, HTML, CSS and Photoshop. Sahil has written 292 fantastic article(s) on iBlognet.


Author Site » Know me More

Author Connect »

1 Abbote Barrington

This really helped me a lot. I’ve been having problems with SEO and Wordpress, it’s just seems so complicated. Now, I have something to work on from your article.

2 Aasma

Hi Sahil,

Really nice information, I have been working on my new wordpress blog. Currently I’m working on its designing, however by default I got breadcrumb feature enabled on my theme. :)

3 Jack

Very informational article. First of all I would like to comment on Breadcrumb which is very essential in a web page especially in a website that have plenty of content category wise. Its really helpful for easy navigation to home page. But now a days, instead of manually coding you can try out some very effective word press SEO plugin like Yoast or All in one SEO etc from where you can add breadcrumb to your site. But again, Sahil you have provided an excellent tutorial especially for coder lover. Thanks for sharing :)

4 yang

since im using thesis theme i will use this…i did try once but it fail..so gonna try it again

5 Rahul

Really thanks for the information. Nice post

6 Susan

Well written and it’s helpful for me while reading. As per @Aasma said I think breadcrumbs now available by defaults in few wordpress themes. But still helpful for those who doesn’t have that option in their theme.

7 Syamsul Alam

Hey, I know that this is old post, and I think it will be great for your reader if you featuring WordPress SEO plugin by Yoast. You can easily add breadcrumb to your site by clicking a button using that plugin, you know… Which is better than dirtying your hand editing code (and probably messed up something) — even if you’re using Thesis.

If you already have some kind of review on that plugin, let me know!

8 Techbymak

Thank you Sir,
I have applied it on my TecH blog Techbymak and It is working very well.

9 Akshay Makadiya

Sir I’m Using one more website and there is a error like

Parse error: syntax error, unexpected T_STRING in /home/develop1/public_html/sitename.com/wp-content/themes/theme/single.php on line 7

Please help me what to do

10 Nishadha

An excellent tutorial for people who want to dive into the coding part. If you’re less tech savvy you can go for a theme that supports breadcrumb navigation by default or use a plugin that lets you easily add breadcrumb.

11 Pavan

Thank you Sahil,

I have just implemented this code in my blog, Although I am not using Thesis It worked like charm.

Regards,
Pavan Kumar.

12 sunil

I’ve been surfing online greater than three hours these days, but I never discovered any interesting article like yours. It’s lovely worth enough for me. In my opinion, if all webmasters and bloggers made excellent content as you probably did, the net can be a lot more useful than ever before.Anyway great article with great and rich content.Good job admin.keep it up

13 Vicky

is it really worthful to do the seo for breadcrumbs?

14 Sahil Umatia

It’s useful for search engines.

15 Akshay

Sir Of Course you are right that It is good for SEO as well Search engine. But my question is that Why most of the peoples are against the Breadcrumbs. If you write a post on Merits and Demerits of Breadcrumbs then It will be useful for Us. thank you sir.

16 Narender Chopra

Nice Tutorial Bro But I think Bredcrumbs aren’t SEO friendly. These are good for Online Shopping websites but for a blog its not good. I remeber the days when I lost my 30% of traffic just because of using Bredcrumbs. I removed them and after sometime I got my traffic back.

17 Rudd

The easier way to do this is using WordPress SEO plugin by Yoast.

Breadcrumbs is good for SEO since it make navigation through your website much easier for readers

18 Lei Broch

Thanks for sharing this detailed tutorial on how to set up seo Breadcrumbs in WordPress.

19 Leena Dasot

Wow this is fantastic, I have been wondering, really educated by your post, I never heard about breadcrumbs.

20 Ankit

Thanks dear.. you make this tutorial easier for newbie bloggers like me. Dear my blog is hosted on blogger. Please tell me should I use breadcrumb on Blogger blog? Will it be beneficial for me in blogging niche? Dear please reply ASAP.

21 Gaurav

Listening first time about the Breadcrumbs, never heard about this but by reading this blog, have understood that how an useful asset it is. The blog carries a very useful information on the topic of Breadcrumbs. Through this many folks would really understand that, how to enable the Breadcrumbs in their word press.

22 Sneha shah

It’s useful for search engines?

23 Sahil Umatia

Yes, it is.

24 Suhas

Hi Sahil,
Yes piece of code you have shared might work for most of the blog templates. In various articles pertaining to SEO of a blog template, breadcrumbs are referred as dated SEO practice. You may want to give you opinion about this.
Anyway, thanks for the piece of code.

25 Chetan

I agree with Narender Chopra. Breadcrumbs are not SEO friendly. They are good for e-commerce sites as they are categorized in way too many categories and the product list is long as well. Now to reply to this post, you wrote that this will be useful for blogs with many categories but that’s not the case. Very few blogs must have used it. (Personally, I haven’t come across a popular blog which has used breadcrumbs). Although, I’d like to add that the visual looks great in Google and I’d like to thank you for penning down this extensive and exclusive article on breadcrumbs. Cheers to you, Sahil!

26 Sukhen Tanchangya

My head totally break down for your given code, try to edit for own site :), can you tel me how to use easily?

27 Mohammed Yaqoob

Hi There,

Breadcrumbs are really cool for WordPress blogs as they help to improve internal linking, user interface and also SEO. This post is definitely going to help your blog readers to implement breadcumbs in their WP blogs.

You’ve made a great and helpful post.
Thanks for sharing.

28 Nitesh

I am knowing how to do bring bread crumbs in wordpress but I am looking for how to do same in blogger can you help me to do the same in blogger ? Will be great help.

Comments on this entry are closed.

Previous post:

Next post: