2Wordpress LogoFixing 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
  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.

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

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.

 

Twenty Ten 1.5

In functions.php replace this

With this

In functions.php replace this

With this

In header.php replace this

With this

In loop.php (3 instances), loop-single.php, loop-page.php and loop-attachment.php replace this

With this

Twenty Elev­en 1.5

com­ing very soon…

Annotum Base 1.1.1

In 7 files (functions\features-articles.php, excerpt\type-article.php, excerpt\excerpt-default.php, content\type-article.php, content\page.php, content\content-default.php, content\article-pdf.php) replace

with

 

Found this useful? Please do let us know by dropping a comment below. If you would like to subscribe please use the subscribe link on the menu at the top right. You can also share this with your friends by using the social links below. Cheers.

Leave a Reply

2 Comments