2Fixing Rich Snippets Testing Tool for Microdata

Over 2 years ago I pub­lished an art­icle on how to fix prob­lems with Word­Press themes which did­n’t pass the Google Rich Snip­pets Test­ing Tool. Since then lots has changed — Word­Press and most themes have bet­ter sup­port, HTML5 and CSS3 have arrived, and Google, Yahoo and Bing got togeth­er and decided to focus on Microdata, via schema.org. At the time micro­formats seemed the easi­est way to mark up pages, and the test­ing tool had the most com­pre­hens­ive sup­port for these. The move to Microdata and the changes to Word­Press required a new art­icle: this is it!

Instead of hav­ing lots of sep­ar­ate art­icles for dif­fer­ent themes I’ve decided to try to provide all the inform­a­tion in 1 guide. This makes it easi­er to keep up to date, and means there is just 1 cent­ral point for all requests and dis­cus­sion. It also makes more sense as sev­er­al of the steps are the same regard­less of what theme you are using. I’m not going to cov­er all the option­al extras in this art­icle, just the basics to get your site to val­id­ate with the tool. Once you’ve man­aged that you should find adding extra markup is rel­at­ively easy. So lets get started…

Add a link from your google profile to your site

You will see on my google+ pro­file that I have a pub­lic link to https://diymediahome.org — you will need the same for your own site. Ideally you will need all of your authors to have a google pro­file that is linked to your site in the same way as this.

