How to Create WordPress SEO Breadcrumbs

By Posted 2012 Updated   BloggingSEOTutorialsWordPress

How can you create WordPress SEO friendly breadcrumbs code which displays more links in your search results and can get you extra free search engine traffic. Since Google introduced rich snippets in Google search results, webmasters have an option to enhance their Google visibility easily by implementing this feature.

See how our Google search results display Breadcrumbs, which provides more clickable green links below post title for visitors to click directly into our categories for extra search engine traffic.

search breadcrumbs

Breadcrumbs is the link trail you see on top of many web pages which defines site structure. Many new rich snippets are possible with schema.org implementation, which allows webmasters to implement code which allows search engines to understand your breadcrumbs and display them in results. Google Webmasters advises that the code is very strict, can be implemented in Microdata or RDFa format, and unless you get it all right, it will not work.

WordPress SEO Breadcrumbs

STEP 1: In WordPress, check out your theme functions.php file and add the following code. If you don’t have one in your theme, you can create it and upload to your themes folder.

Warning: Be warned that this file if not saved properly with proper PHP tags, will make your site go offline and you will need to FTP inside your server and edit the file to original if something goes wrong. So save a backup copy of this file, or test it on a test blog before implementing this.

Here is code you need to add to the theme functions.php file

<?php
if ( ! function_exists( 'seobreadcrumbs' ) ) :
function seobreadcrumbs() {
  $separator = '&rsaquo;';
  $home = 'Home';
  echo '<div xmlns:v="http://rdf.data-vocabulary.org/#" class="seobreadcrumbs">';
global $post;
  echo '  <span typeof="v:Breadcrumb">
  <a rel="v:url" property="v:title" href="YOUR-BLOG-URL">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;
?>

Note 1: If you already have a theme functions.php file with lots of code, then you do NOT need to add the php opening and closing tags (first and last line of the code) as they will already be present. Its a good practice to clearly mark the code with comments, so you know where the breadcrumbs code starts and ends should you need to edit it later.

Note 2: You need to replace YOUR-BLOG-URL with your full domain name url (including http://). The Separator is set to display a > between the breadcrumbs, you can always change that to what you like, but Google search results display this so it is good idea to keep  it that way.

STEP 2: Now in your template wherever you want to use the SEO breadcrumbs, you can install the following code. Typically you need to install in in your WordPress theme single.php file above the post title.

<?php seobreadcrumbs(); ?>

Its easy to style the breadcrumbs by editing your CSS file. Note the code uses the class .seobreadcrumbs –  so simply using the CSS class you can see how the web design appears. For example, the following CSS will make your breadcrumbs font smaller. You can easily change the placement, link colors etc by editing the CSS.

.seobreadcrumbs {font-size:0.8 em; }

STEP 3: Once you have implemented this, you can use the Rich Snippets testing tool to test your url. Google will crawl your pages typically over a few weeks and you can see breadcrumbs appearing in your site search results. To see which urls are getting the rich snippets, search for site:yourdomainname.com and behold.


15 comments on “How to Create WordPress SEO Breadcrumbs

  1. fran says:

    We’ll see how it goes. I set up on one of my sites.

  2. Elliott from the design agency says:

    I presume we can add post tags and taxonomies to this too

  3. QuickOnlineTips says:

    @fran – try it out and get search engine results with Breadcrumbs starting in a few days.

  4. QuickOnlineTips says:

    @Elliot – Sure you can use it for post tags and other ways too.

  5. Bill says:

    Wow! i like the PHP breadcrumbs which is like an architectural decision. I was asking can the breadcrumbs help in content relocation based on the HTTP status code?

  6. Trung Nguyen says:

    I will check this tutorial, thanks for sharing to us.

  7. Trung Nguyen says:

    I’m using genesis so didn’t need to add this code to function.php file BTW, thanks for the share.

  8. Dent says:

    Thank you. A wonderful SEO tips. I will try it out!

  9. Dewan says:

    yeah i agree on this point to a greater extent, however am not sure about google’s reaction to this code csi d htis

  10. raphaelnikolai says:

    Hi there!

    Good day! I was wondering why you are not using this on your site?

    Regards,

    Nik

  11. New Hot Tech says:

    I think Now i can create WordPress SEO Breadcrumbs. Wow! It’s a nice article.

  12. Harish says:

    I tried to use these SEO Breadcrumbs, but I have noticed an issue with them. IF any post is under some subcategory like “Demo—>ABC” then it displays the category lists in alphabetical order rather than the correct hierarchy in which the categories were meant to be.
    So, please update the above code to correct this issue.

  13. Mukesh Mali says:

    In Genesis theme Breadcrumbs feature is by default, in changelog author wrote that support for Genesis. So is there any necessary to change the theme code? Or leave it as default, plugin will take care of that?

    • QuickOnlineTips says:

      Genesis takes care of the breadcrumbs itself. This code will give your the Google rich text snippets you need.

  14. Merry Smith says:

    Good tutorial with good instructions. Thanks for sharing as I much prefer code in functions.php over a plugin. Tried this on my site and works fine.

Leave a Reply

Your email address will not be published. Required fields are marked *




Next Article »
css.php