Rich Snippet Breadcrumbs for WordPress that Google displays

Google introduced Rich Snippet back in 2009. Still after two years of its launch most of the websites are not able to take the advantage of this feature. Rich Snippet gives an overview of the content of the page and helps users to understand what is inside without visiting the page. Google offers Rich Snippet for Reviews, People, Products, Businesses and organizations, Recipes, Events, Music and more.
Here I am going to describe how to implement breadcrumbs in WordPress blogs that will appear in Google search result.
After you implement this feature search results for your sites will be displayed like the image below.
Rich Snippet breadcrumbs for WordPress that Google displays
Though this feature can be achieved by some other ways, here I’m going to describe how to do this using Yoast WordPress SEO plugin by Joost de Valk. This is one of the best (best for me) SEO plugin available for WordPress. It comes with built in breadcrumbs feature but Google doesn’t shows the breadcrumbs in search results for most of the blogs.
First download, Install and activate the plugin from WordPress directory. Include the breadcrumbs on pages you want it to appear. On my site I have installed this feature only on Single posts. You may include it to archive pages or even on the home page. To include it to the Single Post page add this lines on your themes single.php page where you want the breadcrumbs to appear.

<?php if ( function_exists('yoast_breadcrumb') ) {
yoast_breadcrumb('<p id="breadcrumbs">','</p>');
} ?>

First checkout your posts breadcrumb’s source code to know how you need to edit it. You will find something similar to this

<p id="breadcrumb">
You are here: <a href="http://updateox.com">Home</a> » 
<a href="http://updateox.com/category/wordpress/">WordPress</a> » 
<strong>Post Title</strong>
</p>

As you can see there is no microdata or RDFa markup for your breadcrumb as prescribed by Google, it won’t show in search result. So now we have to edit the source code of this plugin. I hope Joost doesn’t mind it.

Go to Plugins >> Editor from your WordPress dashboard and select WordPress SEO.
We have to edit the wordpress-seo/frontend/class-breadcrumbs.php file in WordPress plugins directory.
Find out this piece of code:

if ( "page" == $on_front && 'post' == get_post_type() ) {
$homelink = '<a href="'.get_permalink(get_option('page_on_front')).'">'.$home.'</a>';
$bloglink = $homelink;
if ( $blog_page && ( !isset($opt['breadcrumbs-blog-remove']) |
| !$opt['breadcrumbs-blog-remove'] ) )
$bloglink = $homelink.' '.$sep.' <a href="'.get_permalink($blog_page).'">'
.$this->get_bc_title($blog_page).'</a>';
} else {
$homelink = '<a href="'.get_bloginfo('url').'">'.$home.'</a>';
$bloglink = $homelink;
}

This snippet of code should be from line number line number 121 to 129. Now replace line no 127 with this

$homelink = '<span typeof="v:Breadcrumb"><a rel="v:url" property="v:title" href="'
.get_bloginfo('url').'">'.$home.'</a></span>';

Now find out this one from line no 184 to 189(don’t panic if it differs)

if ( count($terms) > 0 ) {
$bctitle = wpseo_get_term_meta( $terms[0], $main_tax, 'bctitle' );
if (!$bctitle)
$bctitle = $terms[0]->name;
$output .= '<a href="'.get_term_link($terms[0], $main_tax).'">'.$bctitle.'</a> '.$sep.' ';
} 

and replace line no 188(5 here) with this

$output .= '<span typeof="v:Breadcrumb"><a rel="v:url" property="v:title" href="'
.get_term_link($terms[0], $main_tax).'">'.$bctitle.'</a></span> '.$sep.' ';

Now save the file. We have to do one more change. Remember the code you added to single.php file? Change that to this

<?php if ( function_exists('yoast_breadcrumb') ) {
yoast_breadcrumb('<div xmlns:v="http://rdf.data-vocabulary.org/#" class="breadcrumb">',
'</div>');
} ?>

Save all setting and refresh your blog post page. Now see the source code. You will see this.

<div xmlns:v="http://rdf.data-vocabulary.org/#" class="breadcrumb">
You are here: 
<span typeof="v:Breadcrumb">
<a rel="v:url" property="v:title" href="http://updateox.com">Home</a></span> » 
<span typeof="v:Breadcrumb">
<a rel="v:url" property="v:title" href="http://updateox.com/category/wordpress/"></span> »
<strong>Post Title</strong>
</div>

You are done! You have just implemented breadcrumbs that will appear on Google search result. Check your result with Rich Snippets Testing Tool by Google.

Keep in mind that as you are editing the sourcecode of a plugin, it will be replaced by the original plugin when you auto update it. To avoid such situation first download the updated version, edit the sourcecode and the upload it again.
4 Comments

Add a Comment

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

Notify me of followup comments via e-mail. You can also subscribe without commenting.