How to Create WordPress SEO Breadcrumbs

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 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.

Step 1: Breadcrumbs Code

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

if ( ! function_exists( 'seobreadcrumbs' ) ) :
function seobreadcrumbs() {
  $separator = '&rsaquo;';
  $home = 'Home';
  echo '<div xmlns:v="" 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>
  echo '</div>';

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: Add Breadcrumbs to Theme Template

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: Test Breadcrumbs

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 and behold.

Share with friends

About the Author: P Chandra is editor of QOT, one of India's earliest tech bloggers since 2004. A tech enthusiast with expertise in coding, WordPress, web tools, SEO and DIY hacks.