1. Log in to your google pro­file
2. Scroll down until you see the links sec­tion some­where towards the bot­tom right of the page
3. Click on the edit link
4. Under the con­trib­ut­or to sec­tion click Add cus­tom link
5. Make sure the box to the right of the text con­trib­ut­or to is set to public
6. Enter your site name (e.g. DIY Media Home) and address (e.g. https://diymediahome.org)
7. Click Save

Add a link from your site to your google profile

Now we need to add a link from your author page to your google pro­file. There are 2 altern­at­ive ways to do this, I highly recom­mend using the Yoast SEO plugin.

1. Install the Yoast SEO plu­gin OR add the fol­low­ing code to the functions.php file of your theme

   function update_contactmethods( $contactmethods ) {
   // Add Google Profiles
   $contactmethods['googleplus'] = 'Google+';
   // Add Twitter
   $contactmethods['twitter'] = __( 'Twitter username (without @)', 'wordpress-seo' );
   
   return $contactmethods;
   }
   add_filter( 'user_contactmethods', 'update_contactmethods', 10, 1);

2. Go to your author pro­file in the word­press admin inter­face (hov­er over Users in the left-hand menu, and click on Your Pro­file)
3. In the Google+ field add a link to your google pro­file (e.g. https://plus.google.com/104657888470728381512/)
4. Make sure either you, or your oth­er site authors do the same thing, and each link to your own google profiles
5. Now, if you’re using the Yoast plu­gin, go to the SEO menu and select Titles and Metas, click on the Home menu at the top of the page and in the Author high­light­ing pull­down box select the user you want to use as the author of the homepage
6. If you’re insist­ent about not using the Yoast plu­gin you will need to manu­ally add the fol­low­ing code to header.php (assum­ing you have one). Don’t for­get to change my google pro­file url to yours.  This code will use the post author’s google pro­file url if there is a val­id one, and will use a default (yours) if there isn’t.

   <link rel="author" href="<?php $gplus   = 'https://plus.google.com/115369062315673853712/posts'; if ( is_singular() ) {global $post; $gplus = get_the_author_meta( 'googleplus', $post->post_author );} echo $gplus; ?>"/>

Fix errors of a missing “updated” field

Most word­press themes include inform­a­tion about when the post was pub­lished in the post inform­a­tion area, but very few also include when it was last updated. This is a pity, because updated is required where­as pub­lished actu­ally isn’t! Adding it is easy though, and again, there are 2 ways, the prop­er way and the quick hack way. I recom­mend the prop­er way of course, but if neces­sary you can resort to the quick hack. We’re also going to change from micro­formats to microdata at the same time.

The proper way

We’re going to add some addi­tion­al inform­a­tion to post head­ers, both for search engines and for our vis­it­ors. We will need to do this for posts, pages, archives and the homepage.

1. We need to find the file that con­tains the code which gen­er­ates the pub­lished link. This will almost cer­tainly use the word­press func­tion get_the_date(). You can search through your theme files, or refer to theme spe­cif­ic details below where I have provided details for lots of themes
2. We are going to check if the pub­lished and updated dates are the same. If they are we will just add the extra dateUp­dated item­prop but if they are dif­fer­ent we will out­put some extra text to the visitor
3. We’re going to add the fol­low­ing  (and modi­fy it as it explains)

   <?php if(get_the_date()==get_the_modified_date()): ?>
   
   //we're going to use the original code just with the updated class added
   //put your theme's original code here
   //remove any class=""
   //add itemprop="datePublished dateCreated dateModified" to the HTML tag surrounding the get_the_date() function
   
   <?php else: ?>
   
   //we're going to use slightly code just with the updated date added
   //copy your theme's original code to here and then modify it as below
   //remove any class=""
   //add itemprop="datePublished dateCreated" to the HTML tag surrounding the get_the_date() function
   //add in a new html tag into the line where you want it to appear as below
   //Updated <?php echo get_the_modified_date() ?>
   
   <?php endif; ?>

4. You’ll either have to fig­ure out the ori­gin­al theme’s code and edit it, or refer to the details for spe­cif­ic themes below.
5. You may have to repeat this edit for mul­tiple files

The quick hack

We’re going to cheat and sup­ply the pub­lished date as the updated date, even if the post has actu­ally been updated more recently. If the post has been updated then we’ll actu­ally be sup­ply­ing incor­rect inform­a­tion, but it will still val­id­ate. It really is bet­ter to do it prop­erly if pos­sible, but if you’re insist­ent on doing it this way read on. As above we will need to do this for posts, pages, archives and the homepage.

1. As above we need to find the file that con­tains the code which gen­er­ates the pub­lished link. This will almost cer­tainly use the word­press func­tion get_the_date(). You can search through your theme files, or refer to the table below where I have provided details for lots of themes
2. Find the HTML ele­ment that sur­rounds the date (often it will have class="published").
3. Edit the ele­ment by remov­ing the class and adding the fol­low­ing instead itemprop="datePublished dateCreated dateUpdated"
4. As above, you may need to repeat this edit in mul­tiple files

Replacing the built-in microformats (because mixing rich snippet formats breaks things)

By default word­press is still using micro­format markup for com­ments, which sadly seems to break microdata markup of things like recipes. The best way to fix this is to remove the micro­format markup and replace it with microdata markup. Unfor­tu­nately, the word­press core func­tions that pro­duce this markup don’t have a con­veni­ently loc­ated fil­ter or hook so this requires a bit of tinker­ing about.

Replacing vcard in the comments section

1. What we’re going to do is use a com­ment call­back to change the out­put of com­ments. Many themes already use a call­back which we can modi­fy, and for those that don’t we’ll add one based on the word­press default
2. Check if you theme already has a com­ment call­back — search your theme files for the func­tion wp_list_comments. If it includes the code callback= or 'callback' => then it is using a call­back which you should be able to find (prob­ably in functions.php) by look­ing for the name of the call­back func­tion, which is the part after the = sign or arrow, e.g. wp_list_comments( array( 'callback' => 'twentyten_comment' ) ); or wp_list_comments('type=comment&callback=bones_comments');. If it does­n’t then we will need to add one by adding callback=diymh_comment or array( 'callback' => 'diymh_comment' ) to the line.
3. If you needed to add a com­ment call­back then you will need to add the fol­low­ing code to functions.php

   function diymh_comment($comment, $args, $depth) {
   $GLOBALS['comment'] = $comment; ?>
   <li <?php comment_class(); ?> id="li-comment-<?php comment_ID() ?>">
     <div id="comment-<?php comment_ID(); ?>">
   <div class="comment-author novcard">
   <?php echo get_avatar($comment,$size='48',$default='<path_to_url>' ); ?>
   
   <?php printf(__('<cite class="fn">%s</cite> <span class="says">says:</span>'), get_comment_author_link()) ?>
   </div>
   <?php if ($comment->comment_approved == '0') : ?>
   <em><?php _e('Your comment is awaiting moderation.') ?></em>
   <br />
   <?php endif; ?>
   
   <div class="comment-meta commentmetadata"><a href="<?php echo htmlspecialchars( get_comment_link( $comment->comment_ID ) ) ?>"><?php printf(__('%1$s at %2$s'), get_comment_date(),  get_comment_time()) ?></a><?php edit_comment_link(__('(Edit)'),'  ','') ?></div>
   
   <?php comment_text() ?>
   
   <div class="reply">
   <?php comment_reply_link(array_merge( $args, array('depth' => $depth, 'max_depth' => $args['max_depth']))) ?>
   </div>
     </div>
   <?php
   }

4. You will notice that this code has a class="novcard" instead of the ori­gin­al class="vcard".
5. If your theme did have its own call­back you need to find the call­back func­tion and replace any instances of class="vcard" with class="novcard"

Replacing hfeed in the header

1. Next, we need to also remove any instances of class="hfeed", which are usu­ally found in header.php. Replace all occur­rences of hfeed with nohfeed

Replacing hentry and title rich snippets

1. We can replace these ele­ments with a couple of neat func­tions added to functions.php

   function diymh_replace_hentry($classes){
   if(($key = array_search('hentry', $classes)) !== false) $classes[$key]='nohentry';
   return $classes;
   }
   add_filter('post_class','diymh_replace_hentry');
   
   function diymh_microdata_title($title) {
       return '<span itemprop="name">'.$title.'</span>';
   }
   add_filter('the_title', 'diymh_microdata_title', 10, 2);

Adding the information type (e.g. Article, Recipe, etc.) to the article header

1. First, decide what type of work you are pub­lish­ing — most likely an art­icle.  Have a look at the list at schema.org
2. Find the HTML tag which con­tains the func­tion post_class()
3. Add the code itemscope itemtype="https://schema.org/Article" (replace art­icle if you picked a dif­fer­ent type of work)

Finally, to avoid breaking any styles

1. You will need to edit your theme’s style.css and do a search/replace oper­a­tion to replace all instances of .vcard with .novcard and replace all instances of .hfeed with .nohfeed so that our changes don’t mess up any CSS styl­ing of our comments

Fixing any other errors

Any oth­er changes neces­sary will be detailed on a per theme basis below. If you have a theme which you are unable to fix please post a com­ment. If its a free theme please let me know the theme name, and if it is a premi­um theme please let me know so I can provide you with an e‑mail address to send a zipped copy to.

Theme specific details

Before just car­ry­ing out these edits don’t for­get to carry out the steps to link your google pro­file and your site to each oth­er, and install Yoast SEO, or add the code provides above.

function twentyten_posted_on() {
printf( __( '<span class="%1$s">Posted on</span> %2$s <span class="meta-sep">by</span> %3$s', 'twentyten' ),
'meta-prep meta-prep-author',
sprintf( '<a href="%1$s" title="%2$s" rel="bookmark"><span class="entry-date">%3$s</span></a>',
get_permalink(),
esc_attr( get_the_time() ),
get_the_date()
),
sprintf( '<span class="author vcard"><a class="url fn n" href="%1$s" title="%2$s">%3$s</a></span>',
get_author_posts_url( get_the_author_meta( 'ID' ) ),
esc_attr( sprintf( __( 'View all posts by %s', 'twentyten' ), get_the_author() ) ),
get_the_author()
)
);
}

function twentyten_posted_on() {
if(get_the_date()==get_the_modified_date()){
printf( __( '<span class="%1$s">Posted on</span> %2$s <span class="meta-sep">by</span> %3$s', 'twentyten' ),
'meta-prep meta-prep-author',
sprintf( '<a href="%1$s" title="%2$s" rel="bookmark"><span itemprop="datePublished dateCreated dateModified">%3$s</span></a>',
get_permalink(),
esc_attr( get_the_time() ),
get_the_date()
),
sprintf( '<span class="author vcard"><a itemprop="author" href="%1$s" title="%2$s">%3$s</a></span>',
get_author_posts_url( get_the_author_meta( 'ID' ) ),
esc_attr( sprintf( __( 'View all posts by %s', 'twentyten' ), get_the_author() ) ),
get_the_author()
)
);
}
else{
printf( __( '<span class="%1$s">Posted on</span> %2$s <span class="meta-sep">by</span> %3$s.  Updated <span itemprop="dateModified">%4$s</span>.', 'twentyten' ),
'meta-prep meta-prep-author',
sprintf( '<a href="%1$s" title="%2$s" rel="bookmark"><span itemprop="datePublished dateCreated">%3$s</span></a>',
get_permalink(),
esc_attr( get_the_time() ),
get_the_date()
),
sprintf( '<span class="author vcard"><a itemprop="author" href="%1$s" title="%2$s">%3$s</a></span>',
get_author_posts_url( get_the_author_meta( 'ID' ) ),
esc_attr( sprintf( __( 'View all posts by %s', 'twentyten' ), get_the_author() ) ),
get_the_author()
),
get_the_modified_date()
);
}
}

<div class="comment-author vcard">

<div class="comment-author novcard">

<div id="wrapper" class="hfeed">

<div id="wrapper" class="nohfeed">

<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

<div id="post-<?php the_ID(); ?>" <?php post_class(); ?> itemscope itemtype="https://schema.org/Article">

<article <?php post_class('article-full'); ?>>

<article <?php post_class('article-full'); ?> itemscope itemtype="https://schema.org/Article">