Make Google, Yahoo, and Bing like you more!
The last post I made on this topic was a bit too specific to the Independent Publisher theme and was more editorial like, which made it really hard to follow. So, at the request of Manish Suwal ‘Enwil’, I’ve decided to write a more generic version that should apply to most, if not all, WordPress themes.
Please note that the class names used below could be different in the theme you’re using, so it’s mostly important to just pay attention to the HTML tags themselves, unless you’re doing something with a div, span, etc.
There’s 6 steps, although step 6 has a few different parts to it.
1. First, you’re going to want this PHP function, a slightly modified version from Paul Lund. This function defines the schema type based on the type of content being displayed (article, author profile page, search results page, etc). Add this function to your themes functions.php file. The function is named
html_tag_schema(). You can find it here:
2. Find the
section of your theme and add our
html_tag_schema() function. This will output the proper result from
html_tag_schema(). It should look like the following:
<html <?php html_tag_schema(); ?> <?php language_attributes(); ?>>
3. The page
title tag is usually the same as the title of the page, so you can add this to your
<title itemprop="name"><?php wp_title(''); ?></title>
4. Now you’ll need to find the part of your theme that contains
the_content() function. It could look something like this:
<div class="entry-content" itemprop="mainContentOfPage">
<?php the_content(); ?>
5. It’s generally a good idea to let Google (and other search engines) know when an article/post was published. You can also tell them if/when an article has been updated. Both of these can be taken care of with schema.org markup:
<time class="entry-date" datetime="<?php the_date('F jS, Y'); ?>" itemprop="datePublished" pubdate><?php the_time( get_option( 'date_format' ) ); ?></time>
6. You can apply schema.org markup to any image, but it’s easiest when your theme supports featured images. I think most themes do support Featured Images now, and if your theme doesn’t, just add Featured Image support yourself, or kindly ask the theme developer to add support. I could probably help you out, too.
6a.If your theme supports Featured Images, it should make use of the
the_post_thumbnail() function. Find that function in your theme and replace it with this:
the_post_thumbnail( 'thumbnail', array('itemprop'=>'image' ) );
6b.If the ‘thumbnail’ parameter value in your existing
the_post_thumbnail() function is something other than ‘thumbnail’, make sure to keep that original paramater value. For example, if your
the_post_thumbnail() call looked like
the_post_thumbnail( array( 700, 700 ) );, adjust your
the_post_thumbnail() function call to the following:
the_post_thumbnail( array( 700, 700 ), array('itemprop'=>'image' ) );
array( 700, 700 ) piece can be replaced by whatever size you want. The first array value is the width, and the second is the height. There’s a variety of image sizes pre-defined by WordPress:
The default image sizes of WordPress are “thumbnail”, “medium”, “large” and “full” (the size of the image you uploaded). These image sizes can be configured in the WordPress Administration Media panel under Settings > Media. This is how you can use these default sizes with
the_post_thumbnail()and schema.org markup:
the_post_thumbnail(); // without parameter -> 'post-thumbnail'
the_post_thumbnail('thumbnail',array('itemprop'=>'image' )); // Thumbnail (default 150px x 150px max)
the_post_thumbnail('medium',array('itemprop'=>'image' )); // Medium resolution (default 300px x 300px max)
the_post_thumbnail('large',array('itemprop'=>'image' )); // Large resolution (default 640px x 640px max)
the_post_thumbnail('full',array('itemprop'=>'image' )); // Full resolution (original size uploaded)
the_post_thumbnail( array(100,100), array('itemprop'=>'image' ) ); // Other resolutions (100x100)
If you want to know more about schema.org, have a look at my original post. Schema.org is also a wonderful resource, their documentation is excellent and would advise that you read through the Getting Started Guide, it provides a great overview of the concepts behind structured data and schema.org.
Google also has a post about adding schema.org markup to videos, which could be really useful if you run a site with a lot of video content.
That’s all there is to adding basic schema.org structured data to your WordPress theme. You could obviously extend it to support more schema.org “things”, but I’ll leave that for you. If you did every step in this post, you’ll have schema.org markup for featured images, article publish and update time, main content declaration and structured data enabled
head HTML tags